【筆記】apply, call 與 bind

一直對Javascript中的apply/call/bind的用法很模糊，恰好看到了這篇文章。對三者之間的區別與聯絡算是有了比較清晰的認識。

在Javascript中，Function是一種物件。Function物件中的this指向決定於函式被呼叫的方式。

使用apply，call 與 bind 均可以改變函式物件中this的指向。

apply / call

function add(c, d){
    return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

注意，如果傳入的第一個引數不是物件型別的，如1，那麼這個引數會被自動轉化為物件型別。

function bar() {     
    console.log(
        Object.prototype.toString.call(this)
    );
}

bar.call(7); // [object Number]

bind

ECMAScript 5引入了Function.prototype.bind。呼叫f.bind(someObject)會產生一個新的函式物件。在這個新的函式物件中，this被永久繫結到了bind的第一個引數上面，無論後期這個新的函式被如何使用。

function f(){
    return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty

另外，如果第一個引數為null或者undefined的話，那麼，實際上繫結到的是全域性物件，即global。這一點對三者都適用。

function bar() {     
    console.log(
        Object.prototype.toString.call(this)
    );
}

bar.bind()(); // [object global]
bar.apply();  // [object global]
bar.call();   // [object global]