箭頭函數的this指向

raoyi 發布于2019-08-23 12:00 / 2893人閱讀

摘要：箭頭函數的指向箭頭函數的指向的地方并不是函數調用的詞法作用域，而是聲明時的詞法作用于。基于這個新的改變，可以看出在改變以往的不合理的地方下足了功夫。試圖希望讓變成一門面向對象的強語言的決心。

箭頭函數的this指向 this

箭頭函數的this指向的地方并不是函數調用的詞法作用域，而是聲明時的詞法作用于。詳情請看下例：

var fn = function(){
    console.log(this);
}

var obj = {
    prop : fn
}

obj.prop()  //{prop: ?n}

var fn = () => {
    console.log(this);
}

var obj = {
    prop : fn
}

obj.prop()  //Window

上面兩段代碼中，不同的僅僅是function的聲明方式，一個沿用傳統的function關鍵字聲明，一個使用了新的 => 箭頭函數進行聲明，然后這兩個this指向的結果完全不同，一個按照傳統的方式，指向了被調用的詞法作用域，也就是obj，所以this指向了obj，而另一個則是直接指向了聲明fn方法的詞法作用域，也就是Window。

基于這個新的改變，可以看出ES6在改變javascript以往的不合理的地方下足了功夫。試圖希望讓javascript變成一門面向對象的強語言的決心。

需要注意的地方

基于新特性，以往在使用匿名函數的時候，不能再隨意使用this了，如：

elem.addEventListener("click",function(){
    //this ==> elem 
},false)

elem.addEventListener("click",() => {
    //this ==> 該代碼的詞法作用域 如 Window 
},false)

這里如果直接按原來的模式將function 替換成 => 的話就會出現上述問題，需要注意。

云服務器 GPU云服務器 this的指向改變this指向指向函數的指針箭頭函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97827.html

論普通函數和箭頭函數的區別以及箭頭函數的注意事項、不適用場景

摘要：第二種情況是箭頭函數的如果指向普通函數它的繼承于該普通函數。箭頭函數的指向全局，使用會報未聲明的錯誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數是ES6的API，相信很多人都知道，因為其語法上相對于普通函數更簡潔，深受大家的喜愛。就是這種我們日常開發中一直在使用的API...

paulquei 2019-08-23 16:15 評論0 收藏0
ES6精解：箭頭函數

摘要：基本用法在中允許使用來定義函數，如下就等同于從上面可以看出，在箭頭左側的是代表參數，若參數只有一個，可以省略，箭頭右側的表示函數代碼塊，若代碼塊里面是個返回值，則可以省略不寫無參數情況若箭頭函數不需要參數，則左側用代替，如下無參數情況無參數基本用法在ES6中允許使用 => 來定義函數，如下： var f = a => a; console.log(f(1)); //1 就...

HackerShell 2019-08-22 18:18 評論0 收藏0
ES6箭頭函數體中this指向哪里？

摘要：注意因為箭頭函數內部的是指向外層代碼塊的最近的，例中的函數的，所以我們可以通過改變外層代碼塊的的指向從而改變箭頭函數中的指向例中使用了函數的方法。一、this關鍵字小測試 ES6箭頭函數體中的this指向哪里？在回答這個問題之前先來揣揣你對this關鍵字的了解程度：（讓我們回到ES6之前）題： var obj = { a: function() { cons...

Half 2019-08-22 15:48 評論0 收藏0
ES6 - 箭頭函數、箭頭函數與普通函數的區別總結

摘要：但是因為箭頭函數沒有自己的，它的其實是繼承了外層執行環境中的，且指向永遠不會隨在哪里調用被誰調用而改變，所以箭頭函數不能作為構造函數使用，或者說構造函數不能定義成箭頭函數，否則用調用時會報錯報錯箭頭函數沒有自己的箭頭函數沒有自己的對象。這篇文章我們來了解一下ES6中的箭頭函數。首先會介紹一下箭頭函數的基本語法，因為基本語法比較好理解，我們用示例做簡單介紹即可。之后，我們重點來討論一下...

scola666 2019-08-23 16:32 評論0 收藏0
es6箭頭函數

摘要：但是箭頭函數并沒有自己的其是繼承了外層執行環境的，且不能改變，因此不能作為構造函數，此時，引擎會在報錯。不能作為事件的回調在中，事件的回調函數中，會動態的指向監聽的對象，但是由于監聽是一個全局函數，所以箭頭函數的回調中指向。箭頭函數 es6中添加了函數新的定義語法——箭頭函數，當有大于一個形參的時候，必須使用()代表部分參數，函數體大于一行時，必須使用{}將函數體括起來，并使用ret...

UnixAgain 2019-08-26 10:59 評論0 收藏0
關于ES6中箭頭函數的this問題

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

LeviDing 2019-08-22 10:53 評論0 收藏0