JavaScript重識bind、call、apply

會會會發表於2019-04-17
JavaScriptAPP

前言——this的一些誤解

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

思考：

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

this 實際上是在函式被呼叫時發生的繫結，它指向什麼完全取決於函式在哪裡被呼叫。

當一個函式被呼叫時，會建立一個活動記錄(有時候也稱為執行上下文)。這個記錄會包 含函式在哪裡被呼叫(呼叫棧)、函式的呼叫方法、傳入的引數等資訊。this 就是記錄的 其中一個屬性，會在函式執行的過程中用到。

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

1、call、apply、bind對比

call,apply可以多次改變繫結物件；只是apply接受陣列格式引數；

  • 1、都是用來改變函式的this物件的指向的。
  • 2、第一個引數都是this要指向的物件。
  • 3、都可以利用後續引數傳參。

bind()方法會建立一個新函式，稱為繫結函式，當呼叫這個繫結函式時，繫結函式會以建立它時傳入 bind()方法的第一個引數作為 this，傳入 bind() 方法的第二個以及以後的引數加上繫結函式執行時本身的引數按照順序作為原函式的引數來呼叫原函式。

bind 是返回對應函式，便於稍後呼叫；apply 、call 則是立即呼叫 。

bind 這些改變上下文的 API 了，對於這些函式來說，this 取決於第一個引數，如果第一個引數為空，那麼就是 window。

2、關於繫結

  1. 預設的 this 繫結, 就是說 在一個函式中使用了 this, 但是沒有為 this 繫結物件. 這種情況下, 非嚴格預設, this 就是全域性變數 Node 環境中的 global, 瀏覽器環境中的 window.
  2. 隱式繫結: 使用 obj.foo() 這樣的語法來呼叫函式的時候, 函式 foo 中的 this 繫結到 obj 物件.
  3. 顯示繫結: foo.call(obj, ...), foo.apply(obj,[...]), foo.bind(obj,...)
  4. 構造繫結: new foo() , 這種情況, 無論 foo 是否做了繫結, 都要建立一個新的物件, 然後 foo 中的 this 引用這個物件.

優先順序: 構造繫結>顯示繫結>隱式繫結>預設的 this 繫結

JavaScript重識bind、call、apply

3、硬繫結

bind只能被繫結一次；以第一次為準；

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 內部就是 包了一個apply；等到呼叫的時候再執行這個包含apply的函； 實際上，ES5 中內建的 Function.prototype.bind(..) 更加複雜。下面是 MDN 提供的一種bind(..) 實現：

if (!Function.prototype.bind) {
    Function.prototype.bind = function(oThis) {
        //一個函式去呼叫,也就是說bind，call，apply的this是個函式；
        //然後再去改變這個函式裡面的this；
        if (typeof this !== "function") {
         // 與 ECMAScript 5 最接近的
         // 內部 IsCallable 函式 
         throw new TypeError(
          "Function.prototype.bind - what is trying " +
         "to be bound is not callable"
         ); 
        }
        //這裡將初始化的引數快取起來；
        var aArgs = Array.prototype.slice.call( arguments, 1 ),
        // ftoBind 指向要bind的函式；
        fToBind = this,
        // 返回一個新函式
        fNOP = function(){}, 
        fBound = function(){
        //fToBind.apply 改變繫結this；
        // 執行的時候判斷，當前this等於fNOP並且傳入oThis,就設定成當前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內部機制

4、軟繫結

硬繫結這種方式可以把 this 強制繫結到指定的物件(除了使用 new 時)，防止函式呼叫應用預設繫結規則。問題在於，硬繫結會大大降低函式的靈活性，使用硬繫結之後就無法使用隱式繫結或者顯式繫結來修改 this。

if (!Function.prototype.softBind) {
    Function.prototype.softBind = function(obj) { 
        var fn = this; // 捕獲所有 curried 引數
        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;
    }; 
} 
複製程式碼

它會對指定的函 數進行封裝，首先檢查呼叫時的 this，如果 this 繫結到全域性物件或者 undefined，那就把 指定的預設物件 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 <---- 應用了軟繫結
複製程式碼

注意

如果你把 null 或者 undefined 作為 this 的繫結物件傳入 call、apply 或者 bind，這些值 在呼叫時會被忽略，實際應用的是 預設繫結規則:

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

// 使用 bind(..) 進行柯里化
var bar = foo.bind( null, 2 );
bar( 3 ); // a:2, b:3
複製程式碼

用 null 來忽略 this 繫結可能會有副作用。如果某個函式確實使用了 this(比如第三方庫中的一個函式)，那預設繫結規則會把 this 繫結到全域性物件(在瀏覽 器中這個物件是 window)，這將導致不可預計的後果(比如修改全域性物件)。

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

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

相關文章