ES6 箭头函数的适用场景
2019年03月24日 译者:highya
箭头函数(也称作“胖箭头函数”)无疑是 ES6 最流行的特性之一。他们引入了一种编写具体函数的新方式。
ES5 语法示例:
function timesTwo(params) {
return params * 2
}
timesTwo(4); // 8
ES6 箭头函数示例:
var timesTwo = params => params * 2
timesTwo(4); // 8
后者看起来简洁很多!我们可以省略花括号而直接隐式的返回结果(仅在没有块体的情况下)。
理解箭头函数与常规 ES5 函数的不同表现很重要。
变化
值得注意的是,箭头函数中可用的语法形式很多。例举一些常见的:
1. 无参数
如果函数没有参数,那么在 =>
前放一个空括号即可。
() => 42
实际上,甚至不需要括号!
_ => 42
2. 单参数
单参数情况,括号是可选的:
x => 42 || (x) => 42
3. 多参数
多参数情况呢,括号却是必须的:
(x, y) => 42
4. 声明(与表达式对应)
在最基本的表现形式中,函数表达式生成值,而函数声明执行操作。
在箭头函数中,声明需要花括号包裹并且需要写 return。
下面是一个带有 if 语句的箭头函数例子:
var feedTheCat = (cat) => {
if (cat === 'hungry') {
return 'Feed the cat';
} else {
return 'Do not feed the cat';
}
}
5、“块主体”
如果函数在块主体中,那么必须使用显式的 return
语句:
var addValues = (x, y) => {
return x + y
}
6、对象字面量
如果函数返回一个对象字面量,那么它需要用括号包裹,强制解释器执行内部代码,然后返回。
x =>({ y: x })
匿名
箭头函数都是匿名的,意味着箭头函数都没有名称。
匿名会带来的一些问题:
1、很难调试 当程序出错时,无法追踪匿名的函数或者具体出错行数。
2、不能自我调用 如果函数需要在任何地方进行自我调用,比如,递归、事件绑定再解绑,这些情况就不能使用箭头函数。
主要优点:无需绑定 ‘this’
在经典函数表达式中,this
关键字根据函数被调用的上下文绑定到不同的值。但是箭头函数 this
指向词法作用域,即定义时所在的对象。
来看一个关于 setTimeout ES5 写法的例子:
// ES5
var obj = {
id: 42,
counter: function counter() {
setTimeout(function() {
console.log(this.id);
}.bind(this), 1000);
}
};
在上面 ES5 的例子中,.bind(this)
将上下文的 this
传递给函数内部。否则,默认 this
为 undefined。
// ES6
var obj = {
id: 42,
counter: function counter() {
setTimeout(() => {
console.log(this.id);
}, 1000);
}
};
ES6 箭头函数不能绑定 this
关键字,所以它将在词法上向上查找,然后使用定义它所在的作用域。
不适用场景
对箭头函数有一定的了解之后,希望你能理解它们为何不能完全替代普通函数。
这里列出一些不适用它们的场景:
1、对象中的方法
当调用 cat.jumps
时,lives
并没有递减。因为 this
没有绑定值,而继承父级作用域。
var cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
2、带有动态上下文的回调函数
如果上下文是动态的,那么这时箭头函数就不是一个正确的选择了。看一个事件捕获的例子:
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
点击按钮,将会报 TypeError
的错误。因为 this
并没有绑定到 button
,而是父级作用域。
3、当箭头函数影响到代码的可读性时
之前提到的很多语法值得尝试的。普通函数我们可以知道预期返回。但是对于箭头函数却很难从代码上解读结果。
适用场景
在任何需要绑定 this
至当前上下文,而不是函数本身时,箭头函数十分适用。
尽管箭头函数是匿名的,我依然喜欢在 map
和 reduce
中使用,它使得代码可读性更高,我认为它的优点是多余缺点的。
感谢阅读我的文章,如果你喜欢请鼓掌,并阅读我的其他文章,如 How I built my Pomodoro Clock app, and the lessons I leHow I built my Pomodoro Clock app, arned along the way, and Let’s demystify JavaScript’s ‘new’ keyword.
FENews 是由一群热爱技术的前端小伙伴自发组成的团队。团队会定期创作和翻译前端相关的技术文章,同时我们也欢迎外部投稿或加入我们的核心编辑团队。如果您对我们感兴趣,请关注我们的公众号: