關於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上

obj2.foo=foo.softBind(obj1);
obj2.foo();//"name: obj2" 在這里軟綁定的this指向成功被隱式綁定修改了，綁定到了obj2上

fooOBJ.call(obj3);//"name: obj3" 在這里軟綁定的this指向成功被硬綁定修改了，綁定到了obj3上

setTimeout(obj2.foo,1000);//"name: obj1"
/*回調函數相當於一個隱式的傳參，如果沒有軟綁定的話，這里將會應用默認綁定將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() 。

 

注：這篇文章我首載於掘金，由於一些個人原因現在才發到博客園，原文可見於 https://juejin.im/post/5b0417af518825426c692d54