ES6解读1:Arrows箭头函数
2017-10-01 本文已影响0人
蚊小文
箭头函数使用类似于=>这样的语法定义函数,支持表达式模式和语句模式;
var f = (a) => {return a;}
如果箭头函数不需要参数或需要多个参数,就可以将参数放入一对圆括号中,如果只有一个参数可以不使用圆括号。
var f = () => 5;
var sum = (num1, num2) => num1 + num2;
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
看完以上介绍,想必大家应该能大概了解箭头函数了,我也总结了他和普通函数之间的区别,以下:
- 箭头函数不能被直接命名,不过允许它们赋值给一个变量;
- 箭头函数不能用做构造函数,你不能对箭头函数使用new关键字;
- 箭头函数也没有prototype属性;
- 箭头函数绑定了词法作用域,不会修改this的指向。
最后一点是箭头函数最大的特点,我们来仔细看看。
词法作用域
箭头函数最大特点在于和父作用域具有一样的this。我们知道普通函数的this在函数定义的时候就确定了,使用箭头函数时再也不用担心this跳来跳去了。
此外如果箭头函数定义在另一个函数里面,箭头函数会共享它父函数的arguments变量。
// 和父作用域具有相同的this
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
}
function square() {
let example = () => {
let numbers = [];
for (let number of arguments) {
numbers.push(number * number);
}
return numbers;
};
return example();
}
square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]