資訊專欄INFORMATION COLUMN
摘要：使用來調(diào)用函數(shù)，會自動執(zhí)行下面操作創(chuàng)建一個全新的對象。所以如果是一個函數(shù)的話，會是這樣子的創(chuàng)建一個新對象連接新對象與函數(shù)的原型執(zhí)行函數(shù)，改變指向新的對象所以，在使用來調(diào)用函數(shù)時候，我們會構(gòu)造一個新對象并把它綁定到函數(shù)調(diào)用中的上。
歡迎來我的博客閱讀：《加深對 JavaScript This 的理解》
我相信你已經(jīng)看過很多關(guān)于 JavaScript 的 this 的談?wù)摿?，既然你點進來了，不妨繼續(xù)看下去，看是否能幫你加深對 this 的理解。
最近在看 《You Dont Know JS》 這本書，不得感嘆，就算用了 JS 很多年的老前端來看這本書，我覺得還是會有不少的收獲。
其中關(guān)于 this 的講解，更是加深了我對 this 的理解，故整理知識點，再加上自身的理解，以自己的語言來描述。
對讀者來說，算是二手知識，這本書是開源的，可以到本書的 Github 項目地址學(xué)習(xí)一手的知識。
首先有一句大家都明白的話，我還是要強調(diào)一遍：
「this 是在函數(shù)被調(diào)用時發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里被調(diào)用?！?/strong>
這句話很重要，這是理解 this 原理的基礎(chǔ)。
而在講解 this 之前，先要理解一下作用域的相關(guān)概念。
通常來說，作用域一共有兩種主要的工作模型。
詞法作用域
動態(tài)作用域
詞法作用域是大多數(shù)編程語言所采用的模式，而動態(tài)作用域仍有一些編程語言在用，例如 Bash 腳本。
而 JavaScript 就是采用的詞法作用域，也就是在編程階段，作用域就已經(jīng)明確下來了。
思考下面代碼：
function foo(){
console.log(a); // 輸出 2
}
function bar(){
let a = 3;
foo();
}
let a = 2;
bar()
因為 JavaScript 所用的是詞法作用域，自然 foo() 聲明的階段，就已經(jīng)確定了變量 a 的作用域了。
倘若，JavaScript 是采用的動態(tài)作用域，foo() 中打印的將是 3
function foo(){
console.log(a); // 輸出 3 （不是 2）
}
function bar(){
let a = 3;
foo();
}
let a = 2;
bar()
而 JavaScript 的 this 機制跟動態(tài)作用域很相似，是在運行時在被調(diào)用的地方動態(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; // 變量聲明到全局對象中
foo();
使用 var 聲明的變量 a，被綁定到全局對象中，如果是瀏覽器，則是在 window 對象。
foo() 調(diào)用時，引用了默認(rèn)綁定，this 指向了全局對象。
這種情況會發(fā)生在調(diào)用位置存在「上下文對象」的情況，如：
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)用的時候，擁有上下文對象的時候，this 會被綁定到該上下文對象。
正如上面的代碼，
obj1.foo() 被調(diào)用時，this 綁定到了 obj1,
而 obj2.foo() 被調(diào)用時，this 綁定到了 obj2。
這種就是使用 Function.prototype 中的三個方法 call(), apply(), bind() 了。
這三個函數(shù)，都可以改變函數(shù)的 this 指向到指定的對象，
不同之處在于，call() 和 apply() 是立即執(zhí)行函數(shù)，并且接受的參數(shù)的形式不同：
call(this, arg1, arg2, ...)
apply(this, [arg1, arg2, ...])
而 bind() 則是創(chuàng)建一個新的包裝函數(shù)，并且返回，而不是立刻執(zhí)行。
bind(this, arg1, arg2, ...)
apply() 接收參數(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)用的時候，調(diào)用了 apply() 函數(shù)，把 this 綁定到了一個新的對象中 {a: 2}，而且原封不動的接收 foo() 接收的函數(shù)。
最后一種，則是使用 new 操作符會產(chǎn)生 this 的綁定。
在理解 new 操作符對 this 的影響，首先要理解 new 的原理。
在 JavaScript 中，new 操作符并不像其他面向?qū)ο蟮恼Z言一樣，而是一種模擬出來的機制。
在 JavaScript 中，所有的函數(shù)都可以被 new 調(diào)用，這時候這個函數(shù)一般會被稱為「構(gòu)造函數(shù)」，實際上并不存在所謂「構(gòu)造函數(shù)」，更確切的理解應(yīng)該是對于函數(shù)的「構(gòu)造調(diào)用」。
使用 new 來調(diào)用函數(shù)，會自動執(zhí)行下面操作：
創(chuàng)建一個全新的對象。
這個新對象會被執(zhí)行 [[Prototype]] 連接。
這個新對象會綁定到函數(shù)調(diào)用的 this。
如果函數(shù)沒有返回其他對象，那么 new 表達式中的函數(shù)調(diào)用會自動返回這個新對象。
所以如果 new 是一個函數(shù)的話，會是這樣子的：
function New(Constructor, ...args){
let obj = {}; // 創(chuàng)建一個新對象
Object.setPrototypeOf(obj, Constructor.prototype); // 連接新對象與函數(shù)的原型
return Constructor.apply(obj, args) || obj; // 執(zhí)行函數(shù)，改變 this 指向新的對象
}
function Foo(a){
this.a = a;
}
New(Foo, 1); // Foo { a: 1 }
所以，在使用 new 來調(diào)用函數(shù)時候，我們會構(gòu)造一個新對象并把它綁定到函數(shù)調(diào)用中的 this 上。
優(yōu)先級如果一個位置發(fā)生了多條改變 this 的規(guī)則，那么優(yōu)先級是如何的呢？
看幾段代碼：
// 顯式綁定 > 隱式綁定
function foo() {
console.log(this.a);
}
let obj1 = {
a: 2,
foo,
}
obj1.foo(); // 輸出 2
obj1.foo.call({a: 1}); // 輸出 1
這說明「顯式綁定」的優(yōu)先級大于「隱式綁定」
// 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 }
這說明「new 綁定」的優(yōu)先級大于「顯式綁定」
而「默認(rèn)綁定」，毫無疑問是優(yōu)先級最低的。
所以優(yōu)先級順序為：
「new 綁定」 > 「顯式綁定」 > 「隱式綁定」 > 「默認(rèn)綁定?！?/strong>
所以，this 到底是什么this 并不是在編寫的時候綁定的，而是在運行時綁定的。它的上下文取決于函數(shù)調(diào)用時的各種條件。
this 的綁定和函數(shù)聲明的位置沒有任何關(guān)系，只取決于函數(shù)的調(diào)用方式。
當(dāng)一個函數(shù)被調(diào)用時，會創(chuàng)建一個「執(zhí)行上下文」，這個上下文會包含函數(shù)在哪里被調(diào)用（調(diào)用棧）、函數(shù)的調(diào)用方式、傳入的參數(shù)等信息。this 就是這個記錄的一個屬性，會在函數(shù)執(zhí)行的過程中用到。
《You Dont Know JS》- this & Object Prototypes
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84029.html
摘要：本文是對加深對的理解一文的導(dǎo)圖版翻譯中的是一個捉摸不透的東西，它很喜歡變化，很詭異。寫在后面的幾種綁定規(guī)則，歸根結(jié)底，的套路就是關(guān)于幾種模式的等價變換形式，知乎上面有大神解答，猛戳這最后是全圖附上思維導(dǎo)圖的下載鏈接去有道云筆記下載 本文是對《加深對 JavaScript This 的理解》一文的導(dǎo)圖版翻譯 JS中的this是一個捉摸不透的東西，它很喜歡變化，很詭異。擁抱變化，接收詭異...
摘要：總結(jié)本博文通過介紹執(zhí)行上下文和作用域的異同的使用以及變量對象，讓我們加深對語言特性的理解。首先，我們介紹了執(zhí)行上下文和的的關(guān)系，并且執(zhí)行上下文是具有對象的然后，介紹了作用域使變量在作用域范圍內(nèi)可見，并且作用域是基于函數(shù)的。 接上一篇Javascript Context和Scope的學(xué)習(xí)總結(jié)01【轉(zhuǎn)自cnblogs的JKhuang】（可能是segmentfault對單篇文章發(fā)布字?jǐn)?shù)有限制...
摘要：本文已同步到中常見的設(shè)計模式如果感覺寫的還可以，就給個小星星吧，歡迎和收藏。本文中關(guān)于各種設(shè)計模式定義都是引用書中的，部分引用自百度百科已標(biāo)出。下面把我整理出的常用設(shè)計模式按類型做個表格整理。 本文已同步到Github JavaScript中常見的設(shè)計模式,如果感覺寫的還可以，就給個小星星吧，歡迎star和收藏。 最近拜讀了曾探大神的《JavaScript設(shè)計模式與開發(fā)實踐》，真是醍醐...
摘要：明確重要的一點，這個連接存在于實例與構(gòu)造函數(shù)的原型對象之間，而不是存在于實例與構(gòu)造函數(shù)之間。相當(dāng)于重新創(chuàng)建了，指向構(gòu)造函數(shù)這一部分相當(dāng)于是重新在原型對象中創(chuàng)建了一個屬性，同時指向構(gòu)造函數(shù)。 之前對js原型和原型鏈的理解一直覺得很繞，繞來繞去的，在看了《JavaScript高級程序設(shè)計》和各種文章之后，終于對原型和原型鏈有了初步的了解，可是還是沒有很深入的了解，今次通過以前段時間遇到的一...
摘要：但是確是一個特例它的指向的是至于為什么簡單解釋下所有的構(gòu)造器都來自于，甚至包括根構(gòu)造器及自身。所有構(gòu)造器都繼承了的屬性及方法。如知道了所有構(gòu)造器含內(nèi)置及自定義的都是，的是誰呢這說明所有的構(gòu)造器也都是一個普通對象，可以給構(gòu)造器添加刪除屬性等。 showImg(https://segmentfault.com/img/remote/1460000009446154); 前言 此文章為加深對...
閱讀 3195·2021-11-22 14:45
閱讀 3357·2019-08-29 13:11
閱讀 2362·2019-08-29 12:31
閱讀 963·2019-08-29 11:21
閱讀 3037·2019-08-29 11:09
閱讀 3660·2019-08-28 18:11
閱讀 1470·2019-08-26 13:58
閱讀 1334·2019-08-26 13:27
