繫結這個和引數
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);