js中綁定this的幾種方法及簡(jiǎn)單比較

JavaScript（以下簡(jiǎn)稱js）是一門(mén)動(dòng)態(tài)語(yǔ)言，與傳統(tǒng)的c，c++最大的區(qū)別就是js是在運(yùn)行時(shí)動(dòng)態(tài)檢測(cè)值的類(lèi)型和變化。這一點(diǎn)有很大的好處，比如可以進(jìn)行隱式類(lèi)型轉(zhuǎn)換而不報(bào)錯(cuò)，書(shū)寫(xiě)更加靈活。當(dāng)然也會(huì)造成很多問(wèn)題。this是js中的一個(gè)關(guān)鍵字，它代表當(dāng)前作用域的上下文環(huán)境，而且隨著上下文的改變而動(dòng)態(tài)變化。

為什么需要綁定this

this代指當(dāng)前的上下文環(huán)境，在不經(jīng)意間容易改變：

var info = "This is global info";
var obj = {
    info: 'This is local info',
    getInfo: getInfo
}
function getInfo() {
    console.log(this.info);
}
obj.getInfo()    //This is local info

getInfo()    //This is global info 當(dāng)前上下文環(huán)境被修改了

在上面的例子中，我們?cè)趯?duì)象內(nèi)部創(chuàng)建一個(gè)屬性getInfo，對(duì)全局作用域下的getInfo進(jìn)行引用，而它的作用是打印當(dāng)前上下文中info的值，當(dāng)我們使用obj.getInfo進(jìn)行調(diào)用時(shí)，它會(huì)打印出對(duì)象內(nèi)部的info的值，此時(shí)this指向該對(duì)象。而當(dāng)我們使用全局的函數(shù)時(shí)，它會(huì)打印全局環(huán)境下的info變量的值，此時(shí)this指向全局對(duì)象。

這個(gè)例子告訴我們：

  1. 同一個(gè)函數(shù)，調(diào)用的方式不同，this的指向就會(huì)不同，結(jié)果就會(huì)不同。
  2. 對(duì)象內(nèi)部的屬性的值為引用類(lèi)型時(shí)，this的指向不會(huì)一直綁定在原對(duì)象上。

其次，還有不經(jīng)意間this丟失的情況：

var info = "This is global info";
var obj = {
    info: 'This is local info',
    getInfo: function getInfo() {
        console.log(this.info);

        var getInfo2 = function getInfo2() {
            console.log(this.info);
        }
        getInfo2();
    }
}
obj.getInfo();

//This is local info
//This is global info

上面的例子中，對(duì)象obj中定義了一個(gè)getInfo方法，方法內(nèi)定義了一個(gè)新的函數(shù)，也希望拿到最外層的該對(duì)象的info屬性的值，但是事與愿違，函數(shù)內(nèi)函數(shù)的this被錯(cuò)誤的指向了window全局對(duì)象上面，這就導(dǎo)致了錯(cuò)誤。

解決的方法也很簡(jiǎn)單，在最外層定義一個(gè)變量，存儲(chǔ)當(dāng)前詞法作用域內(nèi)的this指向的位置，根據(jù)變量作用域的關(guān)系，之后的函數(shù)內(nèi)部還能訪問(wèn)這個(gè)變量，從而得到上層函數(shù)內(nèi)部this的真正指向。

var info = "This is global info";
var obj = {
    info: 'This is local info',
    getInfo: function getInfo() {
        console.log(this.info);

        var self = this;          //將外層this保存到變量中
        var getInfo2 = function getInfo2() {
            console.log(self.info);    //指向外層變量代表的this
        }
        getInfo2();
    }
}
obj.getInfo();

//This is local info
//This is local info

然而這樣也會(huì)有一些問(wèn)題，上面的self變量等于重新引用了obj對(duì)象，這樣的話可能會(huì)在有些時(shí)候不經(jīng)意間修改了整個(gè)對(duì)象，而且當(dāng)需要取得多個(gè)環(huán)境下的this指向時(shí)，就需要聲明多個(gè)變量，不利于管理。

有一些方法，可以在不聲明類(lèi)似于self這種變量的條件下，綁定當(dāng)前環(huán)境下的上下文，確保編程內(nèi)容的安全。

如何綁定this

1. call, apply

call和apply是定義在Function.prototype上的兩個(gè)函數(shù)，他們的作用就是修正函數(shù)執(zhí)行的上下文，也就是this的指向問(wèn)題。

以call為例，上述anotherFun想要輸出local thing就要這樣修改：

...
var anotherFun = obj.getInfo;
anotherFun.call(obj)    //This is local info

函數(shù)調(diào)用的參數(shù)：

  • Function.prototype.call(context [, argument1, argument2 ])
  • Function.prototype.apply(context [, [ arguments ] ])

從這里就可以看到，call和apply的第一參數(shù)是必須的，接受一個(gè)重新修正的上下文，第二個(gè)參數(shù)都是可選的，他們兩個(gè)的區(qū)別在于，call從第二個(gè)參數(shù)開(kāi)始，接受傳入調(diào)用函數(shù)的值是一個(gè)一個(gè)單獨(dú)出現(xiàn)的，而apply是接受一個(gè)數(shù)組傳入。

function add(num1, num2, num3) {
  return num1 + num2 + num3;
}
add.call(null, 10, 20, 30);    //60
add.apply(null, [10, 20, 30]);    //60

當(dāng)接受的context為undefined或null時(shí)，會(huì)自動(dòng)修正為全局對(duì)象，上述例子中為window

2. 使用Function.prototype.bind進(jìn)行綁定

ES5中在Function.prototype新增了bind方法，它接受一個(gè)需要綁定的上下文對(duì)象，并返回一個(gè)調(diào)用的函數(shù)的副本，同樣的，它也可以在后面追加參數(shù)，實(shí)現(xiàn)函數(shù)的柯里化。

  • Function.prototype.bind(context[, argument1, argument2])
//函數(shù)柯里化部分
function add(num1 ,num2) {
    return num1 + num2;
}
var anotherFun = window.add.bind(window, 10);
anotherFun(20);    //30

同時(shí)，他返回一個(gè)函數(shù)的副本，并將函數(shù)永遠(yuǎn)的綁定在傳入的上下文中。

...
var anotherFun = obj.getInfo.bind(obj)
anotherFun();    //This is local info
polyfill

polyfill是一種為了向下兼容的解決方案，在不支持ES5的老舊瀏覽器上，如何使用bind方法呢，就得需要使用舊的方法重寫(xiě)一個(gè)bind方法。

if (!Function.prototype.bind) {
  Function.prototype.bind = function (obj) {
  var self = this;
   return function () {
      self.call(obj);
   }
  }
}

上面的寫(xiě)法實(shí)現(xiàn)了返回一個(gè)函數(shù)，并且將上下文修正為傳入的參數(shù)，但是沒(méi)有實(shí)現(xiàn)柯里化部分。

...
Function.prototype.bind = function(obj) {
  var args = Array.prototype.slice.call(arguments, 1);    
  //記錄下所有第一次傳入的參數(shù)

  var self = this;
  return function () {
    self.apply(obj, args.concat(Array.prototype.slice.call(arguments)));
  }
}

當(dāng)使用bind進(jìn)行綁定之后，即不能再通過(guò)call，apply進(jìn)行修正this指向，所以bind綁定又稱為硬綁定。

3. 使用new關(guān)鍵字進(jìn)行綁定

在js中，函數(shù)有兩種調(diào)用方式，一種是直接進(jìn)行調(diào)用，一種是通過(guò)new關(guān)鍵字進(jìn)行構(gòu)造調(diào)用。

function fun(){console.log("function called")}
//直接調(diào)用
fun()    //function called
//構(gòu)造調(diào)用
var obj = new fun()    //function called

那普通的調(diào)用和使用new關(guān)鍵字的構(gòu)造調(diào)用之間，又有哪些區(qū)別呢？

準(zhǔn)確的來(lái)說(shuō)，就是new關(guān)鍵字只是在調(diào)用函數(shù)的基礎(chǔ)上，多增加了幾個(gè)步驟，其中就包括了修正this指針到return回去的對(duì)象上。

var a = 5;
function Fun() {
  this.a = 10;
}
var obj = new Fun();
obj.a    //10

幾種綁定方式的優(yōu)先級(jí)比較

以下面這個(gè)例子來(lái)進(jìn)行幾種綁定狀態(tài)的優(yōu)先級(jí)權(quán)重的比較

var obj1 = {
  info: "this is obj1",
  getInfo: () => console.log(this.info)
}

var obj2 = {
  info: "this is obj2",
  getInfo: () => console.log(this.info)
}
1. call,apply和默認(rèn)指向比較

首先很顯然，根據(jù)使用頻率來(lái)想，使用call和apply會(huì)比直接調(diào)用的優(yōu)先級(jí)更高。

obj1.getInfo()    //this is obj1
obj2.getInfo()    //this is obj2
obj1.getInfo.call(obj2)    //this is obj2
obj2.getInfo.call(obj1)    //this is obj1

使用call和apply相比于使用new呢？

這個(gè)時(shí)候就會(huì)出現(xiàn)問(wèn)題了，因?yàn)槲覀儧](méi)辦法運(yùn)行類(lèi)似 new function.call(something)這樣的代碼。所以，我們通過(guò)bind方法返回一個(gè)新的函數(shù)，再通過(guò)new判斷優(yōu)先級(jí)。

var obj = {}
function foo(num){
  this.num = num;
}

var setNum = foo.bind(obj);
setNum(10);
obj.num    //10

var obj2 = new setNum(20);
obj.num    //10
obj2.num    //20

通過(guò)這個(gè)例子我們可以看出來(lái)，使用new進(jìn)行構(gòu)造調(diào)用時(shí)，會(huì)返回一個(gè)新的對(duì)象，并將this修正到這個(gè)對(duì)象上，但是它并不會(huì)改變之前的對(duì)象內(nèi)容。

那么問(wèn)題來(lái)了，上面我們寫(xiě)的bind的polyfill明顯不具備這樣的能力。而在MDN上有一個(gè)bind的polyfill方法，它的方法如下：

if (!Function.prototype.bind) { 
  Function.prototype.bind = function (oThis) { 
    if (typeof this !== "function") { 
       throw new TypeError("Function.prototype.bind - 
       what is trying to be bound is not callable"); 
    }
   var aArgs = Array.prototype.slice.call(arguments, 1),
       fToBind = this, 
       fNOP = function () {}, 
       fBound = function () { 
          return fToBind.apply(this instanceof fNOP ? 
                               this : oThis || this,   
                 aArgs.concat(Array.prototype.slice.call(arguments))); 
       }; 
      fNOP.prototype = this.prototype; 
      fBound.prototype = new fNOP(); 
      return fBound; 
  };
}

上面的polyfill首先判斷需要綁定的對(duì)象是否為函數(shù)，防止使用Function.prototype.bind.call(something)時(shí)，something不是一個(gè)函數(shù)造成未知錯(cuò)誤。之后讓需要返回的fBound函數(shù)繼承自this，返回fBound。

特殊情況

當(dāng)然，在某些情況下，this指針指向也存在一些意外。

箭頭函數(shù)

ES6中新增了一種定義函數(shù)方式，使用"=>"進(jìn)行函數(shù)的定義，在它的內(nèi)部，this的指針不會(huì)改變，永遠(yuǎn)指向最外層的詞法作用域。

var obj = {
  num: 1,
  getNum: function () {
    return function () {
      //this丟失
      console.log(this.num);    
      //此處的this指向window
    }
  }
}
obj.getNum()();    //undefined

var obj2 = {
  num: 2,
  getNum: function () {
    return () => console.log(this.num);    
    //箭頭函數(shù)內(nèi)部綁定外部getNum的this，外部this指向調(diào)用的對(duì)象
  }
}
obj2.getNum()();    //2
軟綁定

上面提供的bind方法可以通過(guò)強(qiáng)制修正this指向，并且再不能通過(guò)call，apply進(jìn)行修正。如果我們希望即能有bind效果，但是也能通過(guò)call和apply對(duì)函數(shù)進(jìn)行二次修正，這個(gè)時(shí)候就需要我們重寫(xiě)一個(gè)建立在Function.prototype上的方法，我們給它起名為"軟綁定"。

if (!Function.prototype.softBind) {
  Function.prototype.softbind = function (obj) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
      return self.apply((!this || this === (window || global)) ? 
                        obj : this, 
                        args.concat(Array.prototype.slice.call(arguments)));
    }
  }
}
bind，call的妙用

在平日里我們需要將偽數(shù)組元素變?yōu)檎５臄?shù)組元素時(shí)，往往通過(guò)Array.prototype.slice方法，正如上面的實(shí)例那樣。將arguments這個(gè)對(duì)象變?yōu)檎嬲臄?shù)組對(duì)象，使用 Array.prototype.slice.call(arguments)進(jìn)行轉(zhuǎn)化.。但是，每次使用這個(gè)方法太長(zhǎng)而且繁瑣。所以有時(shí)候我們就會(huì)這樣寫(xiě)：

var slice = Array.prototype.slice;
slice(arguments);
//error

同樣的問(wèn)題還出現(xiàn)在：

var qsa = document.querySelectorAll;
qsa(something);
//error

上面的問(wèn)題就出現(xiàn)在，內(nèi)置的slice和querySelectorAll方法，內(nèi)部使用了this，當(dāng)我們簡(jiǎn)單引用時(shí)，this在運(yùn)行時(shí)成為了全局環(huán)境window，當(dāng)然會(huì)造成錯(cuò)誤。我們只需要簡(jiǎn)單的使用bind，就能創(chuàng)建一個(gè)函數(shù)副本。

var qsa = document.querySelectorAll.bind(document);
qsa(something);

同樣的，使用因?yàn)閏all和apply也是一個(gè)函數(shù)，所以也可以在它們上面調(diào)用bind方法。從而使返回的函數(shù)的副本本身就帶有修正指針的功能。

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice(arguments);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容