這句話很重要，這是理解 this 原理的基礎(chǔ)。
而在講解 this 之前，先要理解一下作用域的相關(guān)概念。

「詞法作用域」與「動態(tài)作用域」

通常來說，作用域一共有兩種主要的工作模型。

• 詞法作用域
• 動態(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ī)則有四種：

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

默認綁定

這是最直接的一種方式，就是不加任何的修飾符直接調(diào)用函數(shù)，如：

function foo() {
  console.log(this.a)   // 輸出 a
}

var a = 2;  //  變量聲明到全局對象中

foo();

使用 var 聲明的變量 a，被綁定到全局對象中，如果是瀏覽器，則是在 window 對象。
foo() 調(diào)用時，引用了默認綁定，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

當函數(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 遵循默認綁定規(guī)則，綁定到全局變量中。
而 bar() 在調(diào)用的時候，調(diào)用了 apply() 函數(shù)，把 this 綁定到了一個新的對象中 {a: 2}，而且原封不動的接收 foo() 接收的函數(shù)。

new 綁定

最后一種，則是使用 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í)行下面操作：

1. 創(chuàng)建一個全新的對象。
2. 這個新對象會被執(zhí)行 [[Prototype]] 連接。
3. 這個新對象會綁定到函數(shù)調(diào)用的 this。
4. 如果函數(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)先級大于「顯式綁定」
而「默認綁定」，毫無疑問是優(yōu)先級最低的。
所以優(yōu)先級順序為：

「new 綁定」 > 「顯式綁定」 > 「隱式綁定」 > 「默認綁定?！?/strong>