ES6箭頭函式和它的作用域

在ES6很多很棒的新特性中, 箭頭函式 (或者大箭頭函式)就是其中值得關注的一個! 它不僅僅是很棒很酷, 它很好的利用了作用域, 快捷方便的在現在使用以前我們用的技術, 減少了很多程式碼……但是如果你不瞭解箭頭函式原理的話可能就有點難以理解. 所以,讓我們來看下箭頭函式, 就是現在!

執行環境

你可以自己去學習和嘗試下, 你可以簡單的把示例程式程式碼複製到你的瀏覽器控制檯下. 現在, 推薦使用Firefox(22+)開發者工具, Firefox(22+)開發者工具現在支援箭頭函式,你也可以使用谷歌瀏覽器. 如果你使用谷歌瀏覽器, 你必須要做下列兩件事: – - 在谷歌瀏覽器中位址列中輸入：”about:flags”, 找到 “使用體驗性Javascript”選項，開啟使用。 – - 在函式的開頭加上”use strict”,然後再在你的谷歌瀏覽中測試箭頭函式吧(提示：請用谷歌瀏覽器v38,我當時就是被瀏覽器版本坑了):

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

幸運的是後面會有越來越多的瀏覽器支援ES6特性. 現在你完成了所有準備工作, 讓我們繼續深入它吧!

一個新話題

最近大家在討論關於ES6的一個話題：關於箭頭函式, 像這樣:

=>

新的語法

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

param => expression

新增的語法是作用在變數上, 可以在表示式中申明多個變數, 下面是箭頭函式的使用模式:

//  一個引數對應一個表示式
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(" ");

從上面的例子中我們可以看出箭頭函式的語法實際上是返回了一個新的函式, 這個函式有函式體和引數

因此, 我們可以這樣呼叫剛才我們建立的函式:

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"

相關思考

思考下面的函式：

var func = x => {
    return x++;
};

我們列出了一些常見的問題：

- 箭頭函式建立的臨時函式的arguments是我們預料的那樣工作

console.log(arguments);

- typeof和instanceof函式也能正常檢查臨時函式

func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true

- 把箭頭函式放在括號內是無效的

//  有效的常規語法
(function (x, y){
    x= x * 2;
    return x + y;
} (3, "B") );

// 無效的箭頭函式語法
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );

// 但是可以這樣寫就是有效的了：
( (x,y) => {
    x= x * 2;return x + y;
} )( 3,"A" );//立即執行函式

- 儘管箭頭函式會產生一個臨時函式，但是這個臨時函式不是一個建構函式

var instance= new func(); // TypeError: func is not a constructor

- 同樣也沒有原型物件

func.prototype; // undefined

作用域

這個箭頭函式的作用域和其他函式有一些不同,如果不是嚴格模式，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