zoukankan html css js c++ java

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) //