幾條規(guī)則確定函數(shù)里的 this 是什么。

想確定 this 是什么其實非常簡單。總體的規(guī)則是，通過檢查它的調(diào)用位置，在函數(shù)被調(diào)用的的時候確定 this。它遵循下面這些規(guī)則，接下來以優(yōu)先級順序說明。

規(guī)則

1、如果在調(diào)用函數(shù)時使用 new 關鍵字，那么函數(shù)里的 this 就是一個全新的對象。

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

2、如果使用 apply、call 或者 bind 調(diào)用函數(shù)，那么函數(shù)里的 this 就是作為參數(shù)傳進去的對象。

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、如果函數(shù)作為一個方法調(diào)用，就是說如果使用點符號調(diào)用函數(shù)，那么 this 就是擁有這個函數(shù)作為屬性的對象。換句話說，當一個點在函數(shù)調(diào)用的左側時，this 就是這個點左側的那個對象。

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

4、如果函數(shù)作為一個純粹的函數(shù)調(diào)用，也就是說，它在沒有上述任何條件的情況下被調(diào)用，那么 this 就是全局對象。在瀏覽器里，就是 window 對象。

function fn() {
  console.log(this);
}
// 如果在瀏覽器里調(diào)用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意這個規(guī)則其實和第三個規(guī)則是一樣的，區(qū)別在于沒有聲明為方法的函數(shù)會自動成為全局對象 window 的屬性。因此，這其實是一個隱式的方法調(diào)用。當我們調(diào)用 fn()，其實就會被瀏覽器理解為 window.fn()，所以 this 就是 window。

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

5、如果上述規(guī)則有多個適用，那么優(yōu)先級更高的就會設置 this 值。

6、如果是 ES2015 里的箭頭函數(shù)，那么它將忽略上述所有規(guī)則，并在創(chuàng)建的時候接收包含它的作用域作為 this 的值。想確定 this 具體是什么的話，只需從創(chuàng)建箭頭函數(shù)那里往上一行，看看那兒的 this 是什么，箭頭函數(shù)里的 this 值和它一樣。

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

看回第三個規(guī)則，當我們調(diào)用 obj.createArrowFn() 的時候，createArrowFn 里的 this 是 obj，因為這是方法調(diào)用。因此，obj 會在 arrowFn 里綁定到 this 上。如果我們在全局作用域創(chuàng)建一個箭頭函數(shù)，那么 this 值就會是 window。

應用規(guī)則

讓我們來看一個代碼示例，并應用這些規(guī)則。嘗試一下看能否弄清楚不同的函數(shù)調(diào)用下，this 是什么。

確定應用了哪條規(guī)則

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() 屬于第三條規(guī)則，方法調(diào)用。另一方面，print() 屬于第四條規(guī)則，純粹的函數(shù)調(diào)用。對于 print() 來說，我們在調(diào)用的時候沒有使用 new、bind/call/apply 或者點符號，所以它對應了規(guī)則四，this 就是全局對象 window。

當適用多個規(guī)則的時候

當適用多個規(guī)則的時候，使用列表里更高優(yōu)先級的規(guī)則。

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

如果規(guī)則二和規(guī)則三同時適用，那么規(guī)則二占優(yōu)。

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

如果規(guī)則一和規(guī)則三同時適用，那么規(guī)則一占優(yōu)。

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

庫

有些庫有時候會故意將 this 值綁定到某些函數(shù)里。而通常會在函數(shù)里將最有用的值綁定到 this 上使用。舉個例子，jQuery 把 this 綁定到 DOM 元素上，在回調(diào)中觸發(fā)一個事件。如果某個庫出現(xiàn)一個不太符合上述規(guī)則的 this 值，那么請仔細閱讀這個庫的文檔，它很有可能使用 bind 綁定了。

總結

以上所述是小編給大家介紹的JavaScript 中的 this 簡單規(guī)則，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論