加深對 JavaScript This 的理解

我相信你已經看過不少關於 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 指向的綁定規則有四種:

  • 默認綁定
  • 隱式綁定
  • 顯式綁定
  • new 綁定

默認綁定

這是最直接的一種方式,就是不加任何的修飾符直接調用函數,如:

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() 是當即執行函數,而且接受的參數的形式不一樣:

  • call(this, arg1, arg2, ...)
  • apply(this, [arg1, arg2, ...])

bind() 則是建立一個新的包裝函數,而且返回,而不是馬上執行。

  • bind(this, arg1, arg2, ...)

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 來調用函數,會自動執行下面操做:

  1. 建立一個全新的對象。
  2. 這個新對象會被執行 [[Prototype]] 鏈接。
  3. 這個新對象會綁定到函數調用的 this。
  4. 若是函數沒有返回其餘對象,那麼 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/

相關文章
相關標籤/搜索