Разрушение объекта «этот» в JavaScript

Это короткий и простой трюк для работы с классами в JavaScript. Многие программисты, включая себя, комфортно с объектно-ориентированными концепциями программирования, используются для работы с классами.

Если вы попадаете в эту категорию, вы, вероятно, любите использование классов в JavaScript, как это:

class MyClass {
  constructor(){
    this.message = "hello there"
  }

  printMessage = () => {
    console.log(this.message) // valid prints "hello there"
  }
}

Хотя это просто Синтаксис сахара На вершине регулярного наследования на основе прототипа. Мне легче читать.

Одна конкретная проблема у меня с синтаксисом классов JavaScript, это как члены класса, как сообщение , ссылаются в функции членов.

В приведенном выше примере мы должны использовать Это. Мессаж в PrintMessage хотя PrintMessage это член MyClass Экземпляр для ссылки сообщение .

Было бы намного приятнее просто сделать следующее:

class MyClass {
  constructor(){
    this.message = "hello there"
  }

  printMessage = () => {
    console.log(message) // invalid prints undefined
  }
}

Это надуманный пример, который я знаю. Но печатать и читать Это. Мессаж снова и снова и снова может быть довольно громоздким, если он используется в функции достаточно.

Затем я понял, что мы можем просто использовать разрушимость на Это Объект функций-членов.

class MyClass {
  constructor(){
    this.message = "hello there"
  }

  printMessage = () => {
    const {message} = this
    console.log(message)
  }
}

Типы ссылок и примитивные типы

Такой подход имеет некоторые недостатки и GOTCHAS при работе с типовыми типами и примитивными типами. Приятно быть в курсе их, если вы решите это сделать.

Давайте посмотрим на это определение класса:

class MyClass {
  constructor(){
    this.message = "hello there" // primitive type
    this.items = [1, 2, 3] // reference type
  }

  printMessageMutable = () => {
    // copies the value of this.message into message
    let {message} = this

    console.log(this.message) // prints "hello there"
    console.log(message) // prints "hello there"

    // will not update this.message
    message = "there hello"

    console.log(this.message) // prints "hello there"
    console.log(message) // prints "there hello"
  }

  printMessageImutable = () => {
    const {message} = this
    console.log(message) // prints "hello there"
  }

  printItemsMutable = () => {
    // creates mutable a copy of the reference to this.items
    let {items} = this

    // both items and this.items reference the same array
    items.push(42)

    console.log(items) // prints [1, 2, 3, 42]
    console.log(this.items) // prints [1, 2, 3, 42]

    // now items and this.items reference different arrays
    items = [4, 5, 6]

    console.log(items) // prints [4, 5, 6]
    console.log(this.items) // prints [1, 2, 3, 42]
  }
} // MyClass

В PrintMessagemutable Мы создаем локальную копию Это. Мессаж Отказ Это означает, что любые изменения в сообщение В функции не будет отражена в Это. Мессаж Отказ Если нам нужно было обновить Это. Мессаж в PrintMessagemutable Это может быть не лучшее место для использования деструктурирования на Это Отказ

В PrintMessageimutable Мы создаем постоянную копию Это. Мессаж Отказ Поэтому мы когда-либо планировали использовать ценность Это. Мессаж и не могу попытаться обновить его, используя локальную переменную сообщение . Это отличный случай для использования объекта Разрушение на Это Отказ

В prompiteMutmutable Мы обновляем массив. Массивы являются ссылочными типами в JavaScript. Когда мы называем items.push (42) оба Предметы и Это.темы ссылаются на тот же массив. Из-за этого оба предметы и Это.темы будет обновлено. Позже мы устанавливаем локальную переменную предметы на новый массив [4, 5, 6] . Теперь, когда мы печатаем предметы и Это Мы получаем разные ценности. Это потому, что Это.темы все еще указывает на старый массив, изначально установленный в конструкторе.

Заключение

Вот и все. Я просто думаю, что приятно иметь возможность бросить это. Особенно, если переменная элемента используется много в одной функции. Тем не менее, это не будет подходящим для всех случаев использования.

Спасибо за чтение, дайте мне знать, что вы не согласны!

Оригинал: “https://dev.to/hunterheston/destructuring-the-this-object-in-javascript-1ll”

Типы ссылок и примитивные типы

Заключение

Читайте ещё по теме: