前言——this的一些誤解

1. 不是指向自身
2. this 在任何情況下都不指向函數(shù)的詞法作用域

思考：

function foo() {
    var a = 2;
    this.bar(); 
}
function bar() { 
    console.log( this.a );
}
foo(); // ReferenceError: a is not defined ？

this 實際上是在函數(shù)被調(diào)用時發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里被調(diào)用。

當(dāng)一個函數(shù)被調(diào)用時，會創(chuàng)建一個活動記錄(有時候也稱為執(zhí)行上下文)。這個記錄會包 含函數(shù)在哪里被調(diào)用(調(diào)用棧)、函數(shù)的調(diào)用方法、傳入的參數(shù)等信息。this 就是記錄的 其中一個屬性，會在函數(shù)執(zhí)行的過程中用到。

這里要說的call，apply，bind都是來改變this的指向的

1、call、apply、bind對比

call,apply可以多次改變綁定對象；只是apply接受數(shù)組格式參數(shù)；

• 1、都是用來改變函數(shù)的this對象的指向的。
• 2、第一個參數(shù)都是this要指向的對象。
• 3、都可以利用后續(xù)參數(shù)傳參。

bind()方法會創(chuàng)建一個新函數(shù)，稱為綁定函數(shù)，當(dāng)調(diào)用這個綁定函數(shù)時，綁定函數(shù)會以創(chuàng)建它時傳入 bind()方法的第一個參數(shù)作為 this，傳入 bind() 方法的第二個以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)。

bind 是返回對應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用 。

bind 這些改變上下文的 API 了，對于這些函數(shù)來說，this 取決于第一個參數(shù)，如果第一個參數(shù)為空，那么就是 window。

2、關(guān)于綁定

1. 默認(rèn)的 this 綁定,
   就是說 在一個函數(shù)中使用了 this, 但是沒有為 this 綁定對象. 這種情況下, 非嚴(yán)格默認(rèn), this 就是全局變量 Node 環(huán)境中的 global, 瀏覽器環(huán)境中的 window.
2. 隱式綁定:
   使用 obj.foo() 這樣的語法來調(diào)用函數(shù)的時候, 函數(shù) foo 中的 this 綁定到 obj 對象.
3. 顯示綁定:
   foo.call(obj, ...),
   foo.apply(obj,[...]),
   foo.bind(obj,...)
4. 構(gòu)造綁定:
   new foo() , 這種情況, 無論 foo 是否做了綁定, 都要創(chuàng)建一個新的對象, 然后 foo 中的 this 引用這個對象.

優(yōu)先級: 構(gòu)造綁定>顯示綁定>隱式綁定>默認(rèn)的 this 綁定

image

3、硬綁定

bind只能被綁定一次；以第一次為準(zhǔn)；

function foo() {
    console.log("name: " + this.name);
}
var obj = { name: "obj" }, obj2 = { name: "obj2" }, obj3 = { name: "obj3" };
foo.bind(obj).call(obj2)  // name: obj
foo.bind(obj).bind(obj2)()  // name: obj

bind 內(nèi)部就是 包了一個apply；等到調(diào)用的時候再執(zhí)行這個包含apply的函；
實際上，ES5 中內(nèi)置的 Function.prototype.bind(..) 更加復(fù)雜。下面是 MDN 提供的一種bind(..) 實現(xiàn)：

詳細(xì)請看 為什么JavaScript多次綁定只有一次生效？

if (!Function.prototype.bind) {
    Function.prototype.bind = function(oThis) {
        //一個函數(shù)去調(diào)用,也就是說bind，call，apply的this是個函數(shù)；
        //然后再去改變這個函數(shù)里面的this；
        if (typeof this !== "function") {
         // 與 ECMAScript 5 最接近的
         // 內(nèi)部 IsCallable 函數(shù) 
         throw new TypeError(
          "Function.prototype.bind - what is trying " +
         "to be bound is not callable"
         ); 
        }
        //這里將初始化的參數(shù)緩存起來；
        var aArgs = Array.prototype.slice.call( arguments, 1 ),
        // ftoBind 指向要bind的函數(shù)；
        fToBind = this,
        // 返回一個新函數(shù)
        fNOP = function(){}, 
        fBound = function(){
        //fToBind.apply 改變綁定this；
        // 執(zhí)行的時候判斷，當(dāng)前this等于fNOP并且傳入oThis,就設(shè)置成當(dāng)前this，不然就改變成初始化傳入的oThis;
           return fToBind.apply( 
            (this instanceof fNOP && oThis ? this : oThis ),
            aArgs.concat(Array.prototype.slice.call( arguments ) )
            ); 
        };
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();
        return fBound;
    };
}

解釋(this instanceof fNOP && oThis ? this : oThis )
這段代碼請看 javascript 深入解剖bind內(nèi)部機(jī)制

4、軟綁定

硬綁定這種方式可以把 this 強(qiáng)制綁定到指定的對象(除了使用 new 時)，防止函數(shù)調(diào)用應(yīng)用默認(rèn)綁定規(guī)則。問題在于，硬綁定會大大降低函數(shù)的靈活性，使用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改 this。

if (!Function.prototype.softBind) {
    Function.prototype.softBind = function(obj) { 
        var fn = this; // 捕獲所有 curried 參數(shù)
        var curried = [].slice.call( arguments, 1 );
        var bound = function() {
            return fn.apply((!this || this === (window || global)) ?
            obj : this,curried.concat.apply( curried, arguments ) ); 
        }; 
        bound.prototype = Object.create( fn.prototype );
        return bound;
    }; 
} 

它會對指定的函 數(shù)進(jìn)行封裝，首先檢查調(diào)用時的 this，如果 this 綁定到全局對象或者 undefined，那就把 指定的默認(rèn)對象 obj 綁定到 this，否則不會修改 this。此外，這段代碼還支持可選的柯里化;

function foo() {
    console.log("name: " + this.name);
}
var obj = { name: "obj" }, obj2 = { name: "obj2" }, obj3 = { name: "obj3" };
var fooOBJ = foo.softBind( obj );
fooOBJ(); // name: obj
obj2.foo = foo.softBind(obj); 
obj2.foo(); // name: obj2 <---- 看!!!
fooOBJ.call( obj3 ); // name: obj3 <---- 看! 
setTimeout( obj2.foo, 10 );// name: obj <---- 應(yīng)用了軟綁定

注意

如果你把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind，這些值
在調(diào)用時會被忽略，實際應(yīng)用的是 默認(rèn)綁定規(guī)則:

function foo(a,b) {
    console.log( "a:" + a + ", b:" + b );
}
// 把數(shù)組“展開”成參數(shù)
foo.apply( null, [2, 3] ); // a:2, b:3

// 使用 bind(..) 進(jìn)行柯里化
var bar = foo.bind( null, 2 );
bar( 3 ); // a:2, b:3

用 null 來忽略 this 綁定可能會有副作用。如果某個函數(shù)確實使用了 this(比如第三方庫中的一個函數(shù))，那默認(rèn)綁定規(guī)則會把 this 綁定到全局對象(在瀏覽 器中這個對象是 window)，這將導(dǎo)致不可預(yù)計的后果(比如修改全局對象)。

優(yōu)化：用Object.create(null)替代 null 或者 undefined

• 參考：《你不知道的javascript》