箭头函数 从了解到深入

箭头函数

1. 简单的定义：

胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全
新特性。有传闻说，箭头函数的语法=>，是受到了CoffeeScript 的影响，并且它与CoffeeScript中的
=>语法一样，共享this上下文。

箭头函数的产生，主要由两个目的：更简洁的语法和与父作用域共享关键字this。接下来，让我们来看几个详细的例子
当需要编写一个简单的单一参数函数时，可以采用箭头函数来书写，标识名 => 表达式。
这样就可以省却 function 和 return 的输入，还有括号，分号等。箭头函数是ES6新
增加的一个特性。

1
let f = v => v;

最直接的感觉就是简便，当然不可能就是这么一点好处，下面就一起来探讨一下。

几个小细节 ：

  • 如果箭头函数的代码块多余一条语句，就必须要使用大括号将其括起来，并且使用
    return 语句返回。

  • 由于大括号会被解释位为代码块，所以如果箭头函数直接返回一个对象，必须在外
    面加上括号。

    1
    let f = id => ({age: 22, name: Alice })

  • 箭头函数还可以和解构赋值 Destructuring 联合使用.

    1
    const f = ({first, last}) => first + '' + last;

  • 可以简化回调函数，大大简化和缩短代码行数。

2. 箭头函数和普通函数的区别

  • this的指向
    普通函数与箭头函数有个微小的不同点。 箭头函数没有自己的this值 ，其this值是通
    过继承其它传入对象而获得的,通常来说是上一级外部函数的 this 的指向。
    1
    2
    3
    4
    5
    6
    7
    function f() {
    setTimeout( () => {
    console.log("id:", this.id);
    },100);
    }
     
    f.call( { id: 42 }); //id: 42;

这个例子中， setTimeout 的参数是一个箭头函数， 每隔100毫秒运行一次，如果是普通函
数，执行的 this 应该指向全局对象， 但是箭头函数会让 this 总是指向函数所在的对象

箭头函数里面嵌套箭头函数会有多少个this呢？
看一个简单的例子

1
2
3
4
5
6
7
8
9
10
function f() {
return () => {
return () => {
return () => {
console.log("id:", this.id);
};
};
};
}
f().call( {id: 42})()()(); //id: 42

 

上面的代码中只有一个 this， 就是函数f的this 。这是因为所有的内层函数都是箭头函数
都没有自己的this，都是最外层f函数的this。
注意： 还有三个变量在箭头函数中也是不存在的arguments , super, new.target所以顺理成
章，箭头函数也就不能再用这些方法call(),apply(),bind(),因为这是一些改变this指向的方法，
箭头函数并没有this啊。

1
2
3
4
5
6
7
8
9
10
11
12
var adder = {
base : 1,
add : function(a) {
var f = v => v + this.base; return f(a);
},
addThruCall: function(a) {
var f = v => v + this.base;
var b = { base : 2 };
return f.call(b, a);
}
};
console.log(adder.add(1));

 

3. 怎么处理好箭头函数的使用问题呢？

  • 使用非箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的
    有意义的this值。
  • 在其它场合都使用箭头函数。

4. 使用箭头函数的注意点

  • 箭头函数在参数和箭头之间不能换行。

  • 函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    'use strict';
    var obj = { a: 10};
    Object.defineProperty(obj, "b", {
    get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10;
    // represents global object 'Window', therefore 'this.a' returns 'undefined'
    }
    });

  • 不可以当作构造函数，简单说就是不能再使用new命令了，不然会报错。

    1
    2
    3
    var Foo = () => {};
    var foo = new Foo();
    // TypeError: Foo is not a constructor

  • 不可以使用arguments 对象，该对象在函数体内不存在，如果实在要用可以用rest代替。

  • 不可以使用yield命令，箭头函数不可用作Generator函数。

值得注意的一点就是this对象的指向是可变的，但在箭头函数内是固定的。

5. 总结

箭头函数是我最喜欢的ES6特性之一。使用=>来代替function是非常便捷的。但我也曾见过只使用
=>来声明函数的代码，我并不认为这是好的做法，因为=>也提供了它区别于传统function，其所
独有的特性。我个人推荐，仅在你需要使用它提供的新特性时，才使用它。

    • 当只有一条声明语句(statement)时， 隐式 return。
    • 需要使用到父作用域中的this。
posted @ 2017-05-17 22:34  最骚的就是你  阅读(802)  评论(0)  编辑  收藏  举报