JavaScript 中 this 的工作原理以及注意事項(xiàng)

作者：kmokidd翻譯 2014-05-16 10:04:19

在JavaScript中，this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨校瑃his 還是隨處可用的。這篇文章介紹了this 的工作原理，它會(huì)造成什么樣的問(wèn)題以及this 的相關(guān)例子。

在JavaScript中，this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨校?em>this 還是隨處可用的。這篇文章介紹了this 的工作原理，它會(huì)造成什么樣的問(wèn)題以及this 的相關(guān)例子。要根據(jù)this 所在的位置來(lái)理解它，情況大概可以分為3種：

在函數(shù)中：this 通常是一個(gè)隱含的參數(shù)。
在函數(shù)外（***作用域中）：在瀏覽器中this 指的是全局對(duì)象；在Node.js中指的是模塊(module)的導(dǎo)出(exports)。
傳遞到eval()中的字符串：如果eval()是被直接調(diào)用的，this 指的是當(dāng)前對(duì)象；如果eval()是被間接調(diào)用的，this 就是指全局對(duì)象。

對(duì)這幾個(gè)分類(lèi)，我們做了相應(yīng)的測(cè)試：

在函數(shù)中的this

函數(shù)基本可以代表JS中所有可被調(diào)用的結(jié)構(gòu)，所以這是也最常見(jiàn)的使用this 的場(chǎng)景，而函數(shù)又能被子分為下列三種角色：

1.1 在實(shí)函數(shù)中的this

在實(shí)函數(shù)中，this 的值是取決于它所處的上下文的模式。
- Sloppy模式：this 指的是全局對(duì)象（在瀏覽器中就是window）。

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

Strict模式：this 的值是undefined。

function strictFunc() {  
    &#039;use strict&#039;;  
    console.log(this === undefined); // true  
}  
strictFunc();

this 是函數(shù)的隱含參數(shù)，所以它的值總是相同的。不過(guò)你是可以通過(guò)使用call()或者apply()的方法顯示地定義好this的值的。

function func(arg1, arg2) {  
    console.log(this); // 1  
    console.log(arg1); // 2  
    console.log(arg2); // 3  
}  
func.call(1, 2, 3); // (this, arg1, arg2)  
func.apply(1, [2, 3]); // (this, arrayWithArgs)

1.2 構(gòu)造器中的this

你可以通過(guò)new 將一個(gè)函數(shù)當(dāng)做一個(gè)構(gòu)造器來(lái)使用。new 操作創(chuàng)建了一個(gè)新的對(duì)象，并將這個(gè)對(duì)象通過(guò)this 傳入構(gòu)造器中。

var savedThis;  
function Constr() {  
    savedThis = this;  
}  
var inst = new Constr();  
console.log(savedThis === inst); // true

JS中new 操作的實(shí)現(xiàn)原理大概如下面的代碼所示（更準(zhǔn)確的實(shí)現(xiàn)請(qǐng)看這里，這個(gè)實(shí)現(xiàn)也比較復(fù)雜一些）：

function newOperator(Constr, arrayWithArgs) {  
    var thisValue = Object.create(Constr.prototype);  
    Constr.apply(thisValue, arrayWithArgs);  
    return thisValue;  
}

1.3 方法中的this

在方法中this 的用法更傾向于傳統(tǒng)的面向?qū)ο笳Z(yǔ)言：this 指向的接收方，也就是包含有這個(gè)方法的對(duì)象。

var obj = {  
    method: function () {  
        console.log(this === obj); // true  
    }  
}  
obj.method();

實(shí)函數(shù)

構(gòu)造器

方法

2. 作用域中的this

在瀏覽器中，作用域就是全局作用域，this 指的就是這個(gè)全局對(duì)象（就像window）：

<script>  
    console.log(this === window); // true  
</script>

在Node.js中，你通常都是在module中執(zhí)行函數(shù)的。因此，***作用域是個(gè)很特別的模塊作用域（module scope）：

// `global` (not `window`) refers to global object:  
console.log(Math === global.Math); // true  
 
// `this` doesn’t refer to the global object:  
console.log(this !== global); // true  
// `this` refers to a module’s exports:  
console.log(this === module.exports); // true

3. eval()中的this

eval()可以被直接（通過(guò)調(diào)用這個(gè)函數(shù)名’eval’）或者間接（通過(guò)別的方式調(diào)用，比如call()）地調(diào)用。要了解更多細(xì)節(jié)，請(qǐng)看這里。

// Real functions  
function sloppyFunc() {  
    console.log(eval(&#039;this&#039;) === window); // true  
}  
sloppyFunc();  
 
function strictFunc() {  
    &#039;use strict&#039;;  
    console.log(eval(&#039;this&#039;) === undefined); // true  
}  
strictFunc();  
 
// Constructors  
var savedThis;  
function Constr() {  
    savedThis = eval(&#039;this&#039;);  
}  
var inst = new Constr();  
console.log(savedThis === inst); // true  
 
// Methods  
var obj = {  
    method: function () {  
        console.log(eval(&#039;this&#039;) === obj); // true  
    }  
}  
obj.method();

4.與this有關(guān)的陷阱

你要小心下面將介紹的3個(gè)和this 有關(guān)的陷阱。要注意，在下面的例子中，使用Strict模式(strict mode)都能提高代碼的安全性。由于在實(shí)函數(shù)中，this 的值是undefined，當(dāng)出現(xiàn)問(wèn)題的時(shí)候，你會(huì)得到警告。

4.1 忘記使用new

如果你不是使用new來(lái)調(diào)用構(gòu)造器，那其實(shí)你就是在使用一個(gè)實(shí)函數(shù)。因此this就不會(huì)是你預(yù)期的值。在Sloppy模式中，this 指向的就是window 而你將會(huì)創(chuàng)建全局變量：

function Point(x, y) {  
    this.x = x;  
    this.y = y;  
}  
var p = Point(7, 5); // we forgot new!  
console.log(p === undefined); // true  
 
// Global variables have been created:  
console.log(x); // 7  
console.log(y); // 5

不過(guò)如果使用的是strict模式，那你還是會(huì)得到警告（this===undefined）：

function Point(x, y) {  
    &#039;use strict&#039;;  
    this.x = x;  
    this.y = y;  
}  
var p = Point(7, 5);  
// TypeError: Cannot set property &#039;x&#039; of undefined

4.2 不恰當(dāng)?shù)厥褂梅椒?/p>

如果你直接取得一個(gè)方法的值（不是調(diào)用它），你就是把這個(gè)方法當(dāng)做函數(shù)在用。當(dāng)你要將一個(gè)方法當(dāng)做一個(gè)參數(shù)傳入一個(gè)函數(shù)或者一個(gè)調(diào)用方法中，你很可能會(huì)這么做。setTimeout()和注冊(cè)事件句柄（event handlers）就是這種情況。我將會(huì)使用callIt()方法來(lái)模擬這個(gè)場(chǎng)景：

/** Similar to setTimeout() and setImmediate() */ 
function callIt(func) {  
    func();  
}

如果你是在Sloppy模式下將一個(gè)方法當(dāng)做函數(shù)來(lái)調(diào)用，*this*指向的就是全局對(duì)象，所以之后創(chuàng)建的都會(huì)是全局的變量。

var counter = {  
    count: 0,  
    // Sloppy-mode method  
    inc: function () {  
        this.count++;  
    }  
}  
callIt(counter.inc);  
 
// Didn’t work:  
console.log(counter.count); // 0  
 
// Instead, a global variable has been created  
// (NaN is result of applying ++ to undefined):  
console.log(count);  // NaN

如果你是在Strict模式下這么做的話，this是undefined的，你還是得不到想要的結(jié)果，不過(guò)至少你會(huì)得到一句警告：

var counter = {  
    count: 0,  
    // Strict-mode method  
    inc: function () {  
        &#039;use strict&#039;;  
        this.count++;  
    }  
}  
callIt(counter.inc);  
 
// TypeError: Cannot read property &#039;count&#039; of undefined  
console.log(counter.count);

要想得到預(yù)期的結(jié)果，可以使用bind()：

var counter = {  
    count: 0,  
    inc: function () {  
        this.count++;  
    }  
}  
callIt(counter.inc.bind(counter));  
// It worked!  
console.log(counter.count); // 1

bind()又創(chuàng)建了一個(gè)總是能將this的值設(shè)置為counter 的函數(shù)。

4.3 隱藏this

當(dāng)你在方法中使用函數(shù)的時(shí)候，常常會(huì)忽略了函數(shù)是有自己的this 的。這個(gè)this 又有別于方法，因此你不能把這兩個(gè)this 混在一起使用。具體的請(qǐng)看下面這段代碼：

var obj = {  
    name: &#039;Jane&#039;,  
    friends: [ &#039;Tarzan&#039;, &#039;Cheeta&#039; ],  
    loop: function () {  
        &#039;use strict&#039;;  
        this.friends.forEach(  
            function (friend) {  
                console.log(this.name+&#039; knows &#039;+friend);  
            }  
        );  
    }  
};  
obj.loop();  
// TypeError: Cannot read property &#039;name&#039; of undefined

上面的例子里函數(shù)中的this.name 不能使用，因?yàn)楹瘮?shù)的this 的值是undefined，這和方法loop()中的this 不一樣。下面提供了三種思路來(lái)解決這個(gè)問(wèn)題：

that=this，將this 賦值到一個(gè)變量上，這樣就把this 顯性地表現(xiàn)出來(lái)了（除了that，self 也是個(gè)很常見(jiàn)的用于存放this的變量名），之后就使用那個(gè)變量：

loop: function () {  
    &#039;use strict&#039;;  
    var that = this;  
    this.friends.forEach(function (friend) {  
        console.log(that.name+&#039; knows &#039;+friend);  
    });  
}

bind()。使用bind()來(lái)創(chuàng)建一個(gè)函數(shù)，這個(gè)函數(shù)的this 總是存有你想要傳遞的值（下面這個(gè)例子中，方法的this）：

loop: function () {  
    &#039;use strict&#039;;  
    this.friends.forEach(function (friend) {  
        console.log(this.name+&#039; knows &#039;+friend);  
    }.bind(this));  
}

用forEach的第二個(gè)參數(shù)。forEach的第二個(gè)參數(shù)會(huì)被傳入回調(diào)函數(shù)中，作為回調(diào)函數(shù)的this 來(lái)使用。

5. ***實(shí)踐

理論上，我認(rèn)為實(shí)函數(shù)并沒(méi)有屬于自己的this，而上述的解決方案也是按照這個(gè)思想的。ECMAScript 6是用箭頭函數(shù)(arrow function)來(lái)實(shí)現(xiàn)這個(gè)效果的，箭頭函數(shù)就是沒(méi)有自己的this 的函數(shù)。在這樣的函數(shù)中你可以隨便使用this，也不用擔(dān)心有沒(méi)有隱式的存在。

loop: function () {  
    &#039;use strict&#039;;  
    // The parameter of forEach() is an arrow function  
    this.friends.forEach(friend => {  
        // `this` is loop’s `this`  
        console.log(this.name+&#039; knows &#039;+friend);  
    });  
}

我不喜歡有些API把this 當(dāng)做實(shí)函數(shù)的一個(gè)附加參數(shù)：

beforeEach(function () {    
    this.addMatchers({    
        toBeInRange: function (start, end) {    
            ...  
        }    
    });    
});

把一個(gè)隱性參數(shù)寫(xiě)成顯性地樣子傳入，代碼會(huì)顯得更好理解，而且這樣和箭頭函數(shù)的要求也很一致：

beforeEach(api => {  
    api.addMatchers({  
        toBeInRange(start, end) {  
            ...  
        }  
    });  
});

原文鏈接： 2ality 翻譯：伯樂(lè)在線 - kmokidd

譯文鏈接： http://blog.jobbole.com/67347/

責(zé)任編輯：林師授來(lái)源：伯樂(lè)在線

JavaScript this原理