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

資訊專欄INFORMATION COLUMN

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

LeviDing / 1409人閱讀

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

什么是箭頭函數(shù) 用法

ES6 允許使用“箭頭”（=>）定義函數(shù)

  
測(cè)試


  var p1 = document.getElementById("test1");
  p1.addEventListener("click", () => {
        p1.style.color = "red";
     }, false);

在es5中相當(dāng)于

 var p1 = document.getElementById("test1");
   p1.addEventListener("click", function () {
             //直接通過dom的方法改變顏色
             this.style.color = "red"; 
      },false);

但是我們思考一個(gè)問題——當(dāng)我們把第一段代碼中的p1換成this時(shí)
this會(huì)指向哪里

p1.addEventListener("click", () => {
         
      this.style.color = "red";//   "color" is not undefined
     }, false);

這時(shí)我們就會(huì)想this為什么沒有作用，而在es5中this是指向了p1

箭頭函數(shù)有個(gè)使用注意點(diǎn)。

函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。
this對(duì)象的指向是可變的，但是在箭頭函數(shù)中，它是固定的。

function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代碼中，setTimeout的參數(shù)是一個(gè)箭頭函數(shù)，這個(gè)箭頭函數(shù)的定義生效是在foo函數(shù)生成時(shí)，而它的真正執(zhí)行要等到100毫秒后。如果是普通函數(shù)，執(zhí)行時(shí)this應(yīng)該指向全局對(duì)象window，這時(shí)應(yīng)該輸出21。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時(shí)所在的對(duì)象（本例是{id: 42}），所以輸出的是42

箭頭函數(shù)的this

this指向的固定化，并不是因?yàn)榧^函數(shù)內(nèi)部有綁定this的機(jī)制，實(shí)際原因是箭頭函數(shù)根本沒有自己的this，導(dǎo)致內(nèi)部的this就是外層代碼塊的this。正是因?yàn)樗鼪]有this，所以也就不能用作構(gòu)造函數(shù)。

// ES6
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log("id:", _this.id);
  }, 100);
}

上面代碼中，轉(zhuǎn)換后的es5清楚地說明了，箭頭函數(shù)里面根本沒有自己的this，而是引用外層的this。

由于箭頭函數(shù)沒有自己的this，所以當(dāng)然也就不能用call()、apply()、bind()這些方法去改變this的指向。

(function() {
  return [
    (() => this.x).bind({ x: "inner" })()
  ];
}).call({ x: "outer" });
// ["outer"]

同樣的由于箭頭函數(shù)沒有自己的this 所以bind傳統(tǒng)的顯性綁定無效 內(nèi)部的this指向外部this
在javascript的學(xué)習(xí)中， this的指向問題一直是個(gè)難點(diǎn)，特別是在對(duì)象方法中使用this時(shí)，必須更加小心。由此箭頭函數(shù)在很大程度上減少了我們的困擾。

箭頭函數(shù)this詞法

話又說回來，當(dāng)我們使用箭頭函數(shù)時(shí)不使用常規(guī)的四種this綁定，又該怎么決定this的指向問題呢？
箭頭函數(shù)是根據(jù)外層（函數(shù)或者全局）作用域來決定this

讓我們看看箭頭函數(shù)的此法作用域：

   function foo() {
            //返回箭頭函數(shù)
            return(a) => {
                //this 繼承自foo()
                console.log(this.a);
            };
        }
        var obj1 = {
            a:2
        };
        var obj2 ={
            a:3
        };
        var bar = foo.call(obj1);
        bar.call(obj2); //是2， 不是3?。?！

foo()內(nèi)部創(chuàng)建的箭頭函數(shù)會(huì)捕獲調(diào)用時(shí)foo()的this。由于foo()的this綁定到了obj1，所以bar(引用箭頭函數(shù))的this也會(huì)綁定到obj1，上文說過箭頭函數(shù)this對(duì)象的指向是固定的所以后面的call修改不了綁定，即使是new也不行。

箭頭函數(shù)可以像bind()一樣確保函數(shù)的this被綁定到指定對(duì)象上，此外， 其重要性還體現(xiàn)在它更常見的詞法作用域取代了傳統(tǒng)的this的機(jī)制。實(shí)際上， 在ES6之前我們就已經(jīng)在使用一種集合和箭頭函數(shù)完全一樣的模式了。

   function foo() {
            var self = this;
            setTimeout(function() {
                console.log(self.a)
            },100)
        }
        var obj = {
            a:2
        };
        foo.call(obj);

和箭頭函數(shù)一樣self = this 看起來都可以取代bind()， 但是從本質(zhì)上來看，它們是想代替this這個(gè)機(jī)制。

注意

如果經(jīng)常編寫this風(fēng)格的代碼，又喜歡用箭頭函數(shù)或者self= this的方法來否定this機(jī)制。
那么或許你應(yīng)當(dāng)：

只使用詞法作用域并完全摒棄錯(cuò)誤的this風(fēng)格

完全采用this風(fēng)格，在必要時(shí)仍使用bind(), 避免使用箭頭函數(shù)或者self = this。

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

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

相關(guān)文章

  • ES6 系列之箭頭函數(shù)

    摘要：回顧我們先來回顧下箭頭函數(shù)的基本語法。主要區(qū)別包括沒有箭頭函數(shù)沒有，所以需要通過查找作用域鏈來確定的值。箭頭函數(shù)并沒有方法，不能被用作構(gòu)造函數(shù)，如果通過的方式調(diào)用，會(huì)報(bào)錯(cuò)。 回顧 我們先來回顧下箭頭函數(shù)的基本語法。 ES6 增加了箭頭函數(shù)： let func = value => value; 相當(dāng)于： let func = function (value) { return ...

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

  • es6 - 箭頭函數(shù)

    摘要：也就是說箭頭函數(shù)的的值不再根據(jù)調(diào)用時(shí)上下文確定，而是像普通變量那樣根據(jù)定義時(shí)的作用域鏈進(jìn)行查找。箭頭函數(shù)中的依然要根據(jù)定義時(shí)的作用域鏈進(jìn)行查找。知乎這篇文章對(duì)箭頭函數(shù)的一些不適合的場(chǎng)景進(jìn)行了總結(jié)，可以作為參考。 es6 - 箭頭函數(shù) 哇，箭頭函數(shù)...，聽起來好NB，但是如果你知道它是因?yàn)槭褂昧?>這樣類似箭頭的符號(hào) ，所以才叫箭頭函數(shù)。 瞬間感覺：呵，這名字起的...。 es6增加了...

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

  • 箭頭函數(shù)你想知道的都在這里

    摘要：沒有箭頭函數(shù)沒有自己的對(duì)象，這不一定是件壞事，因?yàn)榧^函數(shù)可以訪問外圍函數(shù)的對(duì)象那如果我們就是要訪問箭頭函數(shù)的參數(shù)呢你可以通過命名參數(shù)或者參數(shù)的形式訪問參數(shù)不能通過關(guān)鍵字調(diào)用函數(shù)有兩個(gè)內(nèi)部方法和。 1、基本語法回顧 我們先來回顧下箭頭函數(shù)的基本語法。ES6 增加了箭頭函數(shù)： var f = v => v; // 等同于 var f = function (v) { return ...

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

  • ES6，你不得不學(xué)！

    摘要：但是，的本質(zhì)仍然是函數(shù)，是構(gòu)造函數(shù)的另外一種寫法。報(bào)錯(cuò)原生構(gòu)造函數(shù)的繼承對(duì)于一些原生的構(gòu)造函數(shù)，比如，，，等，在是無法通過方法實(shí)現(xiàn)原生函數(shù)的內(nèi)部屬性，原生函數(shù)內(nèi)部的無法綁定，內(nèi)部屬性獲得不了。 在沒有學(xué)習(xí) ES6 之前，學(xué)習(xí) React，真的是一件非常痛苦的事情。即使之前你對(duì) ES5 有著很好的基礎(chǔ)，包括閉包、函數(shù)、原型鏈和繼承，但是 React 中已經(jīng)普遍使用 ES6 的語法，包括 ...

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

  • ES6學(xué)習(xí)總結(jié)（二）

    摘要：關(guān)于的學(xué)習(xí)總結(jié)昨天寫了第一篇，主要是關(guān)于變量聲明關(guān)鍵字和，新增類型以及模板字符串，今天準(zhǔn)備寫第二篇，里面的函數(shù)部分，新增了箭頭函數(shù)，參數(shù)以及參數(shù)默認(rèn)值。，這次我們?cè)谡{(diào)用函數(shù)大的時(shí)候，兩個(gè)參數(shù)全部傳遞了值，因此返回。 關(guān)于ES6的學(xué)習(xí)總結(jié),昨天寫了第一篇，主要是關(guān)于變量聲明關(guān)鍵字let和const，新增類型Symbol以及模板字符串，今天準(zhǔn)備寫第二篇，ES6里面的函數(shù)部分，ES6新增了箭...

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

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

0條評(píng)論

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