ES6箭頭函數(shù)

guyan0319 發(fā)布于2019-08-23 15:34 / 2307人閱讀

摘要：特性箭頭函數(shù)內部沒有方法，也沒有，所以不支持操作。箭頭函數(shù)的始終指向函數(shù)定義時的，而非執(zhí)行時。不可以使用對象，該對象在函數(shù)體內不存在。不可以使用命令，因此箭頭函數(shù)不能用作函數(shù)。

語法：

([param] [, param]) => {
   statements
}
 
param => expression

使用：

（  ）=>{···}； //零個參數(shù)用（）表示
  x  =>{···}； //一個參數(shù)，可以省略（） 
 (x,y)=>{···}； //多個參數(shù)不能省略（）

 **多行語句需要用{}括起來，單行表達式不需要{}，并且會作為函數(shù)返回值。**

特性：

箭頭函數(shù)內部沒有constructor方法，也沒有prototype，所以不支持new操作。但是它對this的處理與一般的普通函數(shù)不一樣。箭頭函數(shù)的 this 始終指向函數(shù)定義時的 this，而非執(zhí)行時。

例如：

var o = {
    x : 1,
    fn : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.fn();
        }, 100);
    }
};

o.test(); // TypeError : this.fn is not a function

上面的代碼會出現(xiàn)錯誤，因為this的指向從o變?yōu)榱巳郑ê瘮?shù)調用中的this都是指向全局的）。

要修改上面的代碼如下：

var o = {
    x : 1,
    fn : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.fn(); 
        }, 100);
    }
};
o.test();

通過使用外部事先保存的this就行了。

利用到箭頭函數(shù)修改，箭頭函數(shù)的 this 始終指向函數(shù)定義時的 this，而非執(zhí)行時。

var o = {
    x : 1,
    fn : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.fn() }, 100);
    }
};

o.test();

這回this就指向o了。箭頭函數(shù)可以讓setTimeout里面的this，綁定定義時所在的作用域，而不是指向運行時所在的作用域。

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

需要注意一點的就是箭頭函數(shù)中的this是不會改變指向對象的，我們知道call和apply可以改變this的指向，但是在箭頭函數(shù)中是無效的。

   var x = 1,
       o = {
           x : 10,
           test : () => {
               console.log(this);//window函數(shù)調用中的this都是指向全局的
               return this.x
            }
       };
   console.log(o.test()); // 1
   console.log(o.test.call(o)); // 依然是1

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括號被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個對象，必須在對象外面加上括號。
var getTempItem = id => ({ id: id, name: "Temp" });

使用注意點

函數(shù)體內的this對象，就是定義時所在的對象，而不是使用時所在的對象

不可以當作構造函數(shù)，也就是說，不可以使用new命令，否則會拋出一個錯誤。

不可以使用arguments對象，該對象在函數(shù)體內不存在。如果要用，可以用Rest參數(shù)代替。

不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。

GPU云服務器云服務器箭頭函數(shù) ES6 es6-系列 ES6入門

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

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

es6 - 箭頭函數(shù)

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

13651657101 2019-08-26 11:46 評論0 收藏0
ES6學習筆記之箭頭函數(shù)

摘要：特性介紹箭頭函數(shù)是新增的特性之一，它為這門語言提供了一種全新的書寫函數(shù)的語法。用生成的函數(shù)會定義一個自己的，而箭頭函數(shù)沒有自己的，而是會和上一層的作用域共享。本文同步自我得博客：http://www.joeray61.com JS中的箭頭箭頭在JS里并不算是個新鮮的玩意兒，一直以來，JS都支持-->這樣的箭頭。很早的時候有些瀏覽器還不支持JS，當時的人們?yōu)榱思嫒葸@些瀏覽器，需要這...

Vultr 2019-08-19 18:12 評論0 收藏0
深入ES6：箭頭函數(shù)

摘要：令人震驚的箭頭函數(shù)引入了寫入函數(shù)的新語法。使用箭頭函數(shù)創(chuàng)建簡單對象時有一個警告。代碼因此被默默地解釋為一個不執(zhí)行任何操作并返回未定義的箭頭函數(shù)。內部函數(shù)是一個箭頭函數(shù)，所以它從封閉范圍繼承此函數(shù)。箭頭從一開始就一直是JavaScript的一部分。第一個JavaScript教程建議在HTML注釋中包裝內聯(lián)腳本。這會阻止不支持JS的瀏覽器錯誤地將JS代碼顯示為文本。你會寫這樣的東西： ...

MasonEast 2019-08-22 17:14 評論0 收藏0
ES6 箭頭函數(shù) 從了解到深入

摘要：有傳聞說，箭頭函數(shù)的語法，是受到了的影響，并且它與中的語法一樣，共享上下文。箭頭函數(shù)是新增加的一個特性。箭頭函數(shù)沒有自己的值，其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數(shù)的的指向。箭頭函數(shù) 1. 簡單的定義：胖箭頭函數(shù) Fat arrow functions，又稱箭頭函數(shù)，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數(shù)的語法=>，...

Eminjannn 2019-08-20 16:37 評論0 收藏0
ES6~你跟箭頭函數(shù)升華之路

摘要：箭頭函數(shù)簡單的定義胖箭頭函數(shù)，又稱箭頭函數(shù)，是一個來自又稱的全新特性。箭頭函數(shù)是新增加的一個特性。使用箭頭函數(shù)的注意點箭頭函數(shù)在參數(shù)和箭頭之間不能換行。值得注意的一點就是對象的指向是可變的，但在箭頭函數(shù)內是固定的。箭頭函數(shù) 1. 簡單的定義：胖箭頭函數(shù) Fat arrow functions，又稱箭頭函數(shù)，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，...

Faremax 2019-08-21 17:16 評論0 收藏0
關于ES6中箭頭函數(shù)的this問題

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

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