属性 ESnext 中的初始化语法

Question

我知道在 JavaScript classes.

中有一个名为 "property initializer syntax" 的新语法的 TC-39 提议

我还没有找到很多这方面的文档，但是在讨论 React 时，它在一个书呆子课程中使用。

class Foo {
  bar = () => {
    return this;
  }
}

这个提议的目的是什么？它与以下内容有何不同：

class Foo {
  bar() {
    return this;
  }
}

Answer 1

当您使用带有箭头函数的属性初始化语法时，此函数中的 this 将始终引用 class 的实例，而对于常规方法，您可以更改this 通过使用 .call() 或 .bind():

class Foo {
  constructor() {
    this.test = true;
  }
  bar = () => {
    return this;
  }
}
console.log(new Foo().bar.call({}).test); // true

class Foo2 {
  constructor() {
    this.test = true;
  }
  bar() {
    return this;
  }
}
console.log(new Foo2().bar.call({}).test); // undefined

此外，此语法还可用于函数以外的其他用途。

Answer 2

从另一个角度来看，您可以将属性初始化语法用作 shorthand，否则将在构造函数中进行冗长的方法绑定。

另请注意，语法也可用于变量。

class Property {
  v = 42

  bar = () => {
    return this.v
  }
}
// --------

class Bound {
  constructor() {
    this.v = 43
    this.bar = this.bar.bind(this)
  }

  bar() {
    return this.v;
  }
}
// --------

class Classic {
  constructor() {
    this.v = 44
  }

  bar() {
    return this.v;
  }
}

,

const allBars = [
  new Property().bar,
  new Bound().bar,
  new Classic().bar
]

console.log([
  allBars[0](),
  allBars[1](),
  allBars[2]()
])

// prints: [42, 43, undefined]

属性 v 在 allBars 数组中未定义，其中未绑定 bar 的 this 点是从上下文中调用的。

属性 ESnext 中的初始化语法

Property initializer syntax in ESnext

javascript

ecmascript-next