繫結這個和引數

Version >= 5.1

當你在 JavaScript 中引用方法(屬性是一個函式)時,它通常不記得它最初附加到的物件。如果該方法需要將該物件稱為 this,則無法將其呼叫,並且呼叫它可能會導致崩潰。

你可以在函式上使用 .bind() 方法來建立包含 this 值和任意數量的前導引數的包裝器。

var monitor = {
  threshold: 5,
  check: function(value) {
    if (value > this.threshold) {
      this.display("Value is too high!");
    }
  },
  display(message) {
    alert(message);
  }
};

monitor.check(7); // The value of `this` is implied by the method call syntax.

var badCheck = monitor.check;
badCheck(15); // The value of `this` is window object and this.threshold is undefined, so value > this.threshold is false

var check = monitor.check.bind(monitor);
check(15); // This value of `this` was explicitly bound, the function works.

var check8 = monitor.check.bind(monitor, 8);
check8(); // We also bound the argument to `8` here. It can't be re-specified.

當不處於嚴格模式時,函式使用全域性物件(瀏覽器中的 window)作為 this,除非使用方法 .call 語法將函式作為方法呼叫,繫結或呼叫。

window.x = 12; 

function example() {
  return this.x;
}

console.log(example()); // 12

在嚴格模式下,this 預設為 undefined

window.x = 12; 
    
function example() {
  "use strict";
  return this.x;
}

console.log(example()); // Uncaught TypeError: Cannot read property 'x' of undefined(…)

Version >= 7

繫結運算子

雙冒號繫結運算子可用作上述概念的縮寫語法:

var log = console.log.bind(console); // long version
const log = ::console.log; // short version

foo.bar.call(foo); // long version
foo::bar(); // short version

foo.bar.call(foo, arg1, arg2, arg3); // long version
foo::bar(arg1, arg2, arg3); // short version

foo.bar.apply(foo, args); // long version
foo::bar(...args); // short version

這種語法允許你正常編寫,而不用擔心在任何地方繫結 this

將控制檯功能繫結到變數

var log = console.log.bind(console);

用法:

log('one', '2', 3, [4], {5: 5});

輸出:

one 2 3 [4] Object {5: 5}

為什麼要這麼做?

一個用例可以是你有自定義記錄器,並且你想決定執行時使用哪一個。

var logger = require('appLogger');

var log = logToServer ? logger.log : console.log.bind(console);