箭头函数用法
传统写法:
class Task {}
class TaskCollection {
constructor(tasks = []) {
this.tasks = tasks;
}
log() {
this.tasks.forEach(function(task) {
return console.log(task);
});
}
}
new TaskCollection([
new Task, new Task, new Task
]).log();
//输出3个Task{}
箭头函数写法:
log() {
this.tasks.forEach((task) => {
console.log(task);
})
}
注意,在只有一个参数和一条执行语句时,可以简化为下面的写法:
log() {
this.tasks.forEach(task => console.log(task));
}
注意事项
1、 this值
普通function函数和箭头函数的行为有一个微妙的区别,箭头函没有它自己的this值,箭头函数内的this值继承自外围作用域。
如果将上面的代码改成打印this,在箭头函数中this值为TaskCollection {tasks: Array[3]}
,在传统函数中会输出undefined
,这是由于自动开启了strict mode
,否则默认会指向window
对象。
2、箭头函数会默认返回
在箭头函数中可以省略return
示例:
//auto return
let names = ['jack', 'jobs', 'nike'];
// names = names.map(function(name) {
// return name + ' is coll.';
// });
names = names.map(name => name + ' is cool.');
console.log(names);
登陆发表评论