[譯]ES6箭頭函數和它的做用域

時間 2019-11-13

原文原文鏈接

原文來自個人前端博客：javascript

http://www.hacke2.cn/arrow-functions-and-their-scope/前端

在ES6不少很棒的新特性中, 箭頭函數 (或者大箭頭函數)就是其中值得關注的一個! 它不只僅是很棒很酷, 它很好的利用了做用域, 快捷方便的在如今使用之前咱們用的技術, 減小了不少代碼……可是若是你不瞭解箭頭函數原理的話可能就有點難以理解. 因此,讓咱們來看下箭頭函數, 就是如今!java

執行環境

你能夠本身去學習和嘗試下, 你能夠簡單的把示例程序代碼複製到你的瀏覽器控制檯下. 如今, 推薦使用Firefox(22+)開發者工具, Firefox(22+)開發者工具如今支持箭頭函數,你也可使用谷歌瀏覽器. 若是你使用谷歌瀏覽器, 你必需要作下列兩件事: - - 在谷歌瀏覽器中地址欄中輸入：」about:flags」, 找到「使用體驗性Javascript」選項，開啓使用。 - - 在函數的開頭加上」use strict」,而後再在你的谷歌瀏覽中測試箭頭函數吧(提示：請用谷歌瀏覽器v38,我當時就是被瀏覽器版本坑了):git

(function(){
    "use strict";
    // use arrow functions here
}());

幸運的是後面會有愈來愈多的瀏覽器支持ES6特性. 如今你完成了全部準備工做, 讓咱們繼續深刻它吧!es6

一個新話題

最近你們在討論關於ES6的一個話題：關於箭頭函數, 像這樣:github

=>

新的語法

隨着討論產生了一個新的語法：express

param => expression

新增的語法是做用在變量上, 能夠在表達式中申明多個變量, 下面是箭頭函數的使用模式:npm

//  一個參數對應一個表達式
param => expression;// 例如 x => x+2;

// 多個參數對應一個表達式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一個參數對應多個表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多個參數對應多個表達式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表達式裏沒有參數
() => expression; //例如var flag = (() => 2)(); flag等於2

() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等於1

 //傳入一個表達式，返回一個對象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

箭頭函數是怎麼實現的

咱們能夠把一個普通函數轉換成用箭頭函數來實現：瀏覽器

// 當前函數
var func = function (param) {    
    return param.split(" ");
}
// 利用箭頭函數實現
var func = param => param.split(" ");

從上面的例子中咱們能夠看出箭頭函數的語法其實是返回了一個新的函數, 這個函數有函數體和參數dom

所以, 咱們能夠這樣調用剛纔咱們建立的函數:

func("Felipe Moura"); // returns ["Felipe", "Moura"]

當即執行函數(IIFE)

你能在當即執行函數裏使用箭頭函數，例如:

( x => x * 2 )( 3 ); // 6

這行代碼產生了一個臨時函數，這個函數有一個形參x，函數的返回值爲x*2,以後系統會立刻執行這個臨時函數, 將3賦值給形參x.

下面的例子描述了臨時函數體裏有多行代碼的狀況：

( (x, y) => {
    x = x * 2;
    return x + y;
})( 3, "A" ); // "6A"

做用域

這個箭頭函數的做用域和其餘函數有一些不一樣,若是不是嚴格模式，this關鍵字就是指向window，嚴格模式就是undefined，在構造函數裏的this指向的是當前對象實例,若是this在一個對象的函數內則this指向的是這個對象，this有可能指向的是一個dom元素，例如當咱們添加事件監聽函數時,可能這個this的指向不是很直接，其實this（不止是this變量）變量的指向是根據一個規則來判斷的：做用域流。下面我將演示this在事件監聽函數和在對象函數內出現的狀況：

在事件監聽函數中：

document.body.addEventListener('click', function(evt){
    console.log(this); // the HTMLBodyElement itself
});

在構造函數裏：

function Person () {

    let fullName = null;

    this.getName = function () {
        return fullName;
    };

    this.setName = function (name) {
        fullName = name;
        return this;
    };
}

let jon = new Person();
jon.setName("Jon Doe");
console.log(jon.getName()); // "Jon Doe"
//注：this關鍵字這裏就不解釋了，你們本身google,badu吧。

在這個例子中，若是咱們讓Person.setName函數返回Person對象自己，咱們就能夠這樣用：

jon.setName("Jon Doe")
   .getName(); // "Jon Doe"

在一個對象裏:

let obj = {
    foo: "bar",
    getIt: function () {
        return this.foo;
    }
};

console.log( obj.getIt() ); // "bar"

可是當執行流(好比使用了setTimeout)和做用域變了的時候，this也會變。

function Student(data){

    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;

    this.getInfo = function () {
        return this.name + ", " + this.age;
    };

    this.sayHi = function () {
        window.setTimeout( function () {
            console.log( this );
        }, 100 );
    }

}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});

console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// window

當setTimeout函數改變了執行流的狀況時，this的指向會變成全局對象,或者是在嚴格模式下就是undefine,這樣在setTimeout函數裏面咱們使用其餘的變量去指向this對象，好比self，that,固然無論你用什麼變量，你首先應該在setTimeout訪問以前，給self，that賦值，或者使用bind方法否則這些變量就是undefined。

這是後就是箭頭函數登場的時候了，它能夠保持做用域，this的指向就不會變了。

讓咱們看下上文起先的例子，在這裏咱們使用箭頭函數：

function Student(data){

    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;

    this.getInfo = function () {
        return this.name + ", " + this.age;
    };

    this.sayHi = function () {
        window.setTimeout( ()=>{ 
            // the only difference is here
            console.log( this );
        }, 100 );
    }

}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});

console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// Object { name: "Mary Lou", age: 13, ... }

分析：在sayHi函數中，咱們使用了箭頭函數，當前做用域是在student對象的一個方法中，箭頭函數生成的臨時函數的做用域也就是student對象的sayHi函數的做用域。因此即便咱們在setTimeout調用了箭頭函數生成的臨時函數，這個臨時函數中的this也是正確的指向。

有趣和有用的使用

建立一個函數很容易，咱們能夠利用它能夠保持做用域的特徵：

例如咱們能夠這麼使用：Array.forEach()

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

分析：在forEach裏箭頭函數會建立並返回一個臨時函數 tempFun,這個tempFun你能夠想象成這樣的：function(vowel){ console.log(vowel);}可是Array.forEach函數會怎麼去處理傳入的tempFunc呢？在forEach函數裏會這樣調用它：tempFunc.call(this,value);全部咱們看到函數的正確執行效果。

map裏使用箭頭函數，這裏我就不分析函數執行過程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

費布拉奇數列

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}

factorial(6); // 720

咱們也能夠用在Array.sort方法裏：

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );

也能夠在事件監聽函數裏使用：

document.body.addEventListener('click', event=>console.log(event, this)); // EventObject, BodyElement

總結

儘管你們可能會認爲使用箭頭函數會下降你代碼的可讀性，可是因爲它對做用域的特殊處理，它能讓咱們能很好的處理this的指向問題。箭頭函數加上let關鍵字的使用，將會讓咱們javascript代碼上一個層次！儘可能多使用箭頭函數，你能夠再你的瀏覽器測試你寫的箭頭函數代碼，你們能夠再評論區留下你對箭頭函數的想法和使用方案！我但願你們能享受這篇文章，就像你會不就的未來享受箭頭函數帶給你的快樂.