筆記-你不知道的JS-this

leanote 發(fā)布于2019-08-23 17:56 / 2215人閱讀

摘要：綁定使用來(lái)調(diào)用函數(shù)，或者說(shuō)發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

1 this的概念

this 在任何情況下都不指向函數(shù)的詞法作用域。作用域“對(duì)象”無(wú)法通過(guò) JavaScript代碼訪問(wèn)，它存在于 JavaScript 引擎內(nèi)部。

this 是在運(yùn)行時(shí)進(jìn)行綁定的，并不是在編寫(xiě)時(shí)綁定，它的上下文取決于函數(shù)調(diào)用時(shí)的各種條件。this 的綁定和函數(shù)聲明的位置沒(méi)有任何關(guān)系，只取決于函數(shù)的調(diào)用方式。

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

2 this的綁定

函數(shù)的執(zhí)行過(guò)程中調(diào)用位置如何決定 this 的綁定對(duì)象，綁定規(guī)則：

1 默認(rèn)綁定

function foo(){
  console.log(a);
}
var a=2;
foo();

foo() 是直接使用不帶任何修飾的函數(shù)引用進(jìn)行調(diào)用的，因此只能使用默認(rèn)綁定，無(wú)法應(yīng)用其他規(guī)則。如果使用嚴(yán)格模式(strict mode)，那么全局對(duì)象將無(wú)法使用默認(rèn)綁定，因此 this 會(huì)綁定
到 undefined。

2 隱式綁定
調(diào)用位置是否有上下文對(duì)象，或者說(shuō)是否被某個(gè)對(duì)象擁有或者包含。當(dāng) foo() 被調(diào)用時(shí)，它的落腳點(diǎn)確實(shí)指向 obj 對(duì)象。當(dāng)函數(shù)引用有上下文對(duì)象時(shí)，隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的 this 綁定到這個(gè)上下文對(duì)象。因?yàn)檎{(diào)用 foo() 時(shí) this 被綁定到 obj，因此 this.a 和 obj.a 是一樣的。對(duì)象屬性引用鏈中只有最頂層或者說(shuō)最后一層會(huì)影響調(diào)用位置。

function fooo(){
  conosle.log(this.a);
}
var obj={
  a:2,
  foo:foo
};
var obj2={
  a:22,
  obj: obj
}
obj.foo();  // 2
obj2.obj.foo();  // 2

隱式丟失
雖然 bar 是 obj.foo 的一個(gè)引用，但是實(shí)際上，它引用的是 foo 函數(shù)本身，因此此時(shí)的bar() 其實(shí)是一個(gè)不帶任何修飾的函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定。

當(dāng)函數(shù)被作為參數(shù)傳遞時(shí)（如：回調(diào)函數(shù)），會(huì)丟失this，因?yàn)閰?shù)傳遞其實(shí)就是一種隱式賦值

function foo() { 
  console.log( this.a );
}
var obj = { 
  a: 2,
  foo: foo
};
var bar = obj.foo; // 函數(shù)別名!
var a = "oops, global"; // a 是全局對(duì)象的屬性 
bar(); // "oops, global"

3 顯式綁定
JavaScript 提供的絕大多數(shù)函數(shù)以及你自己創(chuàng)建的所有函數(shù)都可以使用 call(..) 和 apply(..) 方法。這兩個(gè)方法是如何工作的呢?它們的第一個(gè)參數(shù)是一個(gè)對(duì)象，它們會(huì)把這個(gè)對(duì)象綁定到this，接著在調(diào)用函數(shù)時(shí)指定這個(gè) this。因?yàn)槟憧梢灾苯又付?this 的綁定對(duì)象，因此我們稱(chēng)之為顯式綁定。

function foo(){
  console.log(this.a);
}
var obj={a:2};
foo.call(obj);  // 2

如果你傳入了一個(gè)原始值(字符串類(lèi)型、布爾類(lèi)型或者數(shù)字類(lèi)型)來(lái)當(dāng)作 this 的綁定對(duì)象，這個(gè)原始值會(huì)被轉(zhuǎn)換成它的對(duì)象形式(也就是new String(..)、new Boolean(..)或者new Number(..))。這通常被稱(chēng)為“裝箱”。

4 new 綁定
使用 new 來(lái)調(diào)用函數(shù)，或者說(shuō)發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

創(chuàng)建(或者說(shuō)構(gòu)造)一個(gè)全新的對(duì)象。

這個(gè)新對(duì)象會(huì)被執(zhí)行[[原型]]連接。

這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this。

如果函數(shù)沒(méi)有返回其他對(duì)象，那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。

function foo(a) { 
  this.a = a;
}
var bar = new foo(2); 
console.log( bar.a ); // 2

使用 new 來(lái)調(diào)用 foo(..) 時(shí)，我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到 foo(..) 調(diào)用中的 this上。new 是最后一種可以影響函數(shù)調(diào)用時(shí) this 綁定行為的方法，我們稱(chēng)之為 new 綁定。

3 判斷this綁定

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

那么什么情況下你會(huì)傳入 null 呢?一種非常常見(jiàn)的做法是使用 apply(..) 來(lái)“展開(kāi)”一個(gè)數(shù)組，并當(dāng)作參數(shù)傳入一個(gè)函數(shù)。類(lèi)似地，bind(..) 可以對(duì)參數(shù)進(jìn)行柯里化(預(yù)先設(shè)置一些參數(shù))，這種方法有時(shí)非常有用:

function foo(a,b) {
console.log( "a:" + a + ", b:" + b );
}
// 把數(shù)組“展開(kāi)”成參數(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

軟綁定會(huì)對(duì)指定的函數(shù)進(jìn)行封裝，首先檢查調(diào)用時(shí)的 this，如果 this 綁定到全局對(duì)象或者 undefined，那就把指定的默認(rèn)對(duì)象 obj 綁定到 this，否則不會(huì)修改 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; };
}

4 箭頭函數(shù)

箭頭函數(shù)并不是使用 function 關(guān)鍵字定義的，而是使用被稱(chēng)為“胖箭頭”的操作符 => 定義的。箭頭函數(shù)不使用 this 的四種標(biāo)準(zhǔn)規(guī)則，而是根據(jù)外層(函數(shù)或者全局)作用域來(lái)決定 this。

function foo() {
// 返回一個(gè)箭頭函數(shù) 
  return (a) => {
//this 繼承自 foo()
  console.log( this.a ); };
}
var obj1 = { a:2};
var obj2 = { a:3};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是 3 !

foo() 內(nèi)部創(chuàng)建的箭頭函數(shù)會(huì)捕獲調(diào)用時(shí) foo() 的 this。由于 foo() 的 this 綁定到 obj1，bar(引用箭頭函數(shù))的 this 也會(huì)綁定到 obj1，箭頭函數(shù)的綁定無(wú)法被修改。(new 也不行!)