我相信你已經看過不少關於 JavaScript 的 this 的談論了,既然你點進來了,不妨繼續看下去,看是否能幫你加深對 this 的理解。javascript
最近在看 《You Dont Know JS》 這本書,不得感嘆,就算用了 JS 不少年的老前端來看這本書,我以爲仍是會有很多的收穫。前端
其中關於 this 的講解,更是加深了我對 this 的理解,故整理知識點,再加上自身的理解,以本身的語言來描述。java
對讀者來講,算是二手知識,這本書是開源的,能夠到本書的 Github 項目地址學習一手的知識。git
首先有一句你們都明白的話,我仍是要強調一遍:github
「this 是在函數被調用時發生的綁定,它指向什麼徹底取決於函數在哪裏被調用。」編程
這句話很重要,這是理解 this 原理的基礎。瀏覽器
而在講解 this 以前,先要理解一下做用域的相關概念。app
「詞法做用域」與「動態做用域」編程語言
一般來講,做用域一共有兩種主要的工做模型。函數
詞法做用域是大多數編程語言所採用的模式,而動態做用域仍有一些編程語言在用,例如 Bash 腳本。
而 JavaScript 就是採用的詞法做用域,也就是在編程階段,做用域就已經明確下來了。
思考下面代碼:
1 2 3 4 5 6 7 8 9 10 11 12 |
function foo(){ console.log(a); }
function bar(){ let a = 3; foo(); }
let a = 2;
bar() |
由於 JavaScript 所用的是詞法做用域,天然 foo() 聲明的階段,就已經肯定了變量 a 的做用域了。
假若,JavaScript 是採用的動態做用域,foo() 中打印的將是 3
1 2 3 4 5 6 7 8 9 10 11 12 |
function foo(){ console.log(a); }
function bar(){ let a = 3; foo(); }
let a = 2;
bar() |
而 JavaScript 的 this 機制跟動態做用域很類似,是在運行時在被調用的地方動態綁定的。
this 的四種綁定規則
在 JavaScript 中,影響 this 指向的綁定規則有四種:
默認綁定
這是最直接的一種方式,就是不加任何的修飾符直接調用函數,如:
1 2 3 4 5 6 7 |
function foo() { console.log(this.a) }
var a = 2;
foo(); |
使用 var 聲明的變量 a,被綁定到全局對象中,若是是瀏覽器,則是在 window 對象。
foo() 調用時,引用了默認綁定,this 指向了全局對象。
隱式綁定
這種狀況會發生在調用位置存在「上下文對象」的狀況,如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function foo() { console.log(this.a); }
let obj1 = { a: 1, foo, };
let obj2 = { a: 2, foo, }
obj1.foo(); obj2.foo(); |
當函數調用的時候,擁有上下文對象的時候,this 會被綁定到該上下文對象。
正如上面的代碼,
obj1.foo() 被調用時,this 綁定到了 obj1,
而 obj2.foo() 被調用時,this 綁定到了 obj2。
顯式綁定
這種就是使用 Function.prototype 中的三個方法 call(), apply(), bind() 了。
這三個函數,均可以改變函數的 this 指向到指定的對象,
不一樣之處在於,call() 和 apply() 是當即執行函數,而且接受的參數的形式不一樣:
而 bind() 則是建立一個新的包裝函數,而且返回,而不是馬上執行。
apply() 接收參數的形式,有助於函數嵌套函數的時候,把 arguments 變量傳遞到下一層函數中。
思考下面代碼:
1 2 3 4 5 6 7 8 9 10 11 |
function foo() { console.log(this.a); bar.apply({a: 2}, arguments); }
function bar(b) { console.log(this.a + b); }
var a = 1; foo(3); |
上面代碼中, foo() 內部的 this 遵循默認綁定規則,綁定到全局變量中。
而 bar() 在調用的時候,調用了 apply() 函數,把 this 綁定到了一個新的對象中 {a: 2},並且原封不動的接收 foo() 接收的函數。
new 綁定
最後一種,則是使用 new 操做符會產生 this 的綁定。
在理解 new 操做符對 this 的影響,首先要理解 new 的原理。
在 JavaScript 中,new 操做符並不像其餘面向對象的語言同樣,而是一種模擬出來的機制。
在 JavaScript 中,全部的函數均可以被 new 調用,這時候這個函數通常會被稱爲「構造函數」,實際上並不存在所謂「構造函數」,更確切的理解應該是對於函數的「構造調用」。
使用 new 來調用函數,會自動執行下面操做:
因此若是 new 是一個函數的話,會是這樣子的:
1 2 3 4 5 6 7 8 9 10 11 |
function New(Constructor, ...args){ let obj = {}; Object.setPrototypeOf(obj, Constructor.prototype); return Constructor.apply(obj, args) || obj; }
function Foo(a){ this.a = a; }
New(Foo, 1); |
因此,在使用 new 來調用函數時候,咱們會構造一個新對象並把它綁定到函數調用中的 this 上。
優先級
若是一個位置發生了多條改變 this 的規則,那麼優先級是如何的呢?
看幾段代碼:
1 2 3 4 5 6 7 8 9 10 11 12 |
function foo() { console.log(this.a); }
let obj1 = { a: 2, foo, }
obj1.foo(); obj1.foo.call({a: 1}); |
這說明「顯式綁定」的優先級大於「隱式綁定」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function foo(a) { this.a = a; }
let obj1 = {};
let bar = foo.bind(obj1); bar(2); console.log(obj1);
let obj2 = new bar(3); console.log(obj1); console.log(obj2); |
這說明「new 綁定」的優先級大於「顯式綁定」
而「默認綁定」,毫無疑問是優先級最低的。
因此優先級順序爲:
「new 綁定」 > 「顯式綁定」 > 「隱式綁定」 > 「默認綁定。」
因此,this 究竟是什麼
this 並非在編寫的時候綁定的,而是在運行時綁定的。它的上下文取決於函數調用時的各類條件。
this 的綁定和函數聲明的位置沒有任何關係,只取決於函數的調用方式。
當一個函數被調用時,會建立一個「執行上下文」,這個上下文會包含函數在哪裏被調用(調用棧)、函數的調用方式、傳入的參數等信息。this 就是這個記錄的一個屬性,會在函數執行的過程當中用到。
http://huang-jerryc.com/2017/07/15/understand-this-of-javascript/