JavaScript 中的 this使用方法詳解

想要確定this裡規則是什麼，其實方法很簡單，透過檢查它的呼叫位置，在函數被​​呼叫的時候確定this，下面就跟著腳本之家小編一起透過本文學習吧

幾條規則確定函數裡的this 是什麼。

想確定 this 是什麼其實非常簡單。總體的規則是，透過檢查它的呼叫位置，在函數被​​呼叫的時候確定 this。它遵循下面這些規則，接下來以優先順序說明。

規則

1、如果在呼叫函數時使用 new 關鍵字，那麼函數裡的 this 就是全新的物件。

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2、如果使用 apply、call 或 bind 呼叫函數，那麼函數裡的 this 就是作為參數傳進去的物件。

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3、如果函數作為一個方法調用，就是說如果使用點符號調用函數，那麼 this 就是擁有這個函數作為屬性的物件。換句話說，當一個點在函數呼叫的左邊時，this 就是這個點左邊的物件。

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果函數作為一個純粹的函數調用，也就是說，它在沒有上述任何條件的情況下被調用，那麼 this 就是全域物件。在瀏覽器裡，就是 window 物件。

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意這個規則其實和第三個規則是一樣的，差別在於沒有宣告為方法的函數會自動成為全域物件 window 的屬性。因此，這其實是一個隱式的方法呼叫。當我們呼叫 fn()，其實就會被瀏覽器理解為 window.fn()，所以 this 就是 window。

console.log(fn === window.fn); // -> true

5、如果上述規則有多個適用，那麼優先權較高的就會設定 this 值。

6、如果是 ES2015 裡的箭頭函數，那麼它將忽略上述所有規則，並在創建的時候接收包含它的作用域作為 this 的值。想確定 this 具體是什麼的話，只需從創建箭頭函數那裡往上一行，看看那兒的 this 是什麼，箭頭函數裡的 this 值和它一樣。

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

看回第三個規則，當我們呼叫 obj.createArrowFn() 的時候，createArrowFn 裡的 this 是 obj，因為這是方法呼叫。因此，obj 會在 arrowFn 裡綁定到 this 上。如果我們在全域作用域建立一個箭頭函數，那麼 this 值就會是 window。

應用規則

讓我們來看一個程式碼範例，並應用這些規則。試試看能否弄清楚不同的函數呼叫下，this 是什麼。

確定應用了哪一條規則

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() 屬於第三條規則，方法呼叫。另一方面，print() 屬於第四條規則，純粹的函數呼叫。對於 print() 來說，我們在呼叫的時候沒有使用 new、bind/call/apply 或點符號，所以它對應了規則四，this 就是全域物件 window。

當適用多個規則的時候

當適用多個規則的時候，使用清單裡更高優先順序的規則。

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

如果規則二和規則三同時適用，那麼規則二佔優。

obj1.print.call(obj2); // -> { value: 17 }

如果規則一和規則三同時適用，那麼規則一佔優。

new obj1.print(); // -> {}

##有些函式庫有時候會故意將this 值綁定到某些函數裡。而通常會在函數裡將最有用的值綁定到 this 上使用。舉個例子，jQuery 把 this 綁定到 DOM 元素上，在回呼中觸發一個事件。如果某個函式庫出現一個不太符合上述規則的 this 值，那麼請仔細閱讀這個函式庫的文檔，它很有可能使用 bind 綁定了。

以上是JavaScript 中的 this使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！