ES6箭頭函數(shù)體中this指向哪里？

Half 發(fā)布于2019-08-22 15:48 / 1151人閱讀

摘要：注意因為箭頭函數(shù)內(nèi)部的是指向外層代碼塊的最近的，例中的函數(shù)的，所以我們可以通過改變外層代碼塊的的指向從而改變箭頭函數(shù)中的指向例中使用了函數(shù)的方法。

一、this關(guān)鍵字小測試

ES6箭頭函數(shù)體中的this指向哪里？

在回答這個問題之前先來揣揣你對this關(guān)鍵字的了解程度：
（讓我們回到ES6之前）
題：

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

var b = obj.a;
b();

問：打印出的this的值？
再來幾個選項：

window

obj

document

obj.a

答案是window（可以在控制臺運(yùn)行一下）

什么！什么情況！發(fā)生了什么？

一句話解釋：
一般的，this指向函數(shù)運(yùn)行（調(diào)用）時所在的執(zhí)行環(huán)境【《JavaScript高級程序設(shè)計》4.2節(jié)執(zhí)行環(huán)境及作用域】的（變量）對象（簡單地，this指向函數(shù)的調(diào)用者）

分析代碼：

var b = obj.a;    // ==>相當(dāng)于
var b = function() {
    console.log(this);
}

函數(shù)調(diào)用時（b();）其所在的執(zhí)行環(huán)境是全局環(huán)境，所以this指向全局變量對象window

二、ES6箭頭函數(shù)

如果你覺得以上這些都知道了（我會！我會?。┠敲淳屠^續(xù)吧~~

（來到ES6箭頭函數(shù)）

例1【阮一峰《ECMAScript 6 入門》-7.函數(shù)的擴(kuò)展：箭頭函數(shù)】

我將阮老師的例子代碼修改了一下：
（普通函數(shù)）

function foo() {
    console.log("id1:", this.id);
    console.log("this1:", this);
    setTimeout(function() {
        console.log("id2:", this.id);
        console.log("this2:", this);
    }, 0);
}

var id = 21;

foo();

// Chrome
// id1: 21
// this1: window
// id2: 21
// this2: window

foo.call({id: 42});

// Chrome
// id1: 42
// this1: {id: 42}
// id2: 21
// this2: window

注意：超時調(diào)用（setTimeout回調(diào)）的代碼都是在全局作用域環(huán)境中執(zhí)行的，因此（setTimeout回調(diào)）函數(shù)中this的值在非嚴(yán)格模式下指向window對象，在嚴(yán)格模式下是undefined

例如

var obj = {
    console.log(this);
    setTimeout(function() {
        console.log(this);
    }, 0);
}

obj.a();

// Chrome
// {a: f}
// window

回到例1

我們使用foo函數(shù)的call方法改變了foo函數(shù)調(diào)用時函數(shù)體內(nèi)this的指向（{id: 42}這個對象），但setTimeout回調(diào)函數(shù)中的this依舊指向window對象（因為在全局環(huán)境中運(yùn)行）。

接下來再將例1改寫一下，將foo函數(shù)中的setTimeout回調(diào)函數(shù)改成箭頭函數(shù)的形式：

例2
（箭頭函數(shù)）

function foo() {
    console.log("id1:", this.id);
    console.log("this1:", this);
    setTimeout(() => {
        console.log("id2:", this.id);
        console.log("this2:", this);
    }, 0);
}

var id = 21;

foo();

// Chrome
// id1: 21
// this1: window
// id2: 21
// this2: window

foo.call({id: 42});

// Chrome
// id1: 42
// this1: {id: 42}
// id2: 42
// this2: {id: 42}

foo();的輸出結(jié)果沒有變化，但foo.call({id: 42});的輸出結(jié)果改變了。

到底發(fā)生了什么？

在這里直接給出結(jié)論：
箭頭函數(shù)根本沒有自己的this，導(dǎo)致內(nèi)部的this指向了外層代碼的this，這個指向在定義時就已經(jīng)確定而不會在調(diào)用時指向其執(zhí)行環(huán)境的（變量）對象。

注意：因為箭頭函數(shù)內(nèi)部的this是指向外層代碼塊的this（最近的this，例2中的foo函數(shù)）的，所以我們可以通過改變外層代碼塊的this的指向從而改變箭頭函數(shù)中this的指向（例2中使用了foo函數(shù)的call方法）。

重新解釋例2

因為箭頭函數(shù)（setTimeout回調(diào)）沒有自己的this，導(dǎo)致其內(nèi)部的this引用了外層代碼塊的this，即foo函數(shù)的this，

（要注意：在定義階段（調(diào)用函數(shù)前），foo函數(shù)的this的值并不確定【《JavaScript高級程序設(shè)計》第三版5.5.4函數(shù)內(nèi)部屬性】，但箭頭函數(shù)的this自定義階段開始就指向foo函數(shù)的this了）

又因為使用call方法改變了foo函數(shù)運(yùn)行（調(diào)用）時其函數(shù)體內(nèi)this的指向（重新指向?qū)ο?b>{id: 42}）從而使箭頭函數(shù)中this的指向發(fā)生變化，最后輸出例2所示結(jié)果。

三、例子總結(jié)

到這里，我想小伙伴們應(yīng)該是比較清楚了，那么不妨去看看阮一峰老師的《ECMAScript 6 入門》函數(shù)的擴(kuò)展一節(jié)箭頭函數(shù)部分的一個問題示例：“請問下面的代碼中有幾個this（滑稽）”

加深印象

例3【阮一峰《ECMAScript 6 入門》-19.Class基本語法：this的指向】

class Logger {
  constructor() {
    this.printName = (name = "there") => {
      this.print(`Hello ${name}`);
    };
  }

  // ...
}

箭頭函數(shù)中的this指向constructor構(gòu)造方法內(nèi)部的this，由于此時constructor中的this尚未獲得值，當(dāng)通過new命令生成對象實例時，將會自動調(diào)用constructor方法，constructor的this才能指向該實例對象，在此過程中，箭頭函數(shù)中的this一直引用著constructor中的this，當(dāng)constructor中this發(fā)生變化，箭頭函數(shù)的this也會一并發(fā)生變化。

若有錯誤，請指出批評！！

云服務(wù)器 GPU云服務(wù)器改變this指向 this的指向箭頭函數(shù) 指向函數(shù)的指針

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93762.html

發(fā)表評論

登陸后可評論

0條評論

Half

男|高級講師

我要關(guān)注我要私信

TA的文章

Nextarray：雙十一，VPS和獨服5折優(yōu)惠，月付0.99美金起，特價雙E5/192G內(nèi)存/6

閱讀 1550·2021-11-04 16:10
【小白+python+selenium庫+圖片爬取+反爬+資料】超詳細(xì)新手實現(xiàn)（01）webdriv

閱讀 2806·2021-09-30 09:48
mockjs讓前端開發(fā)獨立于后端

閱讀 2849·2019-08-29 11:31
css定位案例探討（position屬性詳解）

閱讀 1587·2019-08-28 18:22
瀏覽器內(nèi)核

閱讀 3239·2019-08-26 13:44
DIY 一個 Vuex 持久化插件

閱讀 1329·2019-08-26 13:42
數(shù)據(jù)類型對象

閱讀 2855·2019-08-26 10:20
讓前端監(jiān)控數(shù)據(jù)采集更高效

閱讀 764·2019-08-23 17:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES6箭頭函數(shù)體中this指向哪里？

相關(guān)文章

ES6精華：函數(shù)擴(kuò)展

**【ES6系列】函數(shù)部分**

**從-1開始的ES6探索之旅01：顏文字成精的箭頭函數(shù) 上篇 - 大哥，你指哪呢？**

**論普通函數(shù)和箭頭函數(shù)的區(qū)別以及箭頭函數(shù)的注意事項、不適用場景**

**關(guān)于ES6中箭頭函數(shù)的this問題**

發(fā)表評論

0條評論

Half

男|高級講師

TA的文章

Nextarray：雙十一，VPS和獨服5折優(yōu)惠，月付0.99美金起，特價雙E5/192G內(nèi)存/6

【小白+python+selenium庫+圖片爬取+反爬+資料】超詳細(xì)新手實現(xiàn)（01）webdriv

mockjs讓前端開發(fā)獨立于后端

css定位案例探討（position屬性詳解）

瀏覽器內(nèi)核

DIY 一個 Vuex 持久化插件

數(shù)據(jù)類型對象

讓前端監(jiān)控數(shù)據(jù)采集更高效

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES6箭頭函數(shù)體中this指向哪里？

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES6箭頭函數(shù)體中this指向哪里？