JavaScript 中的 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 簡單規則，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com