Arrow Functions

Arrow Functions是個簡寫形式的函數表達式，而且它擁有詞法做用域的this值（即不會新產生本身做用域下的this, arguments, super 和 new.target 等對象）。此外，箭頭函數老是匿名。

箭頭函數表達式 (=>)

Note: 箭頭函數表達式是ECMAScript 6新定義的，大部分瀏覽器尚不支持。

語法

基礎語法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
         // equivalent to:  => { return expression; }

// 若是隻有一個參數，圓括號是可選的:
(singleParam) => { statements }
singleParam => { statements }

// 無參數的函數須要使用圓括號:
() => { statements }

高級語法

// 返回對象字面量時應當用圓括號將其包起來:
params => ({foo: bar})

// 支持 Rest parameters 和 default parameters:
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

注意

箭頭函數的引入有兩個方面的影響：一是更簡短的函數書寫，二是對 this 的詞法解析。

箭頭函數不能用做構造器，和 new 一塊兒用就會拋出錯誤。

 yield 關鍵字一般不能在箭頭函數中使用（except when permitted within functions further nested within it）。所以，箭頭函數不能用做Generator函數。

箭頭函數不會在其內部暴露出  arguments 對象： arguments.length, arguments[0], arguments[1]等等，都不會指向箭頭函數的 arguments，而是指向了箭頭函數所在做用域的一個名爲 arguments 的值（若是有的話，不然，就是 undefined）。

E.g.

 1 var arguments = 42;
 2 var arr = () => arguments;
 3 
 4 arr(); // 42
 5 
 6 function foo() {
 7   var f = () => arguments[0]; // foo's implicit arguments binding
 8   return f(2);
 9 }
10 
11 foo(1); // 1

箭頭函數沒有本身的 arguments 對象，不過在大多數情形下，rest參數能夠給出一個解決方案：

E.g.

1 function foo() { 
2   var f = (...args) => args[0]; 
3   return f(2); 
4 }
5 
6 foo(1); // 2

 

語法示例

1. 具備一個參數的簡單函數

var single = a => a
single('hello, world') // 'hello, world'

2. 沒有參數的須要用在箭頭前加上小括號

var log = () => {
    alert('no param')
}

3. 多個參數須要用到小括號，參數間逗號間隔，例如兩個數字相加

var add = (a, b) => a + b
add(3, 8) // 11

4. 函數體多條語句須要用到大括號

var add = (a, b) => {
    if (typeof a == 'number' && typeof b == 'number') {
        return a + b
    } else {
        return 0
    }
}

5. 返回對象時須要用小括號包起來，由於大括號被佔用解釋爲代碼塊了

var getHash = arr => {
    // ...
    return ({
        name: 'Jack',
        age: 33
    })
}

6. 直接做爲事件handler

document.addEventListener('click', ev => {
    console.log(ev)
})

7. 做爲數組排序回調

var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
    if (a - b > 0 ) {
        return 1
    } else {
        return -1
    }
})
arr // [1, 2, 3, 4, 8, 9]

8. typeof運算符和普通的function同樣

var func = a => a
console.log(typeof func); // "function"

9. instanceof也返回true，代表也是Function的實例

console.log(func instanceof Function); // true

10. this固定，再也不善變，再不用寫me，self，_this了，或者bind。

obj = {
    data: ['John Backus', 'John Hopcroft'],
    init: function() {
        document.onclick = ev => {
            alert(this.data) // ['John Backus', 'John Hopcroft']
        }
        // 非箭頭函數
        // document.onclick = function(ev) {
        //     alert(this.data) // undefined
        // }
    }
}
obj.init()

11. 箭頭函數不能用new

var Person = (name, age) => {
    this.name = name
    this.age = age
}
var p = new Func('John', 33) // error

12. 不能使用argument

var func = () => {
    console.log(arguments)
}
func(55) //

　　

 

相關：

http://kangax.github.io/compat-table/es6/

http://www.cnblogs.com/snandy/p/4403111.html