ES6 箭头函数

1.函数体

// 简洁函数体
var fn = x => x * x;

// 块级函数体
var fn = (x, y) => {return x + y;};

2.this
用function生成的函数会定义一个自己的this,而箭头函数没有自己的this,而是会和上一层的作用域共享this。

function Person() {
    this.age = 0;
    var self = this;
    setTimeout(function () {
        self.age++;
        console.log(self.age);
    }, 1000);
}
var p = new Person();

这段代码里,setTimeout的参数function中需要操作外层的age属性,必须要把this赋值给self,然后通过self来获取到age

如果使用箭头函数则省事很多,代码如下:

function Person() {
    this.age = 0;
    setTimeout(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
var p = new Person();

没有用function生成的函数会,使用箭头,可以直接操作外层的age属性。

3.不能被new
箭头函数不能与new关键字一起使用,会报错

var Fn = () => {
    this.a = 1;
};
var f = new Fn();    // Error

推荐阅读更多精彩内容

  • 箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚...
    程序员之路阅读 315评论 0赞 3
  • 参考: http://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4&...
    TingsLee阅读 235评论 0赞 1
  • 前言 最近学习了慕课网上的vue仿饿了吗的视频,体会到了es6的箭头函数的妙用,因此特别总结了一下箭头函数的用法。...
    破浪_阅读 120评论 0赞 3
  • 箭头函数是什么?(What) 箭头函数 (Arrow Functions)也称“胖箭头函数”,是ES6全新的特性。...
    _LG_阅读 2,226评论 2赞 11
  • 几十年自食其力 在一堆粪里冉冉升起 趁人没留意 悄声进丛林 吃饭,喝酒,睡觉,游山玩水 其实孤独,担忧,寻觅,一无...
    阿里才才阅读 77评论 2赞 11