【前端工程師手冊】JavaScript之this的筆記

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

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

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

誤解

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

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

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

this到底是什么

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

this的綁定規(guī)則

默認綁定
舉個栗子：

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

當調(diào)用 foo() 時，this.a 被解析成了全局變量 a。為什么?因為在本例中，函數(shù)調(diào)用時應(yīng)用了 this 的默認綁定，因此 this 指向全局對象。
那么我們怎么知道這里應(yīng)用了默認綁定呢?可以通過分析調(diào)用位置來看看 foo() 是如何調(diào) 用的。在代碼中，foo() 是直接使用不帶任何修飾的函數(shù)引用進行調(diào)用的，因此只能使用默認綁定，無法應(yīng)用其他規(guī)則。
但是此時如果使用了嚴格模式(strict mode)，那么全局對象將無法使用默認綁定，因此 this 會綁定到 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)用位置會使用 obj 上下文來引用函數(shù)，因此你可以說函數(shù)被調(diào)用時 obj 對象“擁有”或者“包含”它。
當 foo() 被調(diào)用時，它的落腳點確實指向 obj 對象。當函數(shù)引用有上下文對象時，隱式綁定規(guī)則會把函數(shù)調(diào)用中的 this 綁定到這個上下文對象。因為調(diào) 用 foo() 時 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 是全局對象的屬性
   bar(); // "oops, global"

顯式綁定
一個小栗子：
call和apply

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

第一個參數(shù)是一個對象，它們會把這個對象綁定到 this，接著在調(diào)用函數(shù)時指定這個 this。因為你可以直接指定 this 的綁定對象，因此我們稱之為顯式綁定。
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(..) 會返回一個硬編碼的新函數(shù)，它會把參數(shù)設(shè)置為 this 的上下文并調(diào)用原始函數(shù)

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

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

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

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

如果函數(shù)沒有返回其他對象，那么new表達式中的函數(shù)調(diào)用會自動返回這個新對象。
例如：

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

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

首先，默認綁定的優(yōu)先級是四條規(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)先級

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)建的對象。var bar = new foo()

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/95274.html

發(fā)表評論

登陸后可評論

0條評論

roland_reed

男|高級講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

【前端工程師手冊】JavaScript之this的筆記

相關(guān)文章

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

**【前端工程師手冊】JavaScript之原型**

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

7月份前端資源分享

前端知識點整理

發(fā)表評論

0條評論

roland_reed

男|高級講師

TA的文章

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

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

GridManager 隱藏列

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

前端開發(fā)面試題

Image Load Error Handler

NAT穿越下的STUN,TURN和ICE

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

最新活動

資訊專欄INFORMATION COLUMN

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

【前端工程師手冊】JavaScript之this的筆記

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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