摘要：的構(gòu)造函數(shù)等同于下。通過(guò)操作符調(diào)用構(gòu)造函數(shù)，會(huì)經(jīng)歷以下個(gè)階段。創(chuàng)建一個(gè)新的對(duì)象將構(gòu)造函數(shù)的指向這個(gè)新對(duì)象指向構(gòu)造函數(shù)的代碼，為這個(gè)對(duì)象添加屬性，方法等返回新對(duì)象。前端基礎(chǔ)進(jìn)階系列目錄

我們?cè)趯W(xué)習(xí)JavaScript的過(guò)程中，由于對(duì)一些概念理解得不是很清楚，但是又想要通過(guò)一些方式把它記下來(lái)，于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結(jié)論。

危害比較大的是，有的不準(zhǔn)確的結(jié)論在網(wǎng)上還廣為流傳。

比如對(duì)于this指向的理解中，有這樣一種說(shuō)法：誰(shuí)調(diào)用它，this就指向誰(shuí)。在我剛開(kāi)始學(xué)習(xí)this的時(shí)候，我是非常相信這句話的。因?yàn)樵谝恍┣闆r下，這樣理解也還算說(shuō)得通。可是我常常會(huì)在開(kāi)發(fā)中遇到一些不一樣的情況，一個(gè)由于this的錯(cuò)誤調(diào)用，可以讓我懵逼一整天。那個(gè)時(shí)候我也查資料，在群里問(wèn)大神，可是我仍然搞不清楚“我特么到底錯(cuò)哪里了”。其實(shí)只是因?yàn)槲倚闹杏幸粋€(gè)不太準(zhǔn)確的結(jié)論。

所以，我認(rèn)為需要有這樣一篇文章，來(lái)幫助大家全方位的解讀this。讓大家對(duì)this，有一個(gè)正確的，全面的認(rèn)知。

在這之前，我們需要來(lái)回顧一下執(zhí)行上下文。

在前面幾篇文章中，我有好幾個(gè)地方都提到執(zhí)行上下文的生命周期，為了防止大家沒(méi)有記住，再次來(lái)回顧一下，如下圖。

在執(zhí)行上下文的創(chuàng)建階段，會(huì)分別生成變量對(duì)象，建立作用域鏈，確定this指向。其中變量對(duì)象與作用域鏈我們都已經(jīng)仔細(xì)總結(jié)過(guò)了，而這里的關(guān)鍵，就是確定this指向。

首先我們需要得出一個(gè)非常重要一定要牢記于心的結(jié)論，this的指向，是在函數(shù)被調(diào)用的時(shí)候確定的。也就是執(zhí)行上下文被創(chuàng)建時(shí)確定的。因此，一個(gè)函數(shù)中的this指向，可以是非常靈活的。比如下面的例子中，同一個(gè)函數(shù)由于調(diào)用方式的不同，this指向了不一樣的對(duì)象。

var a = 10;
var obj = {
    a: 20
}

function fn () {
    console.log(this.a);
}

fn(); // 10
fn.call(obj); // 20

除此之外，在函數(shù)執(zhí)行過(guò)程中，this一旦被確定，就不可更改了。

var a = 10;
var obj = {
    a: 20
}

function fn () {
    this = obj; // 這句話試圖修改this，運(yùn)行后會(huì)報(bào)錯(cuò)
    console.log(this.a);
}

fn();

一、全局對(duì)象中的this

關(guān)于全局對(duì)象的this，我之前在總結(jié)變量對(duì)象的時(shí)候提到過(guò)，它是一個(gè)比較特殊的存在。全局環(huán)境中的this，指向它本身。因此，這也相對(duì)簡(jiǎn)單，沒(méi)有那么多復(fù)雜的情況需要考慮。

// 通過(guò)this綁定到全局對(duì)象
this.a2 = 20;

// 通過(guò)聲明綁定到變量對(duì)象，但在全局環(huán)境中，變量對(duì)象就是它自身
var a1 = 10;

// 僅僅只有賦值操作，標(biāo)識(shí)符會(huì)隱式綁定到全局對(duì)象
a3 = 30;

// 輸出結(jié)果會(huì)全部符合預(yù)期
console.log(a1);
console.log(a2);
console.log(a3);

二、函數(shù)中的this

在總結(jié)函數(shù)中this指向之前，我想我們有必要通過(guò)一些奇怪的例子，來(lái)感受一下函數(shù)中this的捉摸不定。

// demo01
var a = 20;
function fn() {
    console.log(this.a);
}
fn();

// demo02
var a = 20;
function fn() {
    function foo() {
        console.log(this.a);
    }
    foo();
}
fn();

// demo03
var a = 20;
var obj = {
    a: 10,
    c: this.a + 20,
    fn: function () {
        return this.a;
    }
}

console.log(obj.c);
console.log(obj.fn());

這幾個(gè)例子需要花點(diǎn)時(shí)間仔細(xì)感受一下，如果你暫時(shí)沒(méi)想明白怎么回事，也不用著急，我們一點(diǎn)一點(diǎn)來(lái)分析。

分析之前，我們先直接了當(dāng)拋出結(jié)論。

在一個(gè)函數(shù)上下文中，this由調(diào)用者提供，由調(diào)用函數(shù)的方式來(lái)決定。如果調(diào)用者函數(shù)，被某一個(gè)對(duì)象所擁有，那么該函數(shù)在調(diào)用時(shí)，內(nèi)部的this指向該對(duì)象。如果函數(shù)獨(dú)立調(diào)用，那么該函數(shù)內(nèi)部的this，則指向undefined。但是在非嚴(yán)格模式中，當(dāng)this指向undefined時(shí)，它會(huì)被自動(dòng)指向全局對(duì)象。

從結(jié)論中我們可以看出，想要準(zhǔn)確確定this指向，找到函數(shù)的調(diào)用者以及區(qū)分他是否是獨(dú)立調(diào)用就變得十分關(guān)鍵。

// 為了能夠準(zhǔn)確判斷，我們?cè)诤瘮?shù)內(nèi)部使用嚴(yán)格模式，因?yàn)榉菄?yán)格模式會(huì)自動(dòng)指向全局
function fn() {
    "use strict";
    console.log(this);
}

fn();  // fn是調(diào)用者，獨(dú)立調(diào)用
window.fn();  // fn是調(diào)用者，被window所擁有

在上面的簡(jiǎn)單例子中，fn()作為獨(dú)立調(diào)用者，按照定義的理解，它內(nèi)部的this指向就為undefined。而window.fn()則因?yàn)閒n被window所擁有，內(nèi)部的this就指向了window對(duì)象。

那么掌握了這個(gè)規(guī)則，現(xiàn)在回過(guò)頭去看看上面的三個(gè)例子，通過(guò)添加/去除嚴(yán)格模式，那么你就會(huì)發(fā)現(xiàn)，原來(lái)this已經(jīng)變得不那么虛無(wú)縹緲，已經(jīng)有跡可循了。

但是我們需要特別注意的是demo03。在demo03中，對(duì)象obj中的c屬性使用this.a + 20來(lái)計(jì)算。這里我們需要明確的一點(diǎn)是，多帶帶的{}是不會(huì)形成新的作用域的，因此這里的this.a，由于并沒(méi)有作用域的限制，所以它仍然處于全局作用域之中。所以這里的this其實(shí)是指向的window對(duì)象。

那么我們修改一下demo03的代碼，大家可以思考一下會(huì)發(fā)生什么變化。

"use strict";
var a = 20;
function foo () {
    var a = 1;
    var obj = {
        a: 10,
        c: this.a + 20,
        fn: function () {
            return this.a;
        }
    }
    return obj.c;

}
console.log(foo());    // ？
console.log(window.foo());  // ?

實(shí)際開(kāi)發(fā)中，并不推薦這樣使用this；
上面多次提到的嚴(yán)格模式，需要大家認(rèn)真對(duì)待，因?yàn)樵趯?shí)際開(kāi)發(fā)中，現(xiàn)在基本已經(jīng)全部采用嚴(yán)格模式了，而最新的ES6，也是默認(rèn)支持嚴(yán)格模式。

再來(lái)看一些容易理解錯(cuò)誤的例子，加深一下對(duì)調(diào)用者與是否獨(dú)立運(yùn)行的理解。

var a = 20;
var foo = {
    a: 10,
    getA: function () {
        return this.a;
    }
}
console.log(foo.getA()); // 10

var test = foo.getA;
console.log(test());  // 20

foo.getA()中，getA是調(diào)用者，他不是獨(dú)立調(diào)用，被對(duì)象foo所擁有，因此它的this指向了foo。而test()作為調(diào)用者，盡管他與foo.getA的引用相同，但是它是獨(dú)立調(diào)用的，因此this指向undefined，在非嚴(yán)格模式，自動(dòng)轉(zhuǎn)向全局window。

稍微修改一下代碼，大家自行理解。

var a = 20;
function getA() {
    return this.a;
}
var foo = {
    a: 10,
    getA: getA
}
console.log(foo.getA());  // 10

靈機(jī)一動(dòng)，再來(lái)一個(gè)。如下例子。

function foo() {
    console.log(this.a)
}

function active(fn) {
    fn(); // 真實(shí)調(diào)用者，為獨(dú)立調(diào)用
}

var a = 20;
var obj = {
    a: 10,
    getA: foo
}

active(obj.getA);

三、使用call，apply顯示指定this

JavaScript內(nèi)部提供了一種機(jī)制，讓我們可以自行手動(dòng)設(shè)置this的指向。它們就是call與apply。所有的函數(shù)都具有著兩個(gè)方法。它們除了參數(shù)略有不同，其功能完全一樣。它們的第一個(gè)參數(shù)都為this將要指向的對(duì)象。

如下例子所示。fn并非屬于對(duì)象obj的方法，但是通過(guò)call，我們將fn內(nèi)部的this綁定為obj，因此就可以使用this.a訪問(wèn)obj的a屬性了。這就是call/apply的用法。

function fn() {
    console.log(this.a);
}
var obj = {
    a: 20
}

fn.call(obj);

而call與applay后面的參數(shù)，都是向?qū)⒁獔?zhí)行的函數(shù)傳遞參數(shù)。其中call以一個(gè)一個(gè)的形式傳遞，apply以數(shù)組的形式傳遞。這是他們唯一的不同。

function fn(num1, num2) {
    console.log(this.a + num1 + num2);
}
var obj = {
    a: 20
}

fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

因?yàn)閏all/apply的存在，這讓JavaScript變得十分靈活。因此就讓call/apply擁有了很多有用處的場(chǎng)景。簡(jiǎn)單總結(jié)幾點(diǎn)，也歡迎大家補(bǔ)充。

將類(lèi)數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組

function exam(a, b, c, d, e) {

    // 先看看函數(shù)的自帶屬性 arguments 什么是樣子的
    console.log(arguments);

    // 使用call/apply將arguments轉(zhuǎn)換為數(shù)組, 返回結(jié)果為數(shù)組，arguments自身不會(huì)改變
    var arg = [].slice.call(arguments);

    console.log(arg);
}

exam(2, 8, 9, 10, 3);

// result:
// { "0": 2, "1": 8, "2": 9, "3": 10, "4": 3 }
// [ 2, 8, 9, 10, 3 ]
//
// 也常常使用該方法將DOM中的nodelist轉(zhuǎn)換為數(shù)組
// [].slice.call( document.getElementsByTagName("li") );

根據(jù)自己的需要靈活修改this指向

var foo = {
    name: "joker",
    showName: function() {
      console.log(this.name);
    }
}
var bar = {
    name: "rose"
}
foo.showName.call(bar);

實(shí)現(xiàn)繼承

// 定義父級(jí)的構(gòu)造函數(shù)
var Person = function(name, age) {
    this.name = name;
    this.age  = age;
    this.gender = ["man", "woman"];
}

// 定義子類(lèi)的構(gòu)造函數(shù)
var Student = function(name, age, high) {

    // use call
    Person.call(this, name, age);
    this.high = high;
}
Student.prototype.message = function() {
    console.log("name:"+this.name+", age:"+this.age+", high:"+this.high+", gender:"+this.gender[0]+";");
}

new Student("xiaom", 12, "150cm").message();

// result
// ----------
// name:xiaom, age:12, high:150cm, gender:man;

簡(jiǎn)單給有面向?qū)ο蠡A(chǔ)的朋友解釋一下。在Student的構(gòu)造函數(shù)中，借助call方法，將父級(jí)的構(gòu)造函數(shù)執(zhí)行了一次，相當(dāng)于將Person中的代碼，在Sudent中復(fù)制了一份，其中的this指向?yàn)閺腟tudent中new出來(lái)的實(shí)例對(duì)象。call方法保證了this的指向正確，因此就相當(dāng)于實(shí)現(xiàn)了繼承。Student的構(gòu)造函數(shù)等同于下。

var Student = function(name, age, high) {
    this.name = name;
    this.age  = age;
    this.gender = ["man", "woman"];
    // Person.call(this, name, age); 這一句話，相當(dāng)于上面三句話，因此實(shí)現(xiàn)了繼承
    this.high = high;
}

在向其他執(zhí)行上下文的傳遞中，確保this的指向保持不變

如下面的例子中，我們期待的是getA被obj調(diào)用時(shí)，this指向obj，但是由于匿名函數(shù)的存在導(dǎo)致了this指向的丟失，在這個(gè)匿名函數(shù)中this指向了全局，因此我們需要想一些辦法找回正確的this指向。

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }, 1000)
    }
}

obj.getA();

常規(guī)的解決辦法很簡(jiǎn)單，就是使用一個(gè)變量，將this的引用保存起來(lái)。我們常常會(huì)用到這方法，但是我們也要借助上面講到過(guò)的知識(shí)，來(lái)判斷this是否在傳遞中被修改了，如果沒(méi)有被修改，就沒(méi)有必要這樣使用了。

var obj = {
    a: 20,
    getA: function() {
        var self = this;
        setTimeout(function() {
            console.log(self.a)
        }, 1000)
    }
}

另外就是借助閉包與apply方法，封裝一個(gè)bind方法。

function bind(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    }
}

var obj = {
    a: 20,
    getA: function() {
        setTimeout(bind(function() {
            console.log(this.a)
        }, this), 1000)
    }
}

obj.getA();

當(dāng)然，也可以使用ES5中已經(jīng)自帶的bind方法。它與我上面封裝的bind方法是一樣的效果。

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }.bind(this), 1000)
    }
}

四、構(gòu)造函數(shù)與原型方法上的this

在封裝對(duì)象的時(shí)候，我們幾乎都會(huì)用到this，但是，只有少數(shù)人搞明白了在這個(gè)過(guò)程中的this指向，就算我們理解了原型，也不一定理解了this。所以這一部分，我認(rèn)為將會(huì)為這篇文章最重要最核心的部分。理解了這里，將會(huì)對(duì)你學(xué)習(xí)JS面向?qū)ο螽a(chǎn)生巨大的幫助。

結(jié)合下面的例子，我在例子拋出幾個(gè)問(wèn)題大家思考一下。

function Person(name, age) {

    // 這里的this指向了誰(shuí)?
    this.name = name;
    this.age = age;   
}

Person.prototype.getName = function() {

    // 這里的this又指向了誰(shuí)？
    return this.name;
}

// 上面的2個(gè)this，是同一個(gè)嗎，他們是否指向了原型對(duì)象？

var p1 = new Person("Nick", 20);
p1.getName();

我們已經(jīng)知道，this，是在函數(shù)調(diào)用過(guò)程中確定，因此，搞明白new的過(guò)程中到底發(fā)生了什么就變得十分重要。

通過(guò)new操作符調(diào)用構(gòu)造函數(shù)，會(huì)經(jīng)歷以下4個(gè)階段。

創(chuàng)建一個(gè)新的對(duì)象；

將構(gòu)造函數(shù)的this指向這個(gè)新對(duì)象；

指向構(gòu)造函數(shù)的代碼，為這個(gè)對(duì)象添加屬性，方法等；

返回新對(duì)象。

因此，當(dāng)new操作符調(diào)用構(gòu)造函數(shù)時(shí)，this其實(shí)指向的是這個(gè)新創(chuàng)建的對(duì)象，最后又將新的對(duì)象返回出來(lái)，被實(shí)例對(duì)象p1接收。因此，我們可以說(shuō)，這個(gè)時(shí)候，構(gòu)造函數(shù)的this，指向了新的實(shí)例對(duì)象，p1。

而原型方法上的this就好理解多了，根據(jù)上邊對(duì)函數(shù)中this的定義，p1.getName()中的getName為調(diào)用者，他被p1所擁有，因此getName中的this，也是指向了p1。

好啦，我所知道的，關(guān)于this的一切，已經(jīng)總結(jié)完了，希望大家在閱讀之后，能夠真正學(xué)到東西，然后給我點(diǎn)個(gè)贊^_^。如果你發(fā)現(xiàn)有什么錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論中指出，我會(huì)盡快修改。先謝過(guò)了。

前端基礎(chǔ)進(jìn)階系列目錄