在開始今天的課程之前，先拋出一個結(jié)論，JavaScript 中的 this 并不難，反而非常容易掌握。

我們先看一段代碼：

let from = 'WuHan'; 
 
var obj = { 
    from: 'BeiJing', 
    logFrom: function () { 
        console.log(from); 
    } 
}; 
 
let logFrom = obj.logFrom; 
logFrom(); 
obj.logFrom(); 

執(zhí)行上面的代碼，打印的結(jié)果是：

打印結(jié)果都是 WuHan，這個例子迷惑的地方主要是下面這兩個 from 的定義，第一個屬于全局變量，第二個屬于局部變量，logFrom 函數(shù)使用的是全局的 from 還是 obj 對象內(nèi)部的 from。答案是「使用全局的 from」。

那如果想使用 obj 對象內(nèi)部定義的 from 該咋么做呢?這就需要進(jìn)入我們今天要討論的話題 「this 機制」，困擾讀者比較深的是 this 究竟代表誰。記住一句話「this 始終代表的是一個對象」。

當(dāng)把上面的代碼換成( 把打印語句 console.log(from) 換成 console.log(this.from) )：

var obj = { 
    from: 'BeiJing', 
    logFrom: function () { 
        console.log(this.from); 
    } 
}; 

當(dāng)執(zhí)行：

let logFrom = obj.logFrom; 
logFrom(); 

執(zhí)行結(jié)果是 undefined。

當(dāng)執(zhí)行：

obj.logFrom(); 

執(zhí)行結(jié)果是 BeiJing。

為什么會是這樣?

其實 this 就是被「動態(tài)」綁定到執(zhí)行上下文中的一個屬性，也就是說當(dāng)構(gòu)建一個執(zhí)行上下文的時候就會綁定一個 this 屬性。主要有兩種執(zhí)行上下文：全局執(zhí)行上下文和函數(shù)執(zhí)行上下文，那么就有兩種 this，一種全局執(zhí)行上下文中的 this，另一種是函數(shù)執(zhí)行上下文中的 this。

(1) 當(dāng)在全局執(zhí)行一個函數(shù)的時候(通過括號的方式執(zhí)行)，this 指向全局對象，在瀏覽器中，如果在嚴(yán)格模式下 this 為 undefined，在非嚴(yán)格模式下，this 為 window。比如 let logFrom = obj.logFrom，此時變量 logFrom 屬于全局變量，通過全局調(diào)用一個函數(shù)，this 為 window(這里屬于非嚴(yán)格模式)，window 沒有屬性 from，故結(jié)果為 undefined。

這里給大家留個思考題，如果把第一行代碼中的 let 換成 var，結(jié)果是什么?

(2) 當(dāng)通過某個對象調(diào)用一個方法的時候，this 為當(dāng)前的對象。比如通過 obj 調(diào)用方法 logFrom，this 為 obj，所以打印結(jié)果為 BeiJing。

使用第 1、2 這兩條可以搞定大多數(shù) this 的問題，但是有一種情況需要留意。比如下面的代碼：

let lefex = { 
    name: 'suyan', 
    age: 0, 
    addAge: function () { 
        console.log('outer this = ', this); 
        this.age += 2; 
        setTimeout(function () { 
            console.log('inner this = ', this); 
            this.age += 1; 
        }, 100); 
    } 
}; 
lefex.addAge(); 

打印結(jié)果為(非嚴(yán)格模式下執(zhí)行)：

結(jié)果發(fā)現(xiàn)兩個 this 并不一樣，內(nèi)部函數(shù)并不會繼承外部函數(shù)的 this。為了解決這個問題，就有了 let that = this 這樣丑陋的代碼。

當(dāng)然可以使用箭頭函數(shù)解決這個問題：

this 指向就是當(dāng)前創(chuàng)建的對象，下面代碼中 this 指的是 suyan。

function Person(name) { 
    this.name = name; 
    console.log(this); 
} 
let suyan = new Person('suyan'); 

關(guān)于 this 應(yīng)用比較廣泛的一個話題是，如何改變 this 的指向，比如 lefex 對象中的方法 addAge 中的 this 是否可以是另外一個對象呢?下節(jié)內(nèi)容講。大家加油。