[譯]淺顯易懂的 this 取值規(guī)則

X_AirDu 發(fā)布于2019-08-22 16:27 / 466人閱讀

摘要：遵循以下規(guī)則，按優(yōu)先級排列。換句話說，當處于被調(diào)用函數(shù)的左邊，則就是左邊的對象。試一下通過兩種不同的方式調(diào)用函數(shù)時的值。找到應(yīng)用的規(guī)則很顯然應(yīng)用的是規(guī)則使用符號。在使用工具庫時發(fā)現(xiàn)取值不符合上述規(guī)則時，請查看庫文檔。

翻譯自文章The Simple Rules to ‘this’ in Javascript。

確定什么是 this 并非難事。總的來說，通過查找函數(shù)被調(diào)用時的位置（和方法）就可以決定。遵循以下規(guī)則，按優(yōu)先級排列。

規(guī)則

通過 new 關(guān)鍵字調(diào)用構(gòu)造函數(shù)，函數(shù)內(nèi)的 this 是一個全新的對象。

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

通過 apply 、 call 或 bind 調(diào)用一個函數(shù)，函數(shù)內(nèi)的 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 }

如果一個函數(shù)作為對象的方法調(diào)用，即使用 . 符號調(diào)用該函數(shù)， this 是調(diào)用該函數(shù)的對象。換句話說，當 . 處于被調(diào)用函數(shù)的左邊，則 this 就是左邊的對象。

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

如果函數(shù)作為普通函數(shù)調(diào)用，意味著調(diào)用方式不符合以上任意一種， this 就是全局對象。在瀏覽器中就是 window 。

function fn() {
    console.log(this);
}
// If called in browser:
fn(); // -> Window {stop: ?, open: ?, alert: ?, ...}

*這個規(guī)則可以類比于規(guī)則3——不同之處在于這個函數(shù)自動掛載到了 window 對象上，所以可以這么理解，當我們調(diào)用 fn() 時其實調(diào)用的事 window.fn() ，所以 this 就是 window 。

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

如果符合上述多個規(guī)則，則越前面的規(guī)則會決定 this 的值。

如果函數(shù)是一個 ES2015 箭頭函數(shù)，會忽略上述所有規(guī)則， this 設(shè)置為它被創(chuàng)建時的上下文。為了找到 this 的值，需要找到函數(shù)被創(chuàng)建時的環(huán)境中 this 的值。

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

我們返回去看規(guī)則3，當我們調(diào)用 obj.createArrowFn() 時， createArrowFn 中的 this 就是 obj 對象，我們用 . 符號調(diào)用。如果我們在全局中創(chuàng)建一個箭頭函數(shù)， this 就是 window 。

應(yīng)用規(guī)則

下面在幾個例子中應(yīng)用一下我們的規(guī)則。試一下通過兩種不同的方式調(diào)用函數(shù)時 this 的值。

找到應(yīng)用的規(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() 很顯然應(yīng)用的是規(guī)則3——使用 . 符號。 print() 應(yīng)用了規(guī)則4，在調(diào)用 print() 時，我們沒有使用 new 、 bind/call/apply 或 . 符號，所以這里的 this 是全局對象 window 。

多重規(guī)則應(yīng)用

如上文提到，當應(yīng)用多個規(guī)則時，優(yōu)先應(yīng)用前面的規(guī)則。

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

如果規(guī)則2和3同時應(yīng)用，規(guī)則2優(yōu)先。

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

如果規(guī)則1和3同時應(yīng)用，規(guī)則1優(yōu)先。

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

關(guān)于工具庫

一些 JavaScript 庫有時候會在函數(shù)中主動綁定它認為最有用的內(nèi)容到 this 上。比如在 JQuery中，在觸發(fā)事件時 DOM 元素被綁定到了 this 上。在使用工具庫時發(fā)現(xiàn)取值不符合上述規(guī)則時，請查看庫文檔。很可能使用了 bind 語法。

該文章首發(fā)于我的個人站點