一篇文章教你看懂關於JavaScript中this的軟綁定

首先，什麼是軟綁定？

所謂軟綁定，是和硬綁定相對應的一個詞，在詳細解釋軟綁定之前，我們先來看看硬綁定。在JavaScript中，this的綁定是動態的，在函數被​​調用的時候綁定，它指向什麼完全取決於函數在哪裡調用，情況比較複雜，光是綁定規則就有默認綁定、隱式綁定定、顯式綁定、new綁定等，而硬綁定是顯式綁定中的一種，通常情況下是透過呼叫函數的 apply() 、 call()  或ES5裡提供的 bind() 方法來實現硬綁定的。

硬綁定有什麼問題，為什麼需要軟綁定

上述三個方法好是好，可以依照自己的想法將函數的this強制綁定到指定的物件上（除了使用new綁定可以改變硬綁定外），但是硬綁定存在一個問題，就是會降低函數的靈活性，並且在硬綁定之後無法再使用隱式綁定或顯式綁定來修改this的指向。

在這種情況下，被稱為軟綁定的實作就出現了，也就是說，透過軟綁定，我們希望this在預設情況下不再指向全域物件（非嚴格模式）或 undefined （嚴格模式），而是指向兩者之外的一個物件（這點和硬綁定的效果相同），但是同時又保留了隱式綁定和明確綁定在之後可以修改this指向的能力。

軟體綁定的具體實作

在這裡，我用的是《你不知道的JavaScript 上》中的軟綁定的程式碼實作：

if(!Function.prototype.softBind){ 
    Function.prototype.softBind=function(obj){ 
        var fn=this;
        var args=Array.prototype.slice.call(arguments,1);
        var bound=function(){ 
            return fn.apply( (!this||this===(window||global))?obj:this,
            args.concat.apply(args,arguments));
            };
        bound.prototype=Object.create(fn.prototype);
        return bound;
        };
}

我們先來看看效果，之後再討論它的實作。

function foo(){
    console.log("name: "+this.name);
    }
var obj1={name:"obj1"},
obj2={name:"obj2"},
obj3={name:"obj3"};
var fooOBJ=foo.softBind(obj1);
fooOBJ();//"name: obj1" 在这里软绑定生效了，成功修改了this的指向，将this绑定到了obj1上1
obj2.foo=foo.softBind(obj1);
obj2.foo();//"name: obj2" 在这里软绑定的this指向成功被隐式绑定修改了，绑定到了obj2上
fooOBJ.call(obj3);//"name: obj3" 在这里软绑定的this指向成功被硬绑定修改了，绑定到了obj3上
setTimeout(obj2.foo,1000);//"name: obj1"18 
/*
*回调函数相当于一个隐式的传参，如果没有软绑定的话，这里将会应用默认绑定将this绑定到全局环
*境上，但有软绑定，这里this还是指向obj1
*/

可以看到軟綁定生效了。下面我們來具體來看看 softBind() 的實作。

在第一行，先透過判斷，如果函數的原型上沒有 softBind() 這個方法，則加入它，然後透過 Array.prototype.slice.call( arguments,1) 取得傳入的外部參數，這裡這樣做其實為了函數柯里化，也就是說，允許在軟綁定的時候，事先設定好一些參數，在呼叫函數的時候再傳入另一些參數（關於函數柯里化大家可以去網上搜一下詳細的講解）最後回傳一個 bound 函數形成一個閉包，這時候，在函數呼叫 softBind()之後，得到的就是 bound 函數，例如上面的 var fooOBJ=foo.softBind(obj1) 。

在 bound 函數中，首先會判斷呼叫軟綁定之後的函數（如fooOBJ）的呼叫位置，或者說它的this的指向，如果 !this （this指向undefined ）或是 this===(window||global) （this指向全域物件），那麼就將函數的this綁定到傳入 softBind 中的參數obj。如果此時this不指向undefind或全域對象，那麼就將this綁定到現在正在指向的函數（即隱式綁定或明確綁定）。 fn.apply 的第二個參數則是執行 foo 所需的參數，由上面的args（外部參數）和內部的arguments（內部參數）連接成，也就是上面所說的柯里化。

其實在第一遍看這個函數時，也有點迷，有一些疑問，比如 var fn=this 這句，在 foo 透過 foo.softBind() 調用 softBind 的時候，fn到底指向誰呢？是指向foo還是指向softBind？我們可以寫個demo測試，然後可以很清楚地看出fn指向什麼：

var a=2; 
function foo(){ 
}
foo.a=3;
Function.prototype.softBind=function(){ 
    var fn=this;
    return function(){
        console.log(fn.a);
    }
};
Function.prototype.a=4;
Function.prototype.softBind.a=5;
foo.softBind()();//3
Function.prototype.softBind()();//4

可以看出，fn（或者說this）的指向還是遵循this的綁定規則的， softBind 函數定義在Function的原型 Function.prototype 中，但是JavaScript中函數永遠不會「屬於」某個物件（不像其他語言如java類別裡面定義的方法那樣），只是物件內部引用了這個函數，所以在透過下面兩種方式呼叫時，fn（或者說this）分別隱式綁定到了 foo 和 Function.prototype ，所以分別輸出3和4。後面的 fn.apply() 也就相當於 foo.apply() 。

#

以上是一篇文章教你看懂關於JavaScript中this的軟綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！