ES6解读1:Arrows箭头函数

箭头函数使用类似于=>这样的语法定义函数,支持表达式模式和语句模式;
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]

你可能感兴趣的:(ES6解读1:Arrows箭头函数)