小心你的 Arrow Function
2017-08-26 本文已影响0人
萧沪椿Helson
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 ！
