小心你的 Arrow Function

x => x * x

相当于

function(x) {
  return x * x
}

非常方便，而且它相当于匿名函数。

如果有多参数，多行的话，这么写。

(x, y) => {
    ...
    return ...
}

并且箭头函数的 this 作用域已经被「修复」。

几个例子

var obj = {
    birth: 1990,
    getAge: function () {
        var that = this;
        var fn = function () {
            return new Date().getFullYear() - that.birth; // this指向window或undefined
        };
        return fn();
    }
};

如果用箭头函数的话，则不用绑定作用域。

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

千万不能滥用箭头函数 Arrow Function！

就是因为 this 的指向已经不同，我们可能会遇到问题。

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

我们在对象中使用正常函数定义了转换 JSON 的方法，这没问题。

如果换用箭头函数呢？

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: () => ({'Name': this.name, 'Age': this.age})
};

JSON.stringify(xiaoming); // "{"Name":""}"

为什么会这样？因为此时 this 指向 window，作用域为全局（因为此时 xiaoming 为全局变量）。

继续对比。

function foo() {
  let a = 1
  let b = () => console.log(this.a)

  b()
}

foo()  // 1

let a = {
  foo: 1,
  bar: () => console.log(this.foo)
}

a.bar()  //undefined

可见箭头函数自身是没有 this 的，它只会向父级作用域请求。function 划定了一个块级作用域，所以在 function 中运用 arrow 的话可以避免请求到全局。如果用 var 定义，慎用 arrow ！

参考资料

http://www.open-open.com/lib/view/open1482063707519.html

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499490767fe5a0e31e17e44b69dcd1196f7ec6fc6000

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000