Синтаксис инициализатора свойства в ESnext

Question

Я понимаю, что есть предложение TC-39 для нового синтаксиса, называемого "синтаксис инициализатора свойства" в JavaScript classэс.

Я еще не нашел много документации по этому вопросу, но она используется в ходе обсуждения React.

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

Какова цель этого предложения? Чем он отличается от:

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

Answer 1

Когда вы используете синтаксис инициализатора свойства с функцией стрелки, this в этой функции всегда будет ссылаться на экземпляр класса, тогда как с помощью обычных методов вы можете изменить 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

С другой стороны, вы можете использовать синтаксис инициализатора свойства в качестве сокращения для иначе подробной привязки метода в конструкторе.

Также обратите внимание, что синтаксис можно использовать и для переменных.

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, где this несвязанных bar точки, так как он был вызван из его контекста.