歡迎來(lái)我的博客閱讀：《加深對(duì) JavaScript This 的理解》
我相信你已經(jīng)看過(guò)很多關(guān)于 JavaScript 的 this 的談?wù)摿耸Ｇ纾热荒泓c(diǎn)進(jìn)來(lái)了，不妨繼續(xù)看下去浪感，看是否能幫你加深對(duì) this 的理解纲仍。
最近在看 《You Dont Know JS》 這本書，不得感嘆差导，就算用了 JS 很多年的老前端來(lái)看這本書被啼，我覺(jué)得還是會(huì)有不少的收獲帜消。
其中關(guān)于 this 的講解，更是加深了我對(duì) this 的理解浓体，故整理知識(shí)點(diǎn)券犁，再加上自身的理解，以自己的語(yǔ)言來(lái)描述汹碱。
對(duì)讀者來(lái)說(shuō)粘衬，算是二手知識(shí)，這本書是開源的咳促，可以到本書的 Github 項(xiàng)目地址學(xué)習(xí)一手的知識(shí)稚新。
首先有一句大家都明白的話，我還是要強(qiáng)調(diào)一遍：
「this 是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定跪腹，它指向什么完全取決于函數(shù)在哪里被調(diào)用褂删。」
這句話很重要冲茸，這是理解 this 原理的基礎(chǔ)屯阀。
而在講解 this 之前，先要理解一下作用域的相關(guān)概念轴术。
「詞法作用域」與「動(dòng)態(tài)作用域」
通常來(lái)說(shuō)难衰，作用域一共有兩種主要的工作模型。
- 詞法作用域
- 動(dòng)態(tài)作用域
詞法作用域是大多數(shù)編程語(yǔ)言所采用的模式逗栽，而動(dòng)態(tài)作用域仍有一些編程語(yǔ)言在用盖袭，例如 Bash 腳本。
而 JavaScript 就是采用的詞法作用域彼宠，也就是在編程階段鳄虱，作用域就已經(jīng)明確下來(lái)了。
思考下面代碼：
function foo(){
console.log(a); // 輸出 2
}
function bar(){
let a = 3;
foo();
}
let a = 2;
bar()
因?yàn)?JavaScript 所用的是詞法作用域凭峡，自然 foo() 聲明的階段拙已，就已經(jīng)確定了變量 a 的作用域了。
倘若摧冀，JavaScript 是采用的動(dòng)態(tài)作用域倍踪，foo() 中打印的將是 3
function foo(){
console.log(a); // 輸出 3 （不是 2）
}
function bar(){
let a = 3;
foo();
}
let a = 2;
bar()
而 JavaScript 的 this 機(jī)制跟動(dòng)態(tài)作用域很相似霉涨，是在運(yùn)行時(shí)在被調(diào)用的地方動(dòng)態(tài)綁定的。
this 的四種綁定規(guī)則
在 JavaScript 中惭适，影響 this 指向的綁定規(guī)則有四種：
- 默認(rèn)綁定
- 隱式綁定
- 顯式綁定
- new 綁定
默認(rèn)綁定
這是最直接的一種方式，就是不加任何的修飾符直接調(diào)用函數(shù)楼镐，如：
function foo() {
console.log(this.a) // 輸出 a
}
var a = 2; // 變量聲明到全局對(duì)象中
foo();
使用 var 聲明的變量 a癞志，被綁定到全局對(duì)象中，如果是瀏覽器框产，則是在 window 對(duì)象凄杯。
foo() 調(diào)用時(shí)，引用了默認(rèn)綁定秉宿，this 指向了全局對(duì)象戒突。
隱式綁定
這種情況會(huì)發(fā)生在調(diào)用位置存在「上下文對(duì)象」的情況，如：
function foo() {
console.log(this.a);
}
let obj1 = {
a: 1,
foo,
};
let obj2 = {
a: 2,
foo,
}
obj1.foo(); // 輸出 1
obj2.foo(); // 輸出 2
當(dāng)函數(shù)調(diào)用的時(shí)候描睦，擁有上下文對(duì)象的時(shí)候膊存，this 會(huì)被綁定到該上下文對(duì)象。
正如上面的代碼忱叭，
obj1.foo() 被調(diào)用時(shí)隔崎，this 綁定到了 obj1,
而 obj2.foo() 被調(diào)用時(shí)，this 綁定到了 obj2韵丑。
顯式綁定
這種就是使用 Function.prototype 中的三個(gè)方法 call(), apply(), bind() 了爵卒。
這三個(gè)函數(shù)，都可以改變函數(shù)的 this 指向到指定的對(duì)象撵彻，
不同之處在于钓株，call() 和 apply() 是立即執(zhí)行函數(shù)，并且接受的參數(shù)的形式不同：
call(this, arg1, arg2, ...)apply(this, [arg1, arg2, ...])
而 bind() 則是創(chuàng)建一個(gè)新的包裝函數(shù)陌僵，并且返回轴合，而不是立刻執(zhí)行。
bind(this, arg1, arg2, ...)
apply() 接收參數(shù)的形式碗短，有助于函數(shù)嵌套函數(shù)的時(shí)候值桩，把 arguments 變量傳遞到下一層函數(shù)中。
思考下面代碼：
function foo() {
console.log(this.a); // 輸出 1
bar.apply({a: 2}, arguments);
}
function bar(b) {
console.log(this.a + b); // 輸出 5
}
var a = 1;
foo(3);
上面代碼中豪椿， foo() 內(nèi)部的 this 遵循默認(rèn)綁定規(guī)則奔坟，綁定到全局變量中。
而 bar() 在調(diào)用的時(shí)候搭盾，調(diào)用了 apply() 函數(shù)咳秉，把 this 綁定到了一個(gè)新的對(duì)象中 {a: 2}，而且原封不動(dòng)的接收 foo() 接收的函數(shù)鸯隅。
new 綁定
最后一種澜建，則是使用 new 操作符會(huì)產(chǎn)生 this 的綁定向挖。
在理解 new 操作符對(duì) this 的影響，首先要理解 new 的原理炕舵。
在 JavaScript 中何之，new 操作符并不像其他面向?qū)ο蟮恼Z(yǔ)言一樣，而是一種模擬出來(lái)的機(jī)制咽筋。
在 JavaScript 中溶推，所有的函數(shù)都可以被 new 調(diào)用，這時(shí)候這個(gè)函數(shù)一般會(huì)被稱為「構(gòu)造函數(shù)」奸攻，實(shí)際上并不存在所謂「構(gòu)造函數(shù)」蒜危，更確切的理解應(yīng)該是對(duì)于函數(shù)的「構(gòu)造調(diào)用」。
使用 new 來(lái)調(diào)用函數(shù)睹耐，會(huì)自動(dòng)執(zhí)行下面操作：
- 創(chuàng)建一個(gè)全新的對(duì)象辐赞。
- 這個(gè)新對(duì)象會(huì)被執(zhí)行 [[Prototype]] 連接。
- 這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的 this硝训。
- 如果函數(shù)沒(méi)有返回其他對(duì)象响委，那么 new 表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。
所以如果 new 是一個(gè)函數(shù)的話窖梁，會(huì)是這樣子的：
function New(Constructor, ...args){
let obj = {}; // 創(chuàng)建一個(gè)新對(duì)象
Object.setPrototypeOf(obj, Constructor.prototype); // 連接新對(duì)象與函數(shù)的原型
return Constructor.apply(obj, args) || obj; // 執(zhí)行函數(shù)晃酒，改變 this 指向新的對(duì)象
}
function Foo(a){
this.a = a;
}
New(Foo, 1); // Foo { a: 1 }
所以，在使用 new 來(lái)調(diào)用函數(shù)時(shí)候窄绒，我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到函數(shù)調(diào)用中的 this 上贝次。
優(yōu)先級(jí)
如果一個(gè)位置發(fā)生了多條改變 this 的規(guī)則，那么優(yōu)先級(jí)是如何的呢彰导？
看幾段代碼：
// 顯式綁定 > 隱式綁定
function foo() {
console.log(this.a);
}
let obj1 = {
a: 2,
foo,
}
obj1.foo(); // 輸出 2
obj1.foo.call({a: 1}); // 輸出 1
這說(shuō)明「顯式綁定」的優(yōu)先級(jí)大于「隱式綁定」
// new 綁定 > 顯式綁定
function foo(a) {
this.a = a;
}
let obj1 = {};
let bar = foo.bind(obj1);
bar(2);
console.log(obj1); // 輸出 {a:2}
let obj2 = new bar(3);
console.log(obj1); // 輸出 {a:2}
console.log(obj2); // 輸出 foo { a: 3 }
這說(shuō)明「new 綁定」的優(yōu)先級(jí)大于「顯式綁定」
而「默認(rèn)綁定」蛔翅，毫無(wú)疑問(wèn)是優(yōu)先級(jí)最低的。
所以優(yōu)先級(jí)順序?yàn)椋?/p>
「new 綁定」 > 「顯式綁定」 > 「隱式綁定」 > 「默認(rèn)綁定位谋∩轿觯」
所以，this 到底是什么
this 并不是在編寫的時(shí)候綁定的掏父，而是在運(yùn)行時(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è)「執(zhí)行上下文」陶缺，這個(gè)上下文會(huì)包含函數(shù)在哪里被調(diào)用（調(diào)用棧）钾挟、函數(shù)的調(diào)用方式、傳入的參數(shù)等信息饱岸。this 就是這個(gè)記錄的一個(gè)屬性掺出，會(huì)在函數(shù)執(zhí)行的過(guò)程中用到徽千。
