亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Half / 1225人閱讀

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

一、this關(guān)鍵字小測(cè)試 
ES6箭頭函數(shù)體中的this指向哪里？

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

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

var b = obj.a;
b();

問(wèn)：打印出的this的值？
再來(lái)幾個(gè)選項(xiàng)：

window

obj

document

obj.a

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

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

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

分析代碼：

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

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

二、ES6箭頭函數(shù) 
如果你覺(jué)得以上這些都知道了（我會(huì)！我會(huì)?。┠敲淳屠^續(xù)吧~~

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

例1【阮一峰《ECMAScript 6 入門(mén)》-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

注意：超時(shí)調(diào)用（setTimeout回調(diào)）的代碼都是在全局作用域環(huán)境中執(zhí)行的，因此（setTimeout回調(diào)）函數(shù)中this的值在非嚴(yán)格模式下指向window對(duì)象，在嚴(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í)函數(shù)體內(nèi)this的指向（{id: 42}這個(gè)對(duì)象），但setTimeout回調(diào)函數(shù)中的this依舊指向window對(duì)象（因?yàn)樵谌汁h(huán)境中運(yùn)行）。

接下來(lái)再將例1改寫(xiě)一下，將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é)果沒(méi)有變化，但foo.call({id: 42});的輸出結(jié)果改變了。

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

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

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

重新解釋例2

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

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

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

三、例子總結(jié)

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

加深印象

例3【阮一峰《ECMAScript 6 入門(mén)》-19.Class基本語(yǔ)法：this的指向】

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

  // ...
}

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

若有錯(cuò)誤，請(qǐng)指出批評(píng)??！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93762.html

相關(guān)文章

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

    摘要：在函數(shù)方面的擴(kuò)展比較豐富也很實(shí)用，本篇概括了這中的精華知識(shí)。所以無(wú)法成為構(gòu)造函數(shù)，不能使用操作符。參數(shù)將擴(kuò)展運(yùn)算符作用于參數(shù)，即為參數(shù)。聲明式，直接為函數(shù)名。通過(guò)構(gòu)造函數(shù)生成的，為。函數(shù)的屬性，在其描述對(duì)象的屬性上，為函數(shù)名。 ES6在函數(shù)方面的擴(kuò)展比較豐富也很實(shí)用，本篇概括了這中的精華知識(shí)。 1 箭頭函數(shù) 箭頭函數(shù)是ES6中定義函數(shù)的新形式。 新形式不僅簡(jiǎn)化了定義方式，更為函數(shù)本身...

    lansheng228 評(píng)論0 收藏0

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

    摘要：正是因?yàn)樗鼪](méi)有，所以也就不能用作構(gòu)造函數(shù)。不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用命令，否則會(huì)拋出一個(gè)錯(cuò)誤。不可以使用對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。 箭頭函數(shù) 在之前ES5的版本中，我們定義一個(gè)函數(shù)的形式如下： function a() { // do something…… } 但是在ES6中，則新增了箭頭函數(shù)的方式，ES6中允許使用箭頭（=>）來(lái)定義函數(shù)。 () => { ...

    enda 評(píng)論0 收藏0

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

    摘要：基礎(chǔ)語(yǔ)法參數(shù)參數(shù)參數(shù)函數(shù)聲明參數(shù)參數(shù)參數(shù)表達(dá)式單一相當(dāng)于參數(shù)參數(shù)參數(shù)表達(dá)式當(dāng)只有一個(gè)參數(shù)時(shí)，圓括號(hào)是可選的單一參數(shù)函數(shù)聲明單一參數(shù)函數(shù)聲明沒(méi)有參數(shù)的函數(shù)應(yīng)該寫(xiě)成一對(duì)圓括號(hào)。 溫馨提示：作者的爬坑記錄，對(duì)你等大神完全沒(méi)有價(jià)值，別在我這浪費(fèi)生命溫馨提示-續(xù)：你們要非得看，我也攔不住，但是至少得準(zhǔn)備個(gè)支持ES6的Chrome瀏覽器吧？ 之前在某些大神的代碼中出現(xiàn)一串神秘符號(hào)類似于num =>...

    Snailclimb 評(píng)論0 收藏0

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

    摘要：第二種情況是箭頭函數(shù)的如果指向普通函數(shù)它的繼承于該普通函數(shù)。箭頭函數(shù)的指向全局，使用會(huì)報(bào)未聲明的錯(cuò)誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數(shù)是ES6的API，相信很多人都知道，因?yàn)槠湔Z(yǔ)法上相對(duì)于普通函數(shù)更簡(jiǎn)潔，深受大家的喜愛(ài)。就是這種我們?nèi)粘ｉ_(kāi)發(fā)中一直在使用的API...

    paulquei 評(píng)論0 收藏0

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

    摘要：對(duì)象的指向是可變的，但是在箭頭函數(shù)中，它是固定的。同樣的由于箭頭函數(shù)沒(méi)有自己的所以傳統(tǒng)的顯性綁定無(wú)效內(nèi)部的指向外部在的學(xué)習(xí)中，的指向問(wèn)題一直是個(gè)難點(diǎn)，特別是在對(duì)象方法中使用時(shí)，必須更加小心。由此箭頭函數(shù)在很大程度上減少了我們的困擾。 什么是箭頭函數(shù) 用法 ES6 允許使用箭頭（=>）定義函數(shù) 測(cè)試 var p1 = document.getElementById(test1)...

    LeviDing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<