前言

如果要問javascript中哪兩個知識點(diǎn)容易混淆，作用域查詢和this機(jī)制絕對名列前茅。所以這篇文章開始將介紹javascript中this的四個綁定規(guī)則，下面來一起看看吧。

綁定規(guī)則

1. 默認(rèn)綁定

獨(dú)立函數(shù)調(diào)用時，this 指向全局對象，如果使用嚴(yán)格模式，那么全局對象無法使用默認(rèn)綁定， this綁定至 undefined。

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

嚴(yán)格模式時：

function foo() {
 "use strict";
 console,log(this.a);
}
var a = 2;
foo(); // TypeError: this is undefined

2. 隱式綁定

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

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

對象屬性引用鏈中只有最頂層或者說最后一層會影響調(diào)用位置：

obj1.obj2.foo(); // foo 中的 this 與 obj2 綁定

2.1 隱式丟失

隱式丟失指的是函數(shù)中的 this 丟失綁定對象，即它會應(yīng)用第 1 條的默認(rèn)綁定規(guī)則，從而將 this 綁定到全局對象或者 undefined 上，取決于是否在嚴(yán)格模式下運(yùn)行。以下情況會發(fā)生隱式丟失：

綁定至上下文對象的函數(shù)被賦值給一個新的函數(shù)，然后調(diào)用這個新的函數(shù)時：

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2,
 foo: foo
};
var bar = obj.foo; //函數(shù)別名
var a = "這是全局變量喔";
bar(); // "這是全局變量喔"

傳入回調(diào)函數(shù)時：

function foo() {
 console.log( this.a);
}
function doFoo(fn) {
 fn(); // <-- 調(diào)用位置
}
var obj = {
 a: 2,
 foo: foo
};
var a = "這是全局變量喔";
doFoo( obj.foo ); // "這是全局變量喔"

其實(shí)這就是第一種情況的變種，實(shí)際上參數(shù)傳遞就是一種隱式賦值。除了開發(fā)人員自定義的函數(shù)，在將函數(shù)傳入語言內(nèi)置的函數(shù)比如 setTimeout 時，同樣會發(fā)生隱式丟失的情況。

3. 顯式綁定

顯式綁定的核心是 JavaScript 內(nèi)置的 call(..) 和 apply(..) 方法，這兩個方法在 JavaScript 提供的絕大多數(shù)函數(shù)以及開發(fā)者自己創(chuàng)建的所有函數(shù)上都可以使用。

call(..) 和 apply(..)的第一個參數(shù)是一個對象（二者區(qū)別在后面?zhèn)魅氲膮?shù)形式，這里不是重點(diǎn)，不討論），他們會將 this 綁定到這個對象上。因?yàn)槟憧梢灾苯又付?this 綁定的對象，所以這條規(guī)則被稱為顯式綁定。

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

如果 call 或者 apply 傳入的第一個參數(shù)是原始值（字符串類型、布爾類型或者數(shù)字類型），那么該原始值會被轉(zhuǎn)換成它的對象形式（new String() 、new Boolean() 或 new Number() ），俗稱“裝箱”。

顯式綁定仍然無法解決丟失綁定問題。

3.1 硬綁定

作為顯式綁定的一個變種，硬綁定可以解決丟失綁定問題。

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2
};
var bar = function() {
 foo.call(obj);
};
bar(); // 2
setTimeout(bar, 100); // 2
bar.call(window); //無效，硬綁定的 bar 不會再修改它的 this

在一個新的函數(shù)內(nèi)部強(qiáng)制綁定 this 到某個對象上，無論之后如何調(diào)用這個新的函數(shù)，其 this 都不會丟失。

典型應(yīng)用場景為創(chuàng)建一個包裹函數(shù)，傳入所有的參數(shù)并返回接收到的所有值：

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

或者將綁定的對象改為可配置，這樣就成了一個輔助綁定函數(shù)：

...
function bind(fn, obj){
 return function(){
 return fn.apply(obj, arguments);
 };
}
...

由于硬綁定實(shí)在太過常見，所以 ES5 提供了內(nèi)置的 Function.prototype.bind，其用法如下：

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

3.2 API 調(diào)用的“上下文”

JavaScript 自身以及許多第三方庫的函數(shù)都提供了一個可選的參數(shù)，通常被稱為“上下文”，其作用和 bind(..) 一樣，確?；卣{(diào)函數(shù)使用指定的 this。

function foo(el) {
 console.log( el, this.id);
}
var obj = {
 id: "awsome"
};
//調(diào)用 foo(..) 時把 this 綁定到 obj
[1,2,3].forEach(foo, obj);
// 1 awsome 2 awsome 3 awsome

實(shí)際上這些函數(shù)背后還是調(diào)用了 call() 或者 apply() ，只不過這樣開發(fā)者需要寫的代碼就少了一些。

4. new 綁定

使用 new 來調(diào)用函數(shù)時，會自動執(zhí)行下面的操作：

     1、創(chuàng)建一個全新的對象

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

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

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

舉例如下：

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

使用 new 來調(diào)用 foo(..) 時，會構(gòu)造一個新對象并把它綁定到 foo(..) 調(diào)用中的 this 上。

優(yōu)先級

具體推斷細(xì)節(jié)不再表述，以上四種綁定規(guī)則的使用先后推斷如下：

1、函數(shù)是否在 new 中調(diào)用（new 綁定）？如果是的話 this 綁定的是新創(chuàng)建的對象。

var bar = new foo();

2、函數(shù)是否通過 call、apply （顯示綁定）或者硬綁定？如果是的話，this 綁定的是指定的對象。

var bar = foo.call(obj2);

3、函數(shù)是否在某個上下文對象中調(diào)用（隱式綁定）？如果是的話，this 綁定的是那個上下文對象。

var bar = obj1.foo();

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

var bar = foo();

綁定例外

如果把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind，那么這些值在調(diào)用時會被忽略，實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則。（書中推薦使用一個空對象來綁定 this）。

間接引用。這種情況容易在賦值時發(fā)生：

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() 實(shí)際上引用了 foo() ，如此，會應(yīng)用默認(rèn)綁定。

另外ES6 對改變 this 的混亂綁定作了相應(yīng)的努力，誕生了箭頭函數(shù)，其根據(jù)當(dāng)前詞法作用域來決定 this 而非上面的四條規(guī)則，具體來說，箭頭函數(shù)會繼承外層函數(shù)調(diào)用的 this 綁定（這其實(shí)和 ES6 之前代碼中的 self = this 是一個道理）。

總結(jié)

以上就是這篇文章的全部內(nèi)容，希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

最新評論