Это короткий и простой трюк для работы с классами в 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”