es6箭頭函數中this


普通函數:

$scope.$on('$stateChangeSuccess',function(){this.list = this.getList();});

箭頭函數:

$scope.$on('$stateChangeSuccess',()=>{this.list = this.getList();});

上面的代碼是在es6中class的constructor體中的語句。函數的作用是調用該模塊中的getList函數,將函數的返回值賦值給class中的list值。從寫法上來看兩種不同的寫法表達的意思是一樣的。

但是由於他們中調用了this這個特別的對象,其執行結果有着很大的不同:

普通函數:報錯(找不到getList方法)

箭頭函數:執行正常。

查找原因:箭頭函數和普通函數之間有一個重要的差別:箭頭函數沒有自己的this值,其this值是繼承外域的this值。

分析:函數function的本質也是一個對象。類似js中的Array,object,Function也是一個內部對象。js對運行function的時候也是將其當做一個對象來處理。

  如果對面向對象稍有了解的話,我們知道對象中的this是用來獲取對象本身的屬性或者方法的。在上面的例子中,普通函數體里的this對象取值是function里的屬性或者方法,由於普通函數里並未定義getList方法,所以其會報錯undefined。

  而在箭頭函數中,由於其自身沒有this屬性,所以函數體里面的this均是從外域獲取的屬性或者方法,因此是正確的。

所以箭頭函數不僅僅是從外觀上簡化了函數的寫法,更解決了普通函數中this的hack問題。

 

http://www.cnblogs.com/yuzhongwusan/archive/2012/04/09/2438569.html 可以訪問該篇博客了解function的詳細


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM