【前端工程師手冊(cè)】JavaScript之this的筆記

roland_reed 發(fā)布于2019-08-22 17:32 / 1892人閱讀

摘要：函數(shù)別名是全局對(duì)象的屬性顯式綁定一個(gè)小栗子和第一個(gè)參數(shù)是一個(gè)對(duì)象，它們會(huì)把這個(gè)對(duì)象綁定到，接著在調(diào)用函數(shù)時(shí)指定這個(gè)。

今天總結(jié)一下this。

誤解

熟悉Java或者其他語言的同學(xué)看到this會(huì)想當(dāng)然的認(rèn)為this指向函數(shù)本身，然而在JavaScript中并不是這樣子。

function func(){
    console.log(this.index)
}
func.index  = 123
func() // undefined

結(jié)果很顯然，this并不是指向函數(shù)自身。

this到底是什么

那么this到底是什么呢？
當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)，會(huì)創(chuàng)建一個(gè)活動(dòng)記錄(有時(shí)候也稱為執(zhí)行上下文)。這個(gè)記錄會(huì)包含函數(shù)在哪里被調(diào)用(調(diào)用棧)、函數(shù)的調(diào)用方法、傳入的參數(shù)等信息。this 就是記錄的其中一個(gè)屬性，會(huì)在函數(shù)執(zhí)行的過程中用到。
長(zhǎng)話短說：this就是函數(shù)執(zhí)行上下文的一個(gè)屬性
this 實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里被調(diào)用。

this的綁定規(guī)則

默認(rèn)綁定
舉個(gè)栗子：

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

當(dāng)調(diào)用 foo() 時(shí)，this.a 被解析成了全局變量 a。為什么?因?yàn)樵诒纠?，函?shù)調(diào)用時(shí)應(yīng)用了 this 的默認(rèn)綁定，因此 this 指向全局對(duì)象。
那么我們?cè)趺粗肋@里應(yīng)用了默認(rèn)綁定呢?可以通過分析調(diào)用位置來看看 foo() 是如何調(diào) 用的。在代碼中，foo() 是直接使用不帶任何修飾的函數(shù)引用進(jìn)行調(diào)用的，因此只能使用默認(rèn)綁定，無法應(yīng)用其他規(guī)則。
但是此時(shí)如果使用了嚴(yán)格模式(strict mode)，那么全局對(duì)象將無法使用默認(rèn)綁定，因此 this 會(huì)綁定到 undefined：

   function foo() { 
       "use strict";
        console.log( this.a );
    }

   var a = 2;
   foo(); // TypeError: this is undefined

隱式綁定

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

調(diào)用位置會(huì)使用 obj 上下文來引用函數(shù)，因此你可以說函數(shù)被調(diào)用時(shí) obj 對(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 是一樣的。
這種綁定方式的反面即是this的隱形丟失。

   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"

顯式綁定
一個(gè)小栗子：
call和apply

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

第一個(gè)參數(shù)是一個(gè)對(duì)象，它們會(huì)把這個(gè)對(duì)象綁定到 this，接著在調(diào)用函數(shù)時(shí)指定這個(gè) this。因?yàn)槟憧梢灾苯又付?this 的綁定對(duì)象，因此我們稱之為顯式綁定。
bind

   function foo(something) { 
       console.log( this.a, something ); 
       return this.a + something;
   }
   function bind(fn, obj) {
       return function() {
           return fn.apply( obj, arguments );
       };
   }
   var obj = { 
       a:2
   };
   var bar = bind( foo, obj );
   var b = bar( 3 ); // 2 3
   console.log( b ); // 5

由于硬綁定是一種非常常用的模式，所以在 ES5 中提供了內(nèi)置的方法 Function.prototype.bind
bind(..) 會(huì)返回一個(gè)硬編碼的新函數(shù)，它會(huì)把參數(shù)設(shè)置為 this 的上下文并調(diào)用原始函數(shù)

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

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

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

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

如果函數(shù)沒有返回其他對(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

四種綁定規(guī)則的優(yōu)先級(jí)

首先，默認(rèn)綁定的優(yōu)先級(jí)是四條規(guī)則中最低的

function foo() { 
    console.log( this.a );
}
var obj1 = { 
    a: 2,
    foo: foo 
};
var obj2 = { 
    a: 3,
    foo: foo 
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

結(jié)論：顯式綁定 > 隱式綁定

function foo(something) { 
    this.a = something;
}
var obj1 = { 
    foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3

var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2 
console.log( bar.a ); // 4

結(jié)論：new 綁定 > 隱式綁定優(yōu)先級(jí)

function foo(something) { 
    this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 ); 
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2 
console.log( baz.a ); // 3

結(jié)論：new綁定 > es原生bind綁定
總結(jié)判斷this的方法：

函數(shù)是否在new中調(diào)用(new綁定)?如果是的話this綁定的是新創(chuàng)建的對(duì)象。var bar = new foo()

函數(shù)是否通過call、apply(顯式綁定)或者硬綁定調(diào)用?如果是的話，this綁定的是指定的對(duì)象。var bar = foo.call(obj2)

函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用(隱式綁定)?如果是的話，this 綁定的是那個(gè)上下文對(duì)象。var bar = obj1.foo()

如果都不是的話，使用默認(rèn)綁定。如果在嚴(yán)格模式下，就綁定到undefined，否則綁定到全局對(duì)象。var bar = foo()

參考資料：
你不知道的JavaScript-上卷

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95274.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

roland_reed

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

CSS選擇器之:nth-child(n)與:nth-last-of-type(number)

閱讀 1092·2019-08-30 12:57
前端每日實(shí)戰(zhàn) 169# 視頻演示如何制作“數(shù)略詞”交互動(dòng)畫（內(nèi)含2個(gè)視頻）

閱讀 2199·2019-08-30 11:11
GridManager 隱藏列

閱讀 2201·2019-08-29 15:20
【Angular】Angular 2+ 樣式綁定解析

閱讀 1895·2019-08-29 14:12
前端開發(fā)面試題

閱讀 3293·2019-08-28 17:51
Image Load Error Handler

閱讀 2400·2019-08-26 13:23
NAT穿越下的STUN,TURN和ICE

閱讀 838·2019-08-26 10:34
vue組件：canvas實(shí)現(xiàn)圖片涂鴉功能

閱讀 3897·2019-08-23 12:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

【前端工程師手冊(cè)】JavaScript之this的筆記

相關(guān)文章

**【前端工程師手冊(cè)】this拾遺之關(guān)于箭頭函數(shù)的種種**

**【前端工程師手冊(cè)】JavaScript之原型**

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

7月份前端資源分享

前端知識(shí)點(diǎn)整理

發(fā)表評(píng)論

0條評(píng)論

roland_reed

男|高級(jí)講師

TA的文章

CSS選擇器之:nth-child(n)與:nth-last-of-type(number)

前端每日實(shí)戰(zhàn) 169# 視頻演示如何制作“數(shù)略詞”交互動(dòng)畫（內(nèi)含2個(gè)視頻）

GridManager 隱藏列

【Angular】Angular 2+ 樣式綁定解析

前端開發(fā)面試題

Image Load Error Handler

NAT穿越下的STUN,TURN和ICE

vue組件：canvas實(shí)現(xiàn)圖片涂鴉功能

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

【前端工程師手冊(cè)】JavaScript之this的筆記

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！