ES6:箭头函数

莫凡是莫烦
109 阅读2分钟

这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

意义

箭头函数简化了函数的书写，使得表达更加简洁，简化回调函数。让this指向固定化，绑定this使得它不再可变，有利于封装回调函数。

基本使用

1. 只有一个参数可省略括号，多个参数或者无参数一定加括号


let  f = () => 5;

let f = num => num * 2;

let sum = (num1, num2) => num1 + num2;

2. 如果箭头函数的代码块部分多于一条语句，使用大括号将它们括起来，并且使用return语句返回;如果只有一句就不用使用大括号了，也不需要使用return语句返回。


let sum = (num1, num2) => { 
    num1 *= 2
    return num1 + num2 
}
console.log(sum(1,2)) //4

let sum = (num1, num2) =>  num1 + num2

3. 必须在对象外面加上括号，否则会报错，因为大括号被解释为代码块。

let getTempItem = id => ({ id: id, name: "Temp" });
  • 但是也有例外
let foo = () => { a: 1 };
foo() // undefined

上面代码中，本来是返回一个对象{ a: 1 }，但是由于引擎认为大括号是代码块，执行了a: 1。这时，a可以被解释为语句的标签，因此实际执行的语句是1;，函数就结束了，没有返回值，也因此它不会报错。

注意点

1. 箭头函数没有自己的this对象。

  • 对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。
function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer(); //箭头函数在这时确立了指向

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3 
// s2: 0

上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。

  • 由于箭头函数没有自己的this，所以不能用call()、apply()、bind()这些方法去改变this的指向。

  • arguments、super、new.target在箭头函数中也是指向外层函数。

2. 不可以当作构造函数

  • 不可以对箭头函数使用new命令，否则会抛出一个错误。

3.不可以使用arguments对象

  • 该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
const numbers = (...nums) => nums;

4. 不可以使用yield命令

  • 因此箭头函数不能用作 Generator 函数。
avatar
文章
阅读
粉丝