摘要：如下在第一個例子中，被點擊元素是通過，這個形式參數來代替的。它的作用和形式參數類似，其本質上是一個對象的引用，它的特殊性在于不需要手動傳值，所以使用起來會更加簡單和方便。

無論在 javascript 的日常使用中還是前端面試過程中，this 的出鏡率都極高。這無疑說明了，this 的重要性。但是 this 非常靈活，導致很多人覺得 this 的行為難以理解。本文從為什么要有 this 作為切入點，總結了 this 的六大規則，希望能幫助你解答困惑。

this 實際上相當于一個參數，這個參數可能是開發中手動傳入的，也可能是 JS 或者第三方傳入的。
這個參數，通常指向的是函數執行時的“擁有者”。this 的機制，可以讓函數設計的更加簡潔，并且復用性更好。

this 是在函數執行時進行綁定的，綁定規則一共六條，分別是：

new 綁定：使用 new 關鍵字創建對象時，this 會綁定到創建的對象上。

顯式綁定：使用 call、apply 或 bind 方法顯式綁定時， this 為其第一個參數。

隱式綁定：當函數掛在對象上執行時，系統會隱式地將 this 綁定到該對象上。

默認綁定：當函數獨立執行時，嚴格模式 this 的默認綁定值為 undefined，否則為全局對象。

箭頭函數綁定：使用箭頭函數時，this的綁定值等于其外層的普通函數（或者全局對象本身）的this。

系統或第三方綁定：當函數作為參數，傳入系統或者第三方提供的接口時，傳入函數中的 this 是由系統或者第三方綁定的。

this 的機制提供了一個優雅的方式，隱式地傳遞一個對象，這可以讓函數設計的更加簡潔，并且復用性更好。

考慮下面一個例子，有兩個按鈕，點擊后將其背景改為紅色。

function changeBackgroundColor(ele) {
  ele.style.backgroundColor = "red";
}

btn1.addEventListener("click",function () {
  changeBackgroundColor(btn1);
});
btn2.addEventListener("click",function () {
  changeBackgroundColor(btn2);
});

在這里，我們顯式地將被點擊的元素傳遞給了 changeBackgroundColor 函數。但實際上，這里可以利用 this 隱式傳遞上下文的特點，直接在函數獲取當前被點擊的元素。如下：

function changeBackgroundColor() {
    this.style.backgroundColor = "red";
}

btn1.addEventListener("click",changeBackgroundColor);
btn2.addEventListener("click",changeBackgroundColor);

在第一個例子中，被點擊元素是通過 ele ，這個形式參數來代替的。而在第二個例子中，是通過一個特殊的關鍵字 this 來代替。this 它的作用和形式參數類似，其本質上是一個對象的引用，它的特殊性在于不需要手動傳值，所以使用起來會更加簡單和方便。

在實際使用中， this 究竟指向哪個對象是最令人困惑的。本文歸類了六類情景，總結六條 this 的綁定規則。

使用 new 創建對象的時候，類中的 this 指的是什么？

class Person {
  constructor(name){
    this.name = name;
  }

  getThis(){
    return this
  }
}


const xiaoMing = new Person("小明");

console.log(xiaoMing.getThis() === xiaoMing); // true
console.log(xiaoMing.getThis() === Person); // false
console.log(xiaoMing.name === "小明"); // true

在上面例子中，使用了 ES6 的語法創建了 Person 類。在使用 new 關鍵字創建對象的過程中，this 會由系統自動綁定到創建的對象上，也就是 xiaoMing。

規則一：在使用 new 關鍵字創建對象時，this 會綁定到創建的對象上。

情景二，使用 call、apply 和 bind 方法，顯式綁定 this 參數。

以 call 為例，call 方法的第一個傳入的參數，是 this 引用的對象。

function foo() {
  console.log( this === obj ); // true
  console.log( this.a === 2 ); // true
}

const obj = {
  a: 2
};

foo.call( obj );

在顯式傳遞的情況下，this 指向的對象很明顯，就是 call、apply 或 bind 方法的第一個參數。

規則二：使用 call、apply 或 bind 方法顯式綁定時， this 為其第一個參數。

隱式綁定和顯式綁定不同的地方在于，顯式綁定由開發者來指定 this；而隱式綁定時，函數或方法都會有一個“擁有者”，這個“擁有者”指的是直接調用的函數或方法對象。

先看一個最簡單的例子。

function bar() {
  console.log( this === obj );
}

const obj = {
  foo: function () {
    console.log( this === obj );
  },
  bar: bar
};

obj.foo(); // true
obj.bar(); // true

函數 foo 是直接掛在對象 obj 里面的，函數 bar 是在外面定義的，然后掛在對象 obj 上的。無論函數是在何處定義，但最后函數調用時，它的“擁有者”是 obj。所以 this 指向的是函數調用時的“擁有者” obj。

為了更加深入的理解，再考慮函數重新賦值到新的對象上的情況，來看看下面的例子。

function bar() {
  console.log( this === obj1 ); // false
  console.log( this === obj2 ); // true
}

const obj1 = {
  foo: function () {
    console.log( this === obj1 ); // false
    console.log( this === obj2 ); // true
  },
  bar: bar
};

const obj2 = {
  foo: obj1.foo,
  bar: obj1.bar
};

obj2.foo();
obj2.bar();

在該例子中，將 obj1 中的 foo 和 bar 方法賦值給了 obj2。函數調用時，“擁有者”是 obj2，而不是 obj1。所以 this 指向的是 obj2。

對象可以多層嵌套，在這種情況下執行函數，函數的“擁有者”是誰呢？

const obj1 = {
  obj2: {
    foo: function foo() {
      console.log( this === obj1 );      // false
      console.log( this === obj1.obj2 ); // true
    }
  }
};

obj1.obj2.foo()

foo 方法/函數中的直接調用者是 obj2，而不是 obj1，所以函數的“擁有者”指向的是離它最近的直接調用者。

如果一個方法/函數，在它的直接對象上調用執行，又同時執行了 call 方法，那么它是屬于隱式綁定還是顯式綁定呢？

const obj1 = {
  a: 1,
  foo: function () {
    console.log(this === obj1); // false
    console.log(this === obj2); // true
    console.log(this.a === 2);  // true
  }
};

const obj2 = {
  a: 2
};

obj1.foo.call(obj2); // true

由上，可以看出，如果顯式綁定存在，它就不可能屬于隱式綁定。

規則三：如果函數是掛在對象上執行的，這個時候系統會隱式的將 this 綁定為函數執行時的“擁有者”。

前一小段，討論了函數作為對象的方法執行時的情況。本小段，要討論的是，函數獨立執行的情況。

在函數直接調用的情況下，this 綁定的行為，稱之為默認綁定。

為了簡單起見，先討論在瀏覽器的非嚴格模式的下綁定行為。

function foo() {
  console.log( this === window); // true
}

foo();

在上面的例子中，系統將 window 默認地綁定到函數的 this 上。

在這里，先介紹一種我們可能會在代碼中見到的顯式綁定 null 的寫法。

function foo() {
  console.log( this == window ); // true
}

foo.apply(null);

將例一默認綁定的情況，改為了顯式綁定 null 的情況。

在實際開發中，我們可能會用到 apply 方法，并在第一個參數傳入 null 值，第二個參數傳入數組的方式來傳遞數組類型的參數。這是一種傳統的寫法，當然現在可以用 ES6 的寫法來代替，但是這不在本文的討論范圍內。

在本例最需要關注的是，this 竟然指向的 window 而不是 null。個人測試的結果是，在函數獨立調用時，或者顯式調用，傳入的值為 null 和 undefined 的情況下，會將 window 默認綁定到 this 上。

在函數多次調用，形成了一個調用棧的情況下，默認綁定的規則也是成立的。

接著，探討下嚴格模式下，this 的默認綁定的值。

"use strict";

function foo() {
  console.log( this === undefined );
}

foo();               // true
foo.call(undefined); // true
foo.call(null);      // false

在嚴格模式下，this 的默認綁定的值為 undefined。

規則四：在函數獨立執行的情況下，嚴格模式 this 的默認綁定值為 undefined，否則默認綁定的值為 window。

箭頭函數實際上，只是一個語法糖，實際上箭頭函數中的 this 實際上是其外層函數（或者 window/global 本身）中的 this。

// ES6
function foo() {
  setTimeout(() => {
    console.log(this === obj); // true
  }, 100);
}

const obj = {
  a : 1
}

foo.call(obj);

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log(_this === obj); // true
  }, 100);
}

var obj = {
  a : 1
}

foo.call(obj);

規則五：使用箭頭函數時，this 的綁定值和其外層的普通函數（或者 window/global 本身） this 綁定值相同。

在 JavaScript 中，函數是第一公民，可以將函數以值的方式，傳入任何系統或者第三方提供的函數中?，F在討論，最后一種情況。當將函數作為值，傳入系統函數或者第三方函數中時，this 究竟是如何綁定的。

我們在文章一開始提到的，兩個按鈕例子，系統自動將 this 綁定為點擊的按鈕。

function changeBackgroundColor() {
    console.log(this === btn1); // true
}

btn1.addEventListener("click",changeBackgroundColor);

接著測試系統提供的 setTimeout 接口在瀏覽器和 node 中綁定行為。

// 瀏覽器
setTimeout(function () {
  console.log(this === window); // true
},0)

// node
setTimeout(function () {
  console.log(this === global); // false
  console.log(this); // Timeout
},0)

很神奇的是，setTimeout 在 node 和瀏覽器中的綁定行為不一致。如果我們將 node 的中的 this 打印出來，會發現它綁定是一個 Timeout 對象。

如果是第三發提供的接口，情況會更加復雜。因為在其內部，會將什么值綁定到傳入的函數的 this 上，事先是不知道的，除非查看文檔或者源碼。

系統或者第三方，在其內部，可能會使用前面的五種規則一種或多種規則，對傳入函數的 this 進行綁定。所以，規則六，實際上一條在由前五條規則上衍生出來的規則。

規則六：調用系統或者第三方提供的接口時，傳入函數中的 this 是由系統或者第三方綁定的。

參考文章：

You-Dont-Know-JS

The this keyword

MDN this

查完規范后，用偽代碼再總結一下。

規范地址：

Construct：http://www.ecma-international...
Function Objects：http://www.ecma-international...
Function Calls：http://www.ecma-international...
ArrowFunction：http://www.ecma-international...

偽代碼

if (`newObj = new Object()`) {
  this = newObj
} else if (`bind/call/apply(thisArgument,...)`) {
  if (`use strict`) {
    this = thisArgument
  } else {
    if (thisArgument == null || thisArgument == undefined) {
      this = window || global
    } else {
      this = ToObject(thisArgument)
    }
  }
} else if (`Function Call`) {
  if (`obj.foo()`) {
    // base value . Reference = base value + reference name + strict reference
    // 例外： super.render(obj).  this = childObj ?
    this = obj 
  } else if (`foo()`) {
    // 例外： with statement. this = with object?   
    this = `use strict` ? undefined : window || global
  }
}