摘要：箭頭函數(shù)的尋值行為與普通變量相同，在作用域中逐級(jí)尋找。題目這次通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)對(duì)象，并執(zhí)行相同的個(gè)方法。

我們知道this綁定規(guī)則一共有5種情況：

1、默認(rèn)綁定（嚴(yán)格/非嚴(yán)格模式）

2、隱式綁定

3、顯式綁定

4、new綁定

5、箭頭函數(shù)綁定

其實(shí)大部分情況下可以用一句話來(lái)概括，this總是指向調(diào)用該函數(shù)的對(duì)象。

但是對(duì)于箭頭函數(shù)并不是這樣，是根據(jù)外層（函數(shù)或者全局）作用域（詞法作用域）來(lái)決定this。

對(duì)于箭頭函數(shù)的this總結(jié)如下：

箭頭函數(shù)不綁定this，箭頭函數(shù)中的this相當(dāng)于普通變量。

箭頭函數(shù)的this尋值行為與普通變量相同，在作用域中逐級(jí)尋找。

箭頭函數(shù)的this無(wú)法通過(guò)bind，call，apply來(lái)直接修改（可以間接修改）。

改變作用域中this的指向可以改變箭頭函數(shù)的this。

eg. function closure(){()=>{//code }}，在此例中，我們通過(guò)改變封包環(huán)境closure.bind(another)()，來(lái)改變箭頭函數(shù)this的指向。

/**
 * 非嚴(yán)格模式
 */

var name = "window"

var person1 = {
  name: "person1",
  show1: function () {
    console.log(this.name)
  },
  show2: () => console.log(this.name),
  show3: function () {
    return function () {
      console.log(this.name)
    }
  },
  show4: function () {
    return () => console.log(this.name)
  }
}
var person2 = { name: "person2" }

person1.show1()
person1.show1.call(person2)

person1.show2()
person1.show2.call(person2)

person1.show3()()
person1.show3().call(person2)
person1.show3.call(person2)()

person1.show4()()
person1.show4().call(person2)
person1.show4.call(person2)()

空

白

占

位

符

正確答案如下：

person1.show1() // person1，隱式綁定，this指向調(diào)用者 person1 
person1.show1.call(person2) // person2，顯式綁定，this指向 person2

person1.show2() // window，箭頭函數(shù)綁定，this指向外層作用域，即全局作用域
person1.show2.call(person2) // window，箭頭函數(shù)綁定，this指向外層作用域，即全局作用域

person1.show3()() // window，默認(rèn)綁定，這是一個(gè)高階函數(shù)，調(diào)用者是window
                  // 類(lèi)似于`var func = person1.show3()` 執(zhí)行`func()`
person1.show3().call(person2) // person2，顯式綁定，this指向 person2
person1.show3.call(person2)() // window，默認(rèn)綁定，調(diào)用者是window

person1.show4()() // person1，箭頭函數(shù)綁定，this指向外層作用域，即person1函數(shù)作用域
person1.show4().call(person2) // person1，箭頭函數(shù)綁定，
                              // this指向外層作用域，即person1函數(shù)作用域
person1.show4.call(person2)() // person2

最后一個(gè)person1.show4.call(person2)()有點(diǎn)復(fù)雜，我們來(lái)一層一層的剝開(kāi)。

1、首先是var func1 = person1.show4.call(person2)，這是顯式綁定，調(diào)用者是person2，show4函數(shù)指向的是person2。

2、然后是func1()，箭頭函數(shù)綁定，this指向外層作用域，即person2函數(shù)作用域

首先要說(shuō)明的是，箭頭函數(shù)綁定中，this指向外層作用域，并不一定是第一層，也不一定是第二層。

因?yàn)闆](méi)有自身的this，所以只能根據(jù)作用域鏈往上層查找，直到找到一個(gè)綁定了this的函數(shù)作用域，并指向調(diào)用該普通函數(shù)的對(duì)象。

這次通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)對(duì)象，并執(zhí)行相同的4個(gè)show方法。

/**
 * 非嚴(yán)格模式
 */

var name = "window"

function Person (name) {
  this.name = name;
  this.show1 = function () {
    console.log(this.name)
  }
  this.show2 = () => console.log(this.name)
  this.show3 = function () {
    return function () {
      console.log(this.name)
    }
  }
  this.show4 = function () {
    return () => console.log(this.name)
  }
}

var personA = new Person("personA")
var personB = new Person("personB")

personA.show1()
personA.show1.call(personB)

personA.show2()
personA.show2.call(personB)

personA.show3()()
personA.show3().call(personB)
personA.show3.call(personB)()

personA.show4()()
personA.show4().call(personB)
personA.show4.call(personB)()

空

白

占

位

符

正確答案如下：

personA.show1() // personA，隱式綁定，調(diào)用者是 personA
personA.show1.call(personB) // personB，顯式綁定，調(diào)用者是 personB

personA.show2() // personA，首先personA是new綁定，產(chǎn)生了新的構(gòu)造函數(shù)作用域，
                // 然后是箭頭函數(shù)綁定，this指向外層作用域，即personA函數(shù)作用域
personA.show2.call(personB) // personA，同上

personA.show3()() // window，默認(rèn)綁定，調(diào)用者是window
personA.show3().call(personB) // personB，顯式綁定，調(diào)用者是personB
personA.show3.call(personB)() // window，默認(rèn)綁定，調(diào)用者是window

personA.show4()() // personA，箭頭函數(shù)綁定，this指向外層作用域，即personA函數(shù)作用域
personA.show4().call(personB) // personA，箭頭函數(shù)綁定，call并沒(méi)有改變外層作用域，
                              // this指向外層作用域，即personA函數(shù)作用域
personA.show4.call(personB)() // personB，解析同題目1，最后是箭頭函數(shù)綁定，
                              // this指向外層作用域，即改變后的person2函數(shù)作用域

題目一和題目二的區(qū)別在于題目二使用了new操作符。

使用 new 操作符調(diào)用構(gòu)造函數(shù)，實(shí)際上會(huì)經(jīng)歷一下4個(gè)步驟：

創(chuàng)建一個(gè)新對(duì)象；
將構(gòu)造函數(shù)的作用域賦給新對(duì)象（因此this就指向了這個(gè)新對(duì)象）；
執(zhí)行構(gòu)造函數(shù)中的代碼（為這個(gè)新對(duì)象添加屬性）；
返回新對(duì)象。

依次給出console.log輸出的數(shù)值。

var num = 1;
var myObject = {
    num: 2,
    add: function() {
        this.num = 3;
        (function() {
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num)
    }
}
myObject.add();
console.log(myObject.num);
console.log(num);
var sub = myObject.sub;
sub();

答案有兩種情況，分為嚴(yán)格模式和非嚴(yán)格模式。

嚴(yán)格模式下，報(bào)錯(cuò)。TypeError: Cannot read property "num" of undefined

非嚴(yán)格模式下，輸出：1、3、3、4、4

解答過(guò)程：

var num = 1;
var myObject = {
    num: 2,
    add: function() {
        this.num = 3; // 隱式綁定 修改 myObject.num = 3
        (function() {
            console.log(this.num); // 默認(rèn)綁定 輸出 1
            this.num = 4; // 默認(rèn)綁定 修改 window.num = 4
        })();
        console.log(this.num); // 隱式綁定 輸出 3
    },
    sub: function() {
        console.log(this.num) // 因?yàn)閬G失了隱式綁定的myObject，所以使用默認(rèn)綁定 輸出 4
    }
}
myObject.add(); // 1 3
console.log(myObject.num); // 3
console.log(num); // 4
var sub = myObject.sub;//  丟失了隱式綁定的myObject
sub(); // 4

內(nèi)容來(lái)自評(píng)論區(qū)：【進(jìn)階3-1期】JavaScript深入之史上最全--5種this綁定全面解析

分別給出console.log輸出的內(nèi)容。

var obj = {
    say: function () {
        function _say() {
            console.log(this);
        }
        console.log(obj);
        return _say.bind(obj);
    }()
}
obj.say()

從這兩套題，重新認(rèn)識(shí)JS的this、作用域、閉包、對(duì)象

【進(jìn)階1期】 調(diào)用堆棧

【進(jìn)階2期】 作用域閉包

【進(jìn)階3期】 this全面解析

【進(jìn)階4期】 深淺拷貝原理

【進(jìn)階5期】 原型Prototype

【進(jìn)階6期】 高階函數(shù)

【進(jìn)階7期】 事件機(jī)制

【進(jìn)階8期】 Event Loop原理

【進(jìn)階9期】 Promise原理

【進(jìn)階10期】Async/Await原理

【進(jìn)階11期】防抖/節(jié)流原理

【進(jìn)階12期】模塊化詳解

【進(jìn)階13期】ES6重難點(diǎn)

【進(jìn)階14期】計(jì)算機(jī)網(wǎng)絡(luò)概述

【進(jìn)階15期】瀏覽器渲染原理

【進(jìn)階16期】webpack配置

【進(jìn)階17期】webpack原理

【進(jìn)階18期】前端監(jiān)控

【進(jìn)階19期】跨域和安全

【進(jìn)階20期】性能優(yōu)化

【進(jìn)階21期】VirtualDom原理

【進(jìn)階22期】Diff算法

【進(jìn)階23期】MVVM雙向綁定

【進(jìn)階24期】Vuex原理

【進(jìn)階25期】Redux原理

【進(jìn)階26期】路由原理

【進(jìn)階27期】VueRouter源碼解析

【進(jìn)階28期】ReactRouter源碼解析

進(jìn)階系列文章匯總：https://github.com/yygmind/blog，內(nèi)有優(yōu)質(zhì)前端資料，歡迎領(lǐng)取，覺(jué)得不錯(cuò)點(diǎn)個(gè)star。

我是木易楊，網(wǎng)易高級(jí)前端工程師，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。接下來(lái)讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉！