摘要：調(diào)用在中，通過(guò)的形式調(diào)用一個(gè)構(gòu)造函數(shù)，會(huì)創(chuàng)建這個(gè)構(gòu)造函數(shù)實(shí)例，而這個(gè)實(shí)例的指向創(chuàng)建的這個(gè)實(shí)例。如下例所示，在構(gòu)造函數(shù)內(nèi)部使用并沒(méi)有改變?nèi)肿兞康闹怠ｏ@然，箭頭函數(shù)是不能用來(lái)做構(gòu)造函數(shù)。

　　關(guān)于javascript中this指向的問(wèn)題，現(xiàn)總結(jié)如下，如有不正確，歡迎指正。

　　javascript中，this的指向并不是在函數(shù)定義的時(shí)候確定的，而是在其被調(diào)用的時(shí)候確定的。也就是說(shuō)，函數(shù)的調(diào)用方式?jīng)Q定了this指向。記?。?b>this 就是一個(gè)指針，指向我們調(diào)用函數(shù)的對(duì)象。

　　在此將javascript中this的調(diào)用方式分為以下幾種：

　　直接調(diào)用是指通過(guò) funName(..) 這種方式調(diào)用。此時(shí)，函數(shù)內(nèi)部的this指向全局變量。

function foo() {
    console.log(this === global);
}
foo(); //true

　　注意：直接調(diào)用并不是僅僅指在全局作用域下進(jìn)行調(diào)用，而是說(shuō)在任何作用域下通過(guò)funName(..) 這種方式調(diào)用。如下兩個(gè)例子亦是屬于直接調(diào)用方式：

　　a、使用bind函數(shù)改變外層函數(shù)的作用域，然后在內(nèi)層直接調(diào)用，其this指向依然是全局變量：

function foo() {
    console.log(this === global);
}

function foo1() {
    foo();
};
var foo2 = foo1.bind({}); //改變foo1函數(shù)的作用域
foo2(); //true 依然指向全局變量

　　b、函數(shù)表達(dá)式，將一個(gè)函數(shù)賦值給一個(gè)變量，然后通過(guò)直接調(diào)用的調(diào)用方式調(diào)用此函數(shù)，其this指向依然是全局變量：

var obj = {
    foo: function(){
        console.log(this === obj);   //false
        console.log(this === global);//true
    }
}
var f = obj.foo;
f();

　　方法調(diào)用是指通過(guò)對(duì)象來(lái)調(diào)用其方法函數(shù)，類似于obj.foo(..)的調(diào)用方式。此時(shí)，this指向調(diào)用該方法的對(duì)象，注意，是最終調(diào)用該方法的對(duì)象。

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

　　在es5中，通過(guò) new Constructor() 的形式調(diào)用一個(gè)構(gòu)造函數(shù)，會(huì)創(chuàng)建這個(gè)構(gòu)造函數(shù)實(shí)例，而這個(gè)實(shí)例的this指向創(chuàng)建的這個(gè)實(shí)例。如下例所示，在構(gòu)造函數(shù)內(nèi)部使用this.name并沒(méi)有改變?nèi)肿兞縩ame的值。

var name = "全局";
function Person(name){
    this.name = name;
}
var p = new Person("局部");
console.log(p.name);
console.log(name);

上述三種情況是常見(jiàn)的調(diào)用方式，以下還有一些特殊的調(diào)用方式：如bind、call、apply以及es6中箭頭函數(shù)。

　　bind函數(shù)用于綁定this的指向，并且返回一個(gè)綁定函數(shù)，此函數(shù)綁定了this指向，注意：綁定函數(shù)的this指向?qū)⒉豢稍俅胃摹?/p>

var obj = {};
function foo1() {
    console.log(this === obj);
}
foo1(); //false  此時(shí)屬于上述直接調(diào)用的方式，因此其this指向global
var foo2 = foo1.bind(obj);
foo2(); //true 綁定函數(shù)的this指向其綁定的對(duì)象
/**
 * 注意：綁定函數(shù)的this指向不可更改
 */
var foo3 = foo2.bind({"a": 1});
foo3(); //true 
foo2.apply({"a": 1}); //true 
foo2.call({"a": 1});  //true 

　　apply和call亦可以用于改變this指向，并且返回執(zhí)行結(jié)果。關(guān)于bind、apply和call的區(qū)別以及實(shí)現(xiàn)可以參考我的博客：《bind、call、apply的區(qū)別與實(shí)現(xiàn)》，在此不做重復(fù)說(shuō)明。需要注意的一點(diǎn)是：apply和call不可以改變綁定函數(shù)(使用bind返回的函數(shù))的this指向。

var obj = {};
function foo1() {
    console.log(this === obj);
}
var foo2 = foo1.bind({"a": 1});
/**
 * 注意：此處并不是綁定函數(shù)，因此其返回值依然是ture，即apply改變其this指向。
 */
foo1.apply(obj); //true
/**
 * 注意：此處是綁定函數(shù)，因此不可再通過(guò)apply和call的形式改變其this指向。
 */
foo2.apply(obj); //false

　　箭頭函數(shù)沒(méi)有自己的this綁定，其使用的this是其直接父級(jí)函數(shù)的this。也就是說(shuō)，箭頭函數(shù)內(nèi)部的this是由其直接外層函數(shù)（方法）決定的，而外層函數(shù)中的this是由其調(diào)用方式?jīng)Q定的。

const obj = {
    foo: function() {
        const inner = () => {
            console.log(this === obj);
        };
        inner();
    },
    far: function() {
        return () => {
            console.log(this === obj);
        }
    }
}
/**
 * inner()內(nèi)的this是foo的this，其指向取決于foo的調(diào)用方式
 */
obj.foo(); //true
var foo1 = obj.foo;
foo1();    //false 此時(shí)應(yīng)該指向global

const far1 = obj.far();
far1();    //true
const far2 = obj.far;
far2()();  //false 此時(shí)應(yīng)該指向global

在對(duì)象上定義函數(shù)：

const test = {
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};
test.sum();
// TypeError: Cannot read property "reduce" of undefined

原因就是，箭頭函數(shù)沒(méi)有它自己的this值，箭頭函數(shù)內(nèi)的this值繼承自外圍作用域。

對(duì)象方法內(nèi)的this指向調(diào)用這個(gè)方法的對(duì)象，如果使用箭頭函數(shù)，this和對(duì)象方法在調(diào)用的時(shí)候所處環(huán)境的this值一致。因?yàn)?test.sum()是在全局環(huán)境下進(jìn)行調(diào)用，此時(shí)this指向全局。

解決方法也很簡(jiǎn)單，使用函數(shù)表達(dá)式或者方法簡(jiǎn)寫（ES6 中已經(jīng)支持）來(lái)定義方法，這樣能確保 this 是在運(yùn)行時(shí)是由包含它的上下文決定的。

const test = {
    array: [1, 2, 3],
    sum() {
        console.log(this === test); // => true
        return this.array.reduce((result, item) => result + item);
    }
};
test.sum();
// 6

定義原型方法

在對(duì)象原型上定義函數(shù)也是遵循著一樣的規(guī)則

function Person(name) {
    this.name = name;
}

Person.prototype.sayName = () => {
    console.log(this === window); // => true
    return this.name;
};

const cat = new Person("Mew");
cat.sayName(); // => undefined

使用傳統(tǒng)的函數(shù)表達(dá)式就能解決問(wèn)題

function Person(name) {
    this.name = name;
}

Person.prototype.sayName = function() {
    console.log(this === Person); // => true
    return this.name;
};

const cat = new Person("Mew");
cat.sayName(); // => Mew

定義事件回調(diào)函數(shù)

this是JS中非常強(qiáng)大的特點(diǎn)，他讓函數(shù)可以根據(jù)其調(diào)用方式動(dòng)態(tài)的改變上下文，然后箭頭函數(shù)直接在聲明時(shí)就綁定了this對(duì)象，所以不再是動(dòng)態(tài)的。

在客戶端，在DOM元素上綁定事件監(jiān)聽(tīng)函數(shù)是非常普遍的行為，在DOM事件被觸發(fā)時(shí)，回調(diào)函數(shù)中的this指向該DOM，但是，箭頭函數(shù)在聲明的時(shí)候就綁定了執(zhí)行上下文，要?jiǎng)討B(tài)改變上下文是不可能的，在需要?jiǎng)討B(tài)上下文的時(shí)候它的弊端就凸顯出來(lái):

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
    console.log(this === window); // => true
    this.innerHTML = "Clicked button";
});

因?yàn)檫@個(gè)回調(diào)的箭頭函數(shù)是在全局上下文中被定義的，所以他的this是window。換句話說(shuō)就是，箭頭函數(shù)預(yù)定義的上下文是不能被修改的，這樣 this.innerHTML 就等價(jià)于 window.innerHTML，而后者是沒(méi)有任何意義的。

使用函數(shù)表達(dá)式就可以在運(yùn)行時(shí)動(dòng)態(tài)的改變 this：

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
    console.log(this === button); // => true
    this.innerHTML = "Clicked button";
});

定義構(gòu)造函數(shù)

如果使用箭頭函數(shù)會(huì)報(bào)錯(cuò)。
顯然，箭頭函數(shù)是不能用來(lái)做構(gòu)造函數(shù)。

const Message = (text) => {
    this.text = text;
};
const helloMessage = new Message("Hello World!");
// Throws "TypeError: Message is not a constructor"

理論上來(lái)說(shuō)也是不能這么做的，因?yàn)榧^函數(shù)在創(chuàng)建時(shí)this對(duì)象就綁定了，更不會(huì)指向?qū)ο髮?shí)例。

箭頭函數(shù)帶來(lái)了很多便利。恰當(dāng)?shù)氖褂眉^函數(shù)可以讓我們避免使用早期的.bind()函數(shù)或者需要固定上下文的地方并且讓代碼更加簡(jiǎn)潔。

箭頭函數(shù)帶來(lái)了很多便利。恰當(dāng)?shù)氖褂眉^函數(shù)可以讓我們避免使用早期的.bind()函數(shù)或者需要固定上下文的地方并且讓代碼更加簡(jiǎn)潔。

　　以上是個(gè)人對(duì)JavaScript中this的理解，歡迎您的留言。
歡迎訪問(wèn)我的個(gè)人博客了解更多信息。

參考文獻(xiàn)：
1、《JavaScript 的 this 指向問(wèn)題深度解析》
2、《ES6使用箭頭函數(shù)注意點(diǎn)》