快捷導(dǎo)航

JS中this的4種綁定規(guī)則詳解

更新時間：2020年02月04日 08:31:36 作者：Lmagic16

如果你學(xué)過面向?qū)ο缶幊蹋悄憧隙ㄖ栏墒裁从玫?，如果你沒有學(xué)過，那么暫時可以不用看這篇文章,this既不指向函數(shù)自身,也不指函數(shù)的詞法作用域，具體怎么使用JS中的this,JS中的this綁定規(guī)則又是什么？

JS中this是什么

理解this之前，先糾正一個觀點，this 既不指向函數(shù)自身，也不指函數(shù)的詞法作用域。

如果僅通過this的英文解釋，太容易產(chǎn)生誤導(dǎo)了。

它實際是在函數(shù)被調(diào)用時才發(fā)生的綁定，也就是說this具體指向什么，取決于你是怎么調(diào)用的函數(shù)。也就是說誰調(diào)用的this，this就指向誰

JS中this說明

ES6中的箭頭函數(shù)采用的是詞法作用域。

為什么要使用this：使API設(shè)計得更簡潔且易于復(fù)用。

this即不指向自身，也不指向函數(shù)的詞法作用域。

this的指向只取決于函數(shù)的調(diào)用方式

this綁定規(guī)則

new > 顯示綁定 > 隱式綁定 > 默認(rèn)綁定

默認(rèn)綁定

當(dāng)獨立函數(shù)調(diào)用時，不管是否在調(diào)用棧中，this都指向全局對象（瀏覽器中為window）

嚴(yán)格模式下，不能將全局對象用于默認(rèn)綁定。

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

隱式綁定

當(dāng)函數(shù)引用有上下文對象時，隱式綁定規(guī)則會把函數(shù)調(diào)用中的this綁定到這個上下文對象。

對象屬性引用鏈中只有最后一層在調(diào)用位置中起作用。

要求：對象內(nèi)部必須包含一個指向函數(shù)的屬性，該對象可通過這個屬性間接引用函數(shù)。

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

隱式丟失

function foo() {
  console.log( this.a );
}
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo; // 這里bar將引用foo函數(shù)本身，所以不帶有函數(shù)對象的上下文
var a = "oops, global"; // a是全局對象的屬性
bar(); // "oops, global"

和回調(diào)函數(shù)的情況下（參數(shù)傳遞時的隱式賦值）

function foo() {
  console.log( this.a );
}
function doFoo(fn) {
  // 參數(shù)傳遞時，相當(dāng)于fn = obj.foo，就和上個例子一樣了
  fn(); // <-- call-site!
}
var obj = {
  a: 2,
  foo: foo
};
var a = "oops, global"; // `a` also property on global object
doFoo( obj.foo ); // "oops, global"

顯式綁定

采用call()和apply()，通過傳入一個對象（若為基本類型，會被封裝函數(shù)轉(zhuǎn)為對象—裝箱），將this綁定到該對象。

硬綁定

function foo() {
  console.log( this.a );
}
var obj = {
  a: 2
};
var bar = function() {
  foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬綁定后bar無論怎么調(diào)用，都不會影響foo函數(shù)的this綁定
bar.call( window ); // 2

硬綁定的典型應(yīng)用是如下的包裹函數(shù)：

function foo(something) {
  console.log( this.a, something );
  return this.a + something;
}
var obj = {
  a: 2
};
var bar = function() {
  return foo.apply( obj, arguments ); // 將obj對象硬編碼進(jìn)去
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5

即將內(nèi)部函數(shù)用apply硬綁定到某個對象，無論怎么調(diào)用這個包裹函數(shù)，都不會影響內(nèi)部函數(shù)的this。

bind輔助函數(shù)如下：

function foo(something) {
  console.log( this.a, something );
  return this.a + something;
}
// simple `bind` helper
function bind(fn, obj) {
  return function() {
    return fn.apply( obj, arguments ); // 利用參數(shù)將obj傳入進(jìn)去
  };
}
var obj = {
  a: 2
};
var bar = bind( foo, obj ); // bind( foo, obj )會返回一個包裹函數(shù)
var b = bar( 3 ); // 2 3
console.log( b ); // 5

總結(jié)：上述包裹函數(shù)，想要包裹其他函數(shù)，只能一個一個重復(fù)寫，硬編碼的方式導(dǎo)致不能被重用，當(dāng)某種功能需要多次重復(fù)使用時，將其抽象出來，成為函數(shù)。

new綁定

任何函數(shù)都可能被用作構(gòu)造函數(shù)，當(dāng)函數(shù)被new操作符“構(gòu)造調(diào)用”時，會執(zhí)行下面操作：

1. 創(chuàng)建一個新對象（若該函數(shù)不是JS內(nèi)置的，則創(chuàng)建一個新的Object對象）；

2. 將this綁定到這個對象；

3. 執(zhí)行構(gòu)造函數(shù)中的代碼（為這個新對象添加屬性）；

4. 若函數(shù)沒有返回其他對象，則自動返回這個新對象；若函數(shù)有return返回的是非對象，則還是自動返回這個新對象，即覆蓋那個非對象。

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

補(bǔ)充說明

間接引用

function foo() {
  console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2，由于p.foo = o.foo的返回值是目標(biāo)函數(shù)的引用，所以調(diào)用位置是foo()，而不是p.foo()或o.foo()

箭頭函數(shù)：不使用這四個this規(guī)則，根據(jù)詞法作用域來決定this。

function foo() {
  // 返回一個箭頭函數(shù)
  return (a) => {
    // `this` here is lexically adopted from `foo()`
    console.log( this.a );
  };
}
var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
// foo()不是箭頭函數(shù)，他的this被綁定到obj1
var bar = foo.call( obj1 ); // foo.call( obj1 )返回箭頭函數(shù)，所以bar為箭頭函數(shù)
bar.call( obj2 ); // 2! 箭頭函數(shù)的this無法被修改，new也不行

如下為和箭頭函數(shù)一樣的模式：

function foo() {
  var self = this; // lexical capture of `this`
  setTimeout( function(){
    console.log( self.a );
  }, 100 );
}
var obj = {
  a: 2
};

更多關(guān)于JS中this對象的相關(guān)文章大家可以點擊下面的相關(guān)鏈接

您可能感興趣的文章: