//假設(shè)我們定義一個(gè)人的類
    function Person(name){

    }

    // 方法-介紹你自己(使用this編寫)
    Person.prototype.introduceYourselfWithThis = function () {
        if (Object.hasOwnProperty.call(this, 'name')) {
           return `My name is ${this.name}`;
        } 
        return `I have no name`;
    }

    // 方法-介紹你自己(不使用this編寫)
    Person.prototype.introduceYourself = function (invoker) {
        if (Object.hasOwnProperty.call(invoker, 'name')) {
            return `My name is ${invoker.name}`;
        }
        return `I have no name`;
    }

    //生成兩個(gè)實(shí)例，并為各自的name屬性賦值
    var liLei = new Person();
    liLei.name = 'liLei';
    var hanMeiMei = new Person();
    hanMeiMei.name = 'hanMeiMei';

在上面的簡單示例中，我們定義了一個(gè)不包含任何實(shí)例屬性的人類，并使用不同的方式為其定義介紹你自己這個(gè)方法，第一種定義使用常規(guī)的面向?qū)ο髮懛?，使?code>this獲取上下文對象，獲取實(shí)例的name屬性;第二種定義不使用this,而是將調(diào)用者名稱作為參數(shù)傳遞進(jìn)方法。
我們在控制臺進(jìn)行一些簡單的使用：

那么這兩種不同的寫法區(qū)別到底是什么呢？

• 函數(shù)實(shí)際功能的變化
  從上面的示例中不難看出，當(dāng)開發(fā)中不使用this時(shí)，需要開發(fā)者自行傳入上下文對象，并將其以參數(shù)的形式在函數(shù)執(zhí)行時(shí)傳入，如果傳入的invoker 對象和 this的指向一致，那么結(jié)果就一致，如果不一致，則會造成混亂。

  • 從編碼角度來看
    introduceYourselfWithThis()方法只是introduceYourself(invoker)方法的特例(當(dāng)this === invoker時(shí))。
  • 從方法的含義來看
    定義者希望實(shí)現(xiàn)自我介紹功能而編寫了introduceYourself()方法，可是使用者在閱讀到introduceYourself()的源碼時(shí)看到的代碼表達(dá)的意義是：我告訴你一個(gè)名字，你把它填在'My name is __'這句話中再返回給我。而不是一個(gè)與調(diào)用對象有著緊密聯(lián)系的自我介紹動作。

• 畫蛇添足的參數(shù)傳遞
  在正確的使用過程中，this 和 invoker 的指向是一致的，形參invoker的定義不僅增加了函數(shù)使用的復(fù)雜度，也增加了函數(shù)運(yùn)行的負(fù)擔(dān)，卻沒有為函數(shù)的執(zhí)行帶來任何新的附加信息。

• 重復(fù)的雷同代碼
  如果編碼中不使用this,也就相當(dāng)于漢語中不使用代詞，那么我們就需要在每一個(gè)獨(dú)立的句子中使用完整的信息。為了使introduceYourself()方法能夠正確的執(zhí)行，我們需要在每一個(gè)實(shí)例生成后，為其綁定確切的實(shí)例方法，即：

    var liLei = new Person();
    liLei.name = 'liLei';
    //定義實(shí)例方法
    liLei.introduceYourself = function (){
        return `My name is liLei`;
    };

    var hanMeiMei = new Person();
    hanMeiMei.name = 'hanMeiMei';
    //定義實(shí)例方法
    hanMeiMei.introduceYourself = function (){
        return `My name is hanMeiMei`;
    }

即時(shí)不使用this,你也不會直接陷入無法編寫javascript代碼的境地，只是需要將所有的定義和使用場景全部具體化, 需要手動對所有的具體功能編寫具體實(shí)現(xiàn)，也就是"面向過程"的編程。

================================我是華麗的分割線======================================

【輕松一刻】

話說赤壁之戰(zhàn)后,一日閑來無事，孔明與劉關(guān)張三兄弟一起喝酒。孔明說，我出三道題考考各位學(xué)識修養(yǎng)，如何啊？三兄弟舉手贊同。
孔明：第一題，主公，赤壁之戰(zhàn)發(fā)生在哪里？
劉備：赤壁啊
孔明：答對了，主公果然厲害。第二題，關(guān)將軍，雙方有多少人參戰(zhàn)？
關(guān)羽：聯(lián)軍5萬，曹軍20余萬。
孔明：答對了，關(guān)將軍也是智勇雙全啊。最后一題，他們分別是誰？
張飛：我......我靠

愿你能夠掌握this，不要在自己的代碼里搞出他們分別是誰的尷尬，小心被隊(duì)友活埋。

================================我是華麗的分割線======================================

三. this的一般指向規(guī)則

javascript中有四條關(guān)于this指向的基本規(guī)則。今天，我們將一起通過【碼農(nóng)視角】和【語文老師視角】來分別解讀這些規(guī)則，你會發(fā)現(xiàn)他們理解起來其實(shí)很自然。

規(guī)則1——作為函數(shù)調(diào)用時(shí)，this指向全局對象

瀏覽器中的全局對象，指的是window對象。這一規(guī)則指的就是我們在全局作用域或者函數(shù)作用域中使用function關(guān)鍵字直接聲明或使用函數(shù)表達(dá)式賦值給標(biāo)識符的方式創(chuàng)建的函數(shù)。為了在調(diào)用時(shí)在內(nèi)存中找到所聲明的方法，我們需要一個(gè)標(biāo)識符來指向它的位置，具名函數(shù)可以通過它的名字找到，匿名函數(shù)則需要通過標(biāo)識符來找到。作為函數(shù)調(diào)用的實(shí)質(zhì)，就是通過方法名直或標(biāo)識符找到函數(shù)并執(zhí)行它。

一般什么樣的函數(shù)我們會這樣定義呢？
就是那些不關(guān)注調(diào)用者的函數(shù)，比如上面舉例的addNumber()方法，這類函數(shù)往往是將一步或幾步業(yè)務(wù)邏輯組合在一起，起一個(gè)新的名字便于管理和重用，而并不關(guān)注使用者到底是誰。

語文老師解讀版：
很好理解，當(dāng)你想描述一個(gè)動作卻不知道或者不關(guān)注具體是誰做的，代詞就指向有的人。
比如臧克家同學(xué)在作文里寫的這樣：
有的人活著，但是他已經(jīng)死了;
有的人死了，但是他還活著;
上文中的他指誰？指有的人；那有的人是誰？隨便，愛誰誰。

規(guī)則2——作為方法調(diào)用時(shí)，this指向上下文對象

上文中我們看到函數(shù)的作用域鏈上是包含Object對象的，所以函數(shù)可以被當(dāng)做對象來理解。當(dāng)函數(shù)作為對象被賦值在另一個(gè)對象的屬性上時(shí)，這個(gè)對象的屬性值里會保存函數(shù)的地址，因?yàn)橛煤瘮?shù)作為賦值運(yùn)算的右值時(shí)是一個(gè)引用類型賦值。如果這個(gè)函數(shù)正好又是一個(gè)匿名函數(shù)，那么執(zhí)行時(shí)只能通過對象屬性中記錄的地址信息來找到這個(gè)函數(shù)在內(nèi)存中的位置，從而執(zhí)行它。所以當(dāng)函數(shù)作為方法調(diào)用時(shí)，this中包含的信息的本質(zhì)是這個(gè)函數(shù)執(zhí)行時(shí)是怎么被找查找到的。答案就是：通過this所指向的這個(gè)對象的屬性找到的。

一般什么樣的函數(shù)我們會這樣定義呢？
作為方法定義的函數(shù)，往往是另一個(gè)抽象合集的具體實(shí)現(xiàn)。比如前例的addNumber()這個(gè)方法，只是將兩個(gè)數(shù)字相加這樣一個(gè)抽象動作，至于是誰通過什么方式來執(zhí)行這個(gè)計(jì)算過程，無所謂，它可以概括所有對象將兩個(gè)數(shù)字相加并給出結(jié)果這一動作?？扇绻鳛橐粋€(gè)對象方法來調(diào)用時(shí)，就有了更明確的現(xiàn)實(shí)指向意義:

• Computer.addNumber()表達(dá)了計(jì)算機(jī)通過軟硬件聯(lián)合作用而給出結(jié)果的過程
• Calculator.addNumber()表達(dá)了計(jì)算器通過簡易硬件計(jì)算給出結(jié)果的過程
• Abacus.addNumber()表達(dá)了算盤通過加減珠子的方式給出結(jié)果的過程
• ...

語文老師解讀版：
當(dāng)你想知道一個(gè)代詞具體指的是誰時(shí)，當(dāng)然需要聯(lián)系上下文語境進(jìn)行理解。

規(guī)則3——作為構(gòu)造函數(shù)使用時(shí),this指向生成的實(shí)例

作為構(gòu)造函數(shù)使用，就是new + 構(gòu)造函數(shù)名的方式調(diào)用的情況。
js引擎在調(diào)用new操作符的邏輯可以用偽代碼表示為:

new Person('liLei') = {
    //生成一個(gè)新的空對象
    var obj = {}; 
    //空對象的原型鏈指向構(gòu)造函數(shù)的原型對象
    obj.__proto__ = Person.prototype; 
    //使用call方法執(zhí)行構(gòu)造函數(shù)并顯式指定上下文對象為新生成的obj對象
    var result = Person.call(obj,"liLei"); 
    // 如果構(gòu)造函數(shù)調(diào)用后返回一個(gè)對象，就return這個(gè)對象，否則return新生成的obj對象
    return typeof result === 'object'? result : obj;
}

暫不考慮構(gòu)造函數(shù)有返回值的情況，那么很容易就可以明白this為什么指向?qū)嵗?，因?yàn)轭惗x函數(shù)在執(zhí)行的時(shí)候顯式地綁定了this為新生成的對象，也就是調(diào)用new操作符后得到的實(shí)例對象。

語文老師解讀版：
有些同學(xué)喜歡抄襲，抄襲這個(gè)動作可以描述為："把一份作業(yè)Copy一遍，在最后寫上自己的名字。"。如果李雷是喜歡抄襲的人之一，那么他就掌握了"抄襲"這個(gè)方法，那你覺得他每次抄完作業(yè)后在署名的地方應(yīng)該寫自己的名字"李雷"還是寫這一類人的總稱"喜歡抄襲的人"呢？
抬杠的那個(gè)同學(xué)，我記住你了！放學(xué)別走！

規(guī)則4——使用call/apply/bind方法顯式指定this

call/bind/apply這三個(gè)方法是javascript動態(tài)性的重要組成部分，后續(xù)的篇章會有詳細(xì)的講解。這里只看一下API用法，了解一下其對于this指向的影響：

• func.call(this, arg1, arg2...)
• func.apply(this, [arg1, arg2...])
• func.bind(this[, arg1[, arg2[, ...]]])

這個(gè)規(guī)則很好理解，就是說函數(shù)執(zhí)行時(shí)遇到函數(shù)體里有this的語句都用顯式指定的對象來替換。

語文老師解讀版：
就是直接告訴你下文中的代詞指什么，比如：×××憲法(以下簡稱"本法")，那讀者當(dāng)然就知道后面所說的"本法"指誰。

四. 基本規(guī)則示例

為了更清晰地看到上面兩條原則的區(qū)別，我們來看一個(gè)示例：

        var heroIdentity = '[Function Version]Iron Man';

        function checkIdentity(){
            return this.heroIdentity;
        } 

        var obj = {
            name:'Tony Stark',
            heroIdentity:'[Method Version]Iron Man',
            checkIdentityFromObj:checkIdentity
        }

        function TheAvenger(name){
            this.heroIdentity = name;
            this.checkIdentityFromNew = checkIdentity;
        }

        var tony = new TheAvenger('[New Verison]Iron Man');

        console.log('1.直接調(diào)用方法時(shí)結(jié)果為:',checkIdentity());
        console.log('2.通過obj.checkIdentityFromObj調(diào)用同一個(gè)方法結(jié)果為：',obj.checkIdentityFromObj());
        console.log('3.new操作符生成的對象:',tony.checkIdentityFromNew());
        console.log('4.call方法顯示修改this指向:',checkIdentity.call({heroIdentity:'[Call Version]Iron Man'}));

控制臺輸出的結(jié)果是這樣的：

同一個(gè)方法，同一個(gè)this,調(diào)用的方式不同，得到的結(jié)果也不同。

五. 后記

在基礎(chǔ)面前，一切技巧都是浮云。

如果認(rèn)為明白了this的基本規(guī)則就可以為所欲為,那你就真的too young too simple了。
了解了基本指向規(guī)則，只能讓你在開發(fā)中自己盡可能少挖坑或者不挖坑。但是想要填別人的坑或者讀懂大師級代碼中簡潔優(yōu)雅的用法，還需要更多的修煉和反思。實(shí)際應(yīng)用中許多復(fù)雜的使用場景是很難一下子搞明白this的指向以及為什么要指定this的指向的。
筆者將在《javascript基礎(chǔ)修煉(3)——What's this（下）》中詳細(xì)講述開發(fā)中千奇百怪的this。欲知后事如何，先點(diǎn)個(gè)贊先吧！

參考文章：
[1].js中的new()到底做了什么
[2].ECMA-262-3 in detail. Chapter 1. Execution Contexts