Skip to content

箭头函数

箭头函数没有「this」

箭头函数没有 this,如果访问 this,则会从外部获取。

js
let group = {
  title: 'Our Group',
  students: ['John', 'Pete', 'Alice'],

  showList() {
    this.students.forEach((student) => console.log(this.title + ': ' + student))
  },
}

group.showList()

// Our Group: John
// Our Group: Pete
// Our Group: Alice

因为 foreach 使用了箭头函数,所以其中的 this.title 其实就是外部的 group.title

如果使用正常的函数定义,那么 title 会为 undefined

js
let group = {
  title: 'Our Group',
  students: ['John', 'Pete', 'Alice'],

  showList() {
    this.students.forEach(function (student) {
      console.log(this.title + ': ' + student)
    })
  },
}

group.showList()

// undefined: John;
// undefined: Pete;
// undefined: Alice;

注意:不具有 this 意味着箭头函数不能用作构造器,不能用 new 来调用它们。

箭头函数没有「arguments」

箭头函数也没有 arguments 变量,当我们需要使用当前的 thisarguemnts 转发同一个调用时,这对装饰器(decorators)来说非常有用。

例如,defer(f, ms) 获得了一个函数,并返回一个包装器,该包装器将调用延迟 ms 毫秒。

js
function defer(f, ms) {
  return function () {
    setTimeout(() => f.apply(this, arguments), ms)
  }
}

function sayHi(who) {
  console.log('Hello, ' + who)
}

let sayHiDeferred = defer(sayHi, 2000)
sayHiDeferred('John') // 2 秒后显示:Hello, John

Released under the MIT License.