ES6學習筆記之箭頭函數

Vultr 發布于2019-08-19 18:12 / 1345人閱讀

摘要：特性介紹箭頭函數是新增的特性之一，它為這門語言提供了一種全新的書寫函數的語法。用生成的函數會定義一個自己的，而箭頭函數沒有自己的，而是會和上一層的作用域共享。

本文同步自我得博客：http://www.joeray61.com

JS中的箭頭

箭頭在JS里并不算是個新鮮的玩意兒，一直以來，JS都支持-->這樣的箭頭。

很早的時候有些瀏覽器還不支持JS，當時的人們為了兼容這些瀏覽器，需要這樣寫JS:

這段代碼在不支持JS的瀏覽器里會被解讀成2個未知標簽和一段html注釋。在支持JS的瀏覽器里，JS引擎會把看成是單行注釋的開始。需要說明的是，-->僅僅是在一行的開頭才能表示這一行是注釋，其余情況-->是一個操作符，表示goes to的含義。

function countdown(n) {
    while (n --> 0) {
        alert(n);
    }
}

這段代碼確實能夠正常運行哦。當你給countdown函數傳入一個大于0的參數時，這個循環能夠一直運行，直到n變為0為止。

此箭頭非彼箭頭，以上講述的-->并不是我們今天要講的主角，大家權當拓展下JS知識，下面讓我們進入正題。

特性介紹

箭頭函數是ES6新增的特性之一，它為JS這門語言提供了一種全新的書寫函數的語法。

// ES5
var double = nums.map(function (v) {
    return 2 * n;
});

// ES6
var double = nums.map(v => 2 * n);

箭頭函數簡化了原先的函數語法，不需要再寫function，如果函數體只有一行代碼的話連return都不用寫，這個特性對于熱衷于簡化流程和工作的程序員來說相當對胃口。

使用箭頭函數有幾個注意點：

函數體

箭頭函數支持兩種模式的函數體寫法，我們姑且叫他簡潔函數體和塊級函數體。

// 簡潔函數體
var fn = x => x * x;

// 塊級函數體
var fn = (x, y) => {return x + y;};

簡介函數體默認會把表達式的結果返回，塊級函數體需要手動return。如果想要返回一個對象又想使用簡潔函數體的話，需要這么寫：

var fn = () => ({});
fn();   // {}

如果寫成var fn = () => {};，那么執行fn()只能返回undefined。

this

用function生成的函數會定義一個自己的this，而箭頭函數沒有自己的this，而是會和上一層的作用域共享this。

function Person() {
    this.age = 0;
    var self = this;
    setTimeout(function () {
        self.age++;
        console.log(self.age);
    }, 1000);
}
var p = new Person();

這段代碼里，setTimeout的參數function中需要操作外層的age屬性，必須要把this賦值給self，然后通過self來獲取到age

如果使用箭頭函數則省事很多，代碼如下：

function Person() {
    this.age = 0;
    setTimeout(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
var p = new Person();

apply & call

由于箭頭函數已經綁定了this的值，即使使用apply或者call也不能只能起到傳參數的作用，并不能強行改變箭頭函數里的this。

var adder = {
    x: 1,
    add1: function (y) {
        var fn = v => v + this.x;
        return fn(y);
    },
    add2: function (y) {
        var fn = v => v + this.x;
        var whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};

adder.add1(1);    // 2
adder.add2(1);    // 仍然是2

arguments

普通函數里arguments代表了調用時傳入的參數，但是箭頭函數不然，在箭頭函數中無法使用arguments

當然，ES6中也有辦法可以讓箭頭函數像普通函數一樣使用類似于arguments這樣的類數組對象

var fn = (...rest) => rest[0];
fn(2);    // 2

...rest也是ES6的一個新特性，之后會介紹。

不能被new

箭頭函數不能與new關鍵字一起使用，會報錯

var Fn = () => {
    this.a = 1;
};
var f = new Fn();    // Error

使用場景

在我看來，箭頭函數幾乎可以完全取代function，除非是函數需要進行遞歸或者需要可變的this對象，其他場景我認為都可以使用箭頭函數。

參考資料

ES6 In Depth: Arrow functions

Arrow functions

云服務器 GPU云服務器箭頭函數學習筆記學習筆記一基礎學習筆記

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

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

ES6學習筆記

摘要：所以，如果一個數組成員不嚴格等于，默認值是不會生效的因為不嚴格等于對象解構對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。 http://es6.ruanyifeng.com/?se... 一、作用域 let //i作用域在全局，每次循環i都被重新賦值了而覆蓋了之前的值 var a = []...

Gu_Yan 2019-08-20 14:34 評論0 收藏0
es6學習筆記-箭頭函數_v1.0_byKL

摘要：因為箭頭函數本身沒有所以不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。箭頭函數不可以使用對象，該對象在函數體內不存在。 es6學習筆記-箭頭函數_v1.0 箭頭函數使用方法 var f = v => v; //普通函數配合箭頭函數寫法,這里并且是傳參的 //相當于 var f = function(v) { return v; }; /*-----------...

lushan 2019-08-20 14:47 評論0 收藏0
ES6箭頭函數學習筆記

摘要：普通函數里代表了調用時傳入的參數，但是箭頭函數不然，箭頭函數會把當成一個普通的變量，順著作用域鏈由內而外地查詢。不能被箭頭函數不能與關鍵字一起使用，會報錯。語法具有一個參數的簡單函數 var single = a => a single(hello, world) // hello, world 沒有參數的需要用在箭頭前加上小括號 var log = () => { ...

sydMobile 2019-08-21 10:51 評論0 收藏0
學習ES6筆記──工作中常用到的ES6語法

摘要：但是有了尾調用優化之后，遞歸函數的性能有了提升。常被用來檢查對象中是否存在某個鍵名，集合常被用來獲取已存的信息。循環解構對象本身不支持迭代，但是我們可以自己添加一個生成器，返回一個，的迭代器，然后使用循環解構和。一、let和const 在JavaScript中咱們以前主要用關鍵var來定義變量，ES6之后，新增了定義變量的兩個關鍵字，分別是let和const。對于變量來說，在ES5中...

curried 2019-08-26 12:16 評論0 收藏0
【前端工程師手冊】this拾遺之關于箭頭函數的種種

摘要：之前總結了的一些常見綁定情況前端工程師手冊之的筆記，但是還有一些沒有說到，今天繼續學習一下。參考資料箭頭函數你不知道的上卷之前總結了this的一些常見綁定情況（【前端工程師手冊】JavaScript之this的筆記），但是還有一些沒有說到，今天繼續學習一下。 es6箭頭函數先說結論：箭頭函數沒有自己的this，它是根據外層(函數或者全局，后面會說到箭頭函數作為某個對象的方法時的情況...

oogh 2019-08-26 11:55 評論0 收藏0