<section id="description">
Подумайте о том, что люди видят каждый день, как автомобили, магазины и птицы. Это все <code>objects</code> : ощутимые вещи, с которыми люди могут наблюдать и взаимодействовать. Каковы некоторые качества этих <code>objects</code> ? У автомобиля есть колеса. Магазины продают товары. Птицы имеют крылья. Эти качества или <code>properties</code> определяют, что составляет <code>object</code> . Обратите внимание, что подобные <code>objects</code> имеют одни и те же <code>properties</code> , но могут иметь разные значения для этих <code>properties</code> . Например, у всех автомобилей есть колеса, но не у всех автомобилей одинаковое количество колес. <code>Objects</code> в JavaScript используются для моделирования объектов реального мира, придания им <code>properties</code> и поведения, как и их реальных копий. Вот пример использования этих понятий для создания <code>object</code> <code>duck</code> : <blockquote> let duck = { имя: «Афлак», numLegs: 2 }; </blockquote> Этот <code>object</code> <code>duck</code> имеет две пары свойств / значений: <code>name</code> «Aflac» и <code>numLegs</code> из 2.</section>

Create a Basic JavaScript Object

<section id="description">
Последняя задача создала <code>object</code> с различными <code>properties</code> , теперь вы увидите, как получить доступ к значениям этих <code>properties</code> . Вот пример: <blockquote> let duck = { имя: «Афлак», numLegs: 2 }; console.log (duck.name); // Это печатает «Aflac» на консоли </blockquote> Точечная нотация используется для имени <code>object</code> , <code>duck</code> , а затем имя <code>property</code> , <code>name</code> , для доступа к значению «Aflac».</section>

Use Dot Notation to Access the Properties of an Object

<section id="description">
<code>Objects</code> могут иметь особый тип <code>property</code> , называемый <code>method</code> . <code>Methods</code> - это <code>properties</code> которые являются функциями. Это добавляет другое поведение к <code>object</code> . Вот пример <code>duck</code> с помощью метода: <blockquote> let duck = { имя: «Афлак», numLegs: 2, sayName: function () {return "Название этой утки -" + duck.name + ".";} }; duck.sayName (); // Возвращает «Название этой утки - Афлак». </blockquote> В примере добавлен <code>method</code> <code>sayName</code> , который является функцией, которая возвращает предложение, дающее имя <code>duck</code> . Обратите внимание, что <code>method</code> получил доступ к свойству <code>name</code> в операторе return с помощью <code>duck.name</code> . Следующая задача будет охватывать другой способ сделать это.</section>

Create a Method on an Object

<section id="description">
Последняя задача привела <code>method</code> к объекту <code>duck</code> . Он использовал <code>duck.name</code> для доступа к значению свойства <code>name</code> в операторе return: <code>sayName: function() {return "The name of this duck is " + duck.name + ".";}</code> Хотя это действительный способ доступа к объекту, здесь есть ошибка. Если имя переменной изменяется, необходимо также обновить любой код, ссылающийся на исходное имя. В определении коротких объектов это не проблема, но если у объекта много ссылок на его свойства, вероятность появления ошибки больше. Чтобы избежать этих проблем, <code>this</code> ключевое слово: <blockquote> let duck = { имя: «Афлак», numLegs: 2, sayName: function () {return "Название этой утки:" + this.name + ".";} }; </blockquote> <code>this</code> глубокая тема, и приведенный выше пример - только один способ ее использования. В текущем контексте <code>this</code> относится к объекту, с которым связан метод: <code>duck</code> . Если имя объекта изменено на <code>mallard</code> , нет необходимости находить все ссылки на <code>duck</code> в коде. Это делает код многоразовым и более простым для чтения.</section>

Make Code More Reusable with the this Keyword

<section id="description">
<code>Constructors</code> - это функции, которые создают новые объекты. Они определяют свойства и поведение, которые будут принадлежать новому объекту. Подумайте о них как о плане создания новых объектов. Вот пример <code>constructor</code> : <blockquote> функция Bird () { this.name = "Альберт"; this.color = "blue"; this.numLegs = 2; } </blockquote> Этот <code>constructor</code> определяет объект <code>Bird</code> с <code>name</code> свойств, <code>color</code> и <code>numLegs</code> установленными на Albert, blue и 2, соответственно. <code>Constructors</code> следуют нескольким соглашениям: <ul><li> <code>Constructors</code> определяются с заглавным именем, чтобы отличать их от других функций, которые не являются <code>constructors</code> . </li><li> <code>Constructors</code> используют ключевое слово <code>this</code> для установки свойств объекта, который они создадут. Внутри <code>constructor</code> <code>this</code> относится к новому объекту, который он создаст. </li><li> <code>Constructors</code> определяют свойства и поведение вместо того, чтобы возвращать значение, как могли бы другие функции. </li></ul>
</section>

Define a Constructor Function

<section id="description">
Вот конструктор <code>Bird</code> из предыдущего вызова: <blockquote> функция Bird () { this.name = "Альберт"; this.color = "blue"; this.numLegs = 2; // «this» внутри конструктора всегда ссылается на создаваемый объект } let blueBird = new Bird (); </blockquote> Обратите внимание, что <code>new</code> оператор используется при вызове конструктора. Это говорит JavaScript для создания нового <code>instance</code> <code>Bird</code> под названием <code>blueBird</code> . Без <code>new</code> оператора <code>this</code> внутри конструктора не будет указывать на вновь созданный объект, давая неожиданные результаты. Теперь <code>blueBird</code> имеет все свойства, определенные внутри конструктора <code>Bird</code> : <blockquote> blueBird.name; // => Альберт blueBird.color; // => синий blueBird.numLegs; // => 2 </blockquote> Как и любой другой объект, его свойства могут быть доступны и изменены: <blockquote> blueBird.name = 'Elvira'; blueBird.name; // => Эльвира </blockquote>
</section>

Use a Constructor to Create Objects

<section id="description">
Конструкторы <code>Bird</code> and <code>Dog</code> из последней задачи хорошо работали. Однако обратите внимание, что все <code>Birds</code> , созданные с помощью конструктора <code>Bird</code> , автоматически называются Albert, имеют синий цвет и имеют две ноги. Что делать, если вы хотите, чтобы птицы с разными значениями имели название и цвет? Можно изменить свойства каждой птицы вручную, но это будет много работы: <blockquote> пусть лебедь = новая птица (); swan.name = "Carlos"; swan.color = "white"; </blockquote> Предположим, вы писали программу, чтобы отслеживать сотни или даже тысячи разных птиц во вольерах. Это займет много времени, чтобы создать всех птиц, а затем изменить свойства на разные значения для каждого. Чтобы легче создать разные объекты <code>Bird</code> , вы можете сконструировать конструктор Bird для принятия параметров: <blockquote> функция Птица (имя, цвет) { this.name = name; this.color = color; this.numLegs = 2; } </blockquote> Затем передайте значения в качестве аргументов, чтобы определить каждую уникальную птицу в конструкторе <code>Bird</code> : <code>let cardinal = new Bird("Bruce", "red");</code> Это дает новый экземпляр <code>Bird</code> с именем и цветовыми свойствами, установленными на Bruce и red, соответственно. Свойство <code>numLegs</code> по-прежнему установлено <code>numLegs</code> 2. <code>cardinal</code> обладает следующими свойствами: <blockquote> cardinal.name // => Брюс cardinal.color // => красный cardinal.numLegs // => 2 </blockquote> Конструктор более гибкий. Теперь можно определить свойства для каждой <code>Bird</code> в момент ее создания, что является одним из способов использования JavaScript-конструкторов. Они группируют объекты вместе на основе общих характеристик и поведения и определяют план, который автоматизирует их создание.</section>

Extend Constructors to Receive Arguments

<section id="description">
Каждый раз, когда функция-конструктор создает новый объект, этот объект считается <code>instance</code> его конструктора. JavaScript дает удобный способ проверить это с помощью <code>instanceof</code> оператора. <code>instanceof</code> позволяет сравнивать объект с конструктором, возвращая <code>true</code> или <code>false</code> на основе того, был ли этот объект создан с помощью конструктора. Вот пример: <blockquote> let Bird = function (имя, цвет) { this.name = name; this.color = color; this.numLegs = 2; } пусть ворона = новая птица («Алексис», «черный»); ворон экземпляр птицы; // => true </blockquote> Если объект создается без использования конструктора, <code>instanceof</code> проверяет, что он не является экземпляром этого конструктора: <blockquote> let canary = { имя: «Милдред», цвет: «Желтый», numLegs: 2 }; canary instanceof Bird; // => false </blockquote>
</section>

Verify an Object's Constructor with instanceof

<section id="description">
 В следующем примере конструктор <code>Bird</code> определяет два свойства: <code>name</code> и <code>numLegs</code>
 :
<pre class="language-js"><code>function Bird(name) {
 this.name = name;
 this.numLegs = 2;
}
let duck = new Bird("Donald");
let canary = new Bird("Tweety");</code></pre>
<code>name</code> и <code>numLegs</code> называются
 <code>own</code> свойствами, поскольку они определяются непосредственно на объекте экземпляра. Это означает, что
 <code>duck</code> и <code>canary</code> имеют свою отдельную копию этих свойств. Фактически каждый экземпляр
 <code>Bird</code> будет иметь свою собственную копию этих свойств. Следующий код добавляет все <code>own</code>
 свойства <code>duck</code> к массиву <code>ownProps</code> : <pre class="language-js"><code>let ownProps = [];
for (let property in duck) {
 if (duck.hasOwnProperty(property)) {
 ownProps.push(property);
 }
}
console.log (ownProps); // ["name", "numLegs"]</code></pre>
 
</section>

Understand Own Properties

<section id="description">
Поскольку <code>numLegs</code> , вероятно, будет иметь одинаковое значение для всех экземпляров <code>Bird</code> , у вас по существу есть дублируемая переменная <code>numLegs</code> внутри каждого экземпляра <code>Bird</code> . Это может быть не проблема, когда есть только два экземпляра, но представьте, есть ли миллионы экземпляров. Это было бы много дублированных переменных. Лучше всего использовать <code>prototype</code> <code>Bird's</code> . <code>prototype</code> - это объект, который используется для ВСЕХ экземпляров <code>Bird</code> . Вот как добавить <code>numLegs</code> в <code>Bird prototype</code> : <blockquote> Bird.prototype.numLegs = 2; </blockquote> Теперь все экземпляры <code>Bird</code> имеют свойство <code>numLegs</code> . <blockquote> console.log (duck.numLegs); // печатает 2 console.log (canary.numLegs); // печатает 2 </blockquote> Поскольку все экземпляры автоматически имеют свойства на <code>prototype</code> , подумайте о <code>prototype</code> как о «рецепте» для создания объектов. Обратите внимание, что <code>prototype</code> <code>duck</code> и <code>canary</code> является частью конструктора <code>Bird</code> как <code>Bird.prototype</code> . Почти каждый объект в JavaScript имеет свойство <code>prototype</code> которое является частью созданной им функции-конструктора.</section>

Use Prototype Properties to Reduce Duplicate Code

<section id="description">
Теперь вы видите два вида свойств: <code>own</code> свойства и свойства <code>prototype</code> . <code>Own</code> свойства определяются непосредственно на самом экземпляре объекта. И <code>prototype</code> определены на <code>prototype</code> . <blockquote> функция Bird (name) { this.name = name; //собственность } Bird.prototype.numLegs = 2; // свойство прототипа пусть утка = новая птица («Дональд»); </blockquote> Вот как вы добавляете <code>own</code> свойства <code>duck</code> к массиву <code>ownProps</code> и свойства <code>prototype</code> для массива <code>prototypeProps</code> : <blockquote> let ownProps = []; let prototypeProps = []; для (пусть свойство в утке) { if (duck.hasOwnProperty (свойство)) { ownProps.push (свойство); } else { prototypeProps.push (свойство); } } console.log (ownProps); // печатает ["name"] console.log (prototypeProps); // печатает ["numLegs"] </blockquote>
</section>

Iterate Over All Properties

<section id="description">
Существует специальное свойство <code>constructor</code> расположенное на объектных экземплярах <code>duck</code> и <code>beagle</code> которые были созданы в предыдущих задачах: <blockquote> let duck = new Bird (); let beagle = new Dog (); console.log (duck.constructor === Bird); // выводит true console.log (beagle.constructor === Собака); // выводит true </blockquote> Обратите внимание, что свойство <code>constructor</code> является ссылкой на конструктор, создавший экземпляр. Преимущество свойства <code>constructor</code> заключается в том, что можно проверить это свойство, чтобы узнать, какой он объект. Вот пример того, как это можно использовать: <blockquote> function joinBirdFraternity (кандидат) { if (кандидат.конструктор === Птица) { return true; } else { return false; } } </blockquote> Заметка Поскольку свойство <code>constructor</code> может быть перезаписано (что будет рассмотрено в следующих двух задачах), лучше всего использовать метод <code>instanceof</code> для проверки типа объекта.</section>

Understand the Constructor Property

<section id="description">
До сих пор вы добавляли свойства к <code>prototype</code> индивидуально: <blockquote> Bird.prototype.numLegs = 2; </blockquote> Это становится утомительным после нескольких свойств. <blockquote> Bird.prototype.eat = function () { console.log («nom nom nom»); } Bird.prototype.describe = function () { console.log («Мое имя» + this.name); } </blockquote> Более эффективным способом является создание <code>prototype</code> для нового объекта, который уже содержит свойства. Таким образом, свойства добавляются сразу: <blockquote> Bird.prototype = { numLegs: 2, eat: function () { console.log («nom nom nom»); }, Опишите: function () { console.log («Мое имя» + this.name); } }; </blockquote>
</section>

Change the Prototype to a New Object

<section id="description">
Существует один важный побочный эффект ручной настройки <code>prototype</code> на новый объект. Это стерло свойство <code>constructor</code> ! Код в предыдущем вызове напечатал следующее для <code>duck</code> : <blockquote> console.log (duck.constructor) // печатает 'undefined' - Ой! </blockquote> Чтобы исправить это, всякий раз, когда прототип вручную устанавливается на новый объект, не забудьте определить свойство <code>constructor</code> : <blockquote> Bird.prototype = { constructor: Bird, // определить свойство constructor numLegs: 2, eat: function () { console.log («nom nom nom»); }, Опишите: function () { console.log («Мое имя» + this.name); } }; </blockquote>
</section>

Remember to Set the Constructor Property when Changing the Prototype

<section id="description">
Подобно тому, как люди наследуют гены от своих родителей, объект наследует свой <code>prototype</code> непосредственно от созданной им функции-конструктора. Например, здесь конструктор <code>Bird</code> создает объект <code>duck</code> : <blockquote> функция Bird (name) { this.name = name; } пусть утка = новая птица («Дональд»); </blockquote> <code>duck</code> наследует свой <code>prototype</code> из функции конструктора <code>Bird</code> . Вы можете показать это отношение с методом <code>isPrototypeOf</code> : <blockquote> Bird.prototype.isPrototypeOf (уток); // возвращает true </blockquote>
</section>

Understand Where an Object’s Prototype Comes From

<section id="description">
Все объекты в JavaScript (за некоторыми исключениями) имеют <code>prototype</code> . Кроме того, сам <code>prototype</code> объекта является объектом. <blockquote> функция Bird (name) { this.name = name; } тип Bird.prototype; // => объект </blockquote> Поскольку <code>prototype</code> является объектом, <code>prototype</code> может иметь свой собственный <code>prototype</code> ! В этом случае <code>prototype</code> <code>Bird.prototype</code> является <code>Object.prototype</code> : <blockquote> Object.prototype.isPrototypeOf (Bird.prototype); // возвращает true </blockquote> Как это полезно? Вы можете вспомнить метод <code>hasOwnProperty</code> из предыдущего <code>hasOwnProperty</code> : <blockquote> пусть утка = новая птица («Дональд»); duck.hasOwnProperty ( "имя"); // => true </blockquote> Метод <code>hasOwnProperty</code> определен в <code>Object.prototype</code> , к которому можно получить доступ с помощью <code>Bird.prototype</code> , к которому затем можно получить доступ <code>duck</code> . Это пример цепи <code>prototype</code> . В этой <code>prototype</code> цепочке <code>Bird</code> является <code>supertype</code> для <code>duck</code> , а <code>duck</code> - <code>subtype</code> . <code>Object</code> - это <code>supertype</code> как для <code>Bird</code> и для <code>duck</code> . <code>Object</code> - это <code>supertype</code> для всех объектов в JavaScript. Поэтому любой объект может использовать метод <code>hasOwnProperty</code> .</section>

Understand the Prototype Chain

<section id="description">
В программировании есть принцип « <code>Don't Repeat Yourself (DRY)</code> . Причина повторного кода - проблема, потому что для любого изменения требуется код исправления в нескольких местах. Это обычно означает больше работы для программистов и больше возможностей для ошибок. В приведенном ниже примере обратите внимание, что метод <code>describe</code> разделяет <code>Bird</code> and <code>Dog</code> : <blockquote> Bird.prototype = { конструктор: Птица, Опишите: function () { console.log («Мое имя» + this.name); } }; Dog.prototype = { конструктор: Собака, Опишите: function () { console.log («Мое имя» + this.name); } }; </blockquote> Метод <code>describe</code> повторяется в двух местах. Код можно редактировать, чтобы следовать принципу <code>DRY</code> , создав <code>supertype</code> (или родительский элемент) под названием <code>Animal</code> : <blockquote> функция Animal () {}; Animal.prototype = { конструктор: Animal, Опишите: function () { console.log («Мое имя» + this.name); } }; </blockquote> Поскольку <code>Animal</code> включает метод <code>describe</code> , вы можете удалить его из <code>Bird</code> and <code>Dog</code> : <blockquote> Bird.prototype = { конструктор: Птица }; Dog.prototype = { конструктор: Собака }; </blockquote>
</section>

Use Inheritance So You Don't Repeat Yourself

<section id="description">
В предыдущем вызове вы создали <code>supertype</code> под названием <code>Animal</code> который определял поведение, разделяемое всеми животными: <blockquote> функция Animal () {} Animal.prototype.eat = function () { console.log («nom nom nom»); }; </blockquote> Эта и следующая задача будет посвящена тому, как повторно использовать методы <code>Animal's</code> внутри <code>Bird</code> and <code>Dog</code> не определяя их снова. Он использует метод, называемый <code>inheritance</code> . Эта задача охватывает первый шаг: создайте экземпляр <code>supertype</code> (или родителя). Вы уже знаете один способ создания экземпляра <code>Animal</code> с помощью <code>new</code> оператора: <blockquote> let animal = new Animal (); </blockquote> Существуют некоторые недостатки при использовании этого синтаксиса для <code>inheritance</code> , которые слишком сложны для этой задачи. Вместо этого, это альтернативный подход без этих недостатков: <blockquote> let animal = Object.create (Animal.prototype); </blockquote> <code>Object.create(obj)</code> создает новый объект и устанавливает <code>obj</code> как <code>prototype</code> нового объекта. Напомним, что <code>prototype</code> подобен «рецепту» для создания объекта. Установив <code>prototype</code> от <code>animal</code> быть <code>Animal's</code> <code>prototype</code> , вы фактически давая <code>animal</code> экземпляру же «рецепт» , как и любой другой экземпляр <code>Animal</code> . <blockquote> animal.eat (); // печатает "nom nom nom" животный экземпляр животных; // => true </blockquote>
</section>

Inherit Behaviors from a Supertype

<section id="description">
В предыдущем вызове вы видели первый шаг для наследования поведения от <code>supertype</code> (или родительского) <code>Animal</code> : создание нового экземпляра <code>Animal</code> . Эта задача охватывает следующий шаг: установите <code>prototype</code> <code>subtype</code> (или ребенка) - в этом случае, <code>Bird</code> - для примера <code>Animal</code> . <blockquote> Bird.prototype = Object.create (Animal.prototype); </blockquote> Помните, что <code>prototype</code> подобен «рецепту» для создания объекта. В некотором смысле, рецепт для <code>Bird</code> теперь включает в себя все ключевые «ингредиенты» от <code>Animal</code> . <blockquote> пусть утка = новая птица («Дональд»); duck.eat (); // печатает "nom nom nom" </blockquote> <code>duck</code> наследует все свойства <code>Animal</code> , в том числе метод <code>eat</code> .</section>

Set the Child's Prototype to an Instance of the Parent

<section id="description">
Когда объект наследует свой <code>prototype</code> от другого объекта, он также наследует свойство конструктора <code>supertype</code> . Вот пример: <blockquote> function Bird () {} Bird.prototype = Object.create (Animal.prototype); let duck = new Bird (); duck.constructor // function Animal () {...} </blockquote> Но <code>duck</code> и все случаи <code>Bird</code> должны показать, что они были построены <code>Bird</code> а не <code>Animal</code> . Для этого, вы можете вручную установить <code>Bird's</code> свойство конструктора для <code>Bird</code> объекта: <blockquote> Bird.prototype.constructor = Bird; duck.constructor // function Bird () {...} </blockquote>
</section>

Reset an Inherited Constructor Property

<section id="description">
Функция-конструктор, которая наследует свой объект- <code>prototype</code> от функции-конструктора <code>supertype</code> может по-прежнему иметь свои собственные методы в дополнение к унаследованным методам. Например, <code>Bird</code> - это конструктор, который наследует свой <code>prototype</code> от <code>Animal</code> : <blockquote> функция Animal () {} Animal.prototype.eat = function () { console.log («nom nom nom»); }; function Bird () {} Bird.prototype = Object.create (Animal.prototype); Bird.prototype.constructor = Bird; </blockquote> В дополнение к тому, что унаследовано от <code>Animal</code> , вы хотите добавить поведение, уникальное для объектов <code>Bird</code> . Здесь <code>Bird</code> получит функцию <code>fly()</code> . Функции добавляются к <code>prototype</code> <code>Bird's</code> же, как и любая функция конструктора: <blockquote> Bird.prototype.fly = function () { console.log («Я летаю!»); }; </blockquote> Теперь экземпляры <code>Bird</code> будут иметь методы <code>eat()</code> и <code>fly()</code> : <blockquote> let duck = new Bird (); duck.eat (); // печатает "nom nom nom" duck.fly (); // печатает «Я лечу!» </blockquote>
</section>

Add Methods After Inheritance

<section id="description">
На предыдущих уроках вы узнали, что объект может наследовать свое поведение (методы) от другого объекта, клонируя его <code>prototype</code> объекта: <blockquote> ChildObject.prototype = Object.create (ParentObject.prototype); </blockquote> Затем <code>ChildObject</code> получил свои собственные методы, связав их с <code>prototype</code> : <blockquote> ChildObject.prototype.methodName = function () {...}; </blockquote> Можно переопределить унаследованный метод. Это делается так же, добавив метод <code>ChildObject.prototype</code> с использованием того же имени метода, что и для переопределения. Вот пример того, как <code>Bird</code> переопределяет метод <code>eat()</code> унаследованный от <code>Animal</code> : <blockquote> функция Animal () {} Animal.prototype.eat = function () { возвращение «nom nom nom»; }; function Bird () {} // Наследовать все методы из Animal Bird.prototype = Object.create (Animal.prototype); // Bird.eat () переопределяет Animal.eat () Bird.prototype.eat = function () { вернуть «peck peck peck»; }; </blockquote> Если у вас есть экземпляр <code>let duck = new Bird();</code> и вы вызываете <code>duck.eat()</code> , это то, как JavaScript ищет метод <code>duck's</code> цепочке <code>prototype</code> утки: 1. duck => Is eat () определен здесь? № 2. Птица => Есть ли () определенная здесь? => Да. Выполните его и прекратите поиск. 3. Также определено Animal => eat (), но JavaScript дошел до этого уровня. 4. Object => JavaScript остановил поиск до достижения этого уровня.</section>

Override Inherited Methods

<section id="description">
As you have seen, behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like <code>Bird</code> and <code>Airplane</code>. They can both fly, but a <code>Bird</code> is not a type of <code>Airplane</code> and vice versa.
For unrelated objects, it's better to use <code>mixins</code>. A <code>mixin</code> allows other objects to use a collection of functions.<pre><code class="language-js">let flyMixin = function(obj) {
 obj.fly = function() {
 console.log("Flying, wooosh!");
 }
};
</code></pre>
The <code>flyMixin</code> takes any object and gives it the <code>fly</code> method.
<pre><code class="language-js">let bird = {
 name: "Donald",
 numLegs: 2
};

let plane = {
 model: "777",
 numPassengers: 524
};

flyMixin(bird);
flyMixin(plane);
</code></pre>
Here <code>bird</code> and <code>plane</code> are passed into <code>flyMixin</code>, which then assigns the <code>fly</code> function to each object. Now <code>bird</code> and <code>plane</code> can both fly:
<pre><code class="language-js">bird.fly(); // prints "Flying, wooosh!"
plane.fly(); // prints "Flying, wooosh!"
</code></pre>
Note how the <code>mixin</code> allows for the same <code>fly</code> method to be reused by unrelated objects <code>bird</code> and <code>plane</code>.
</section>

Use a Mixin to Add Common Behavior Between Unrelated Objects

<section id="description">
В предыдущем вызове у <code>bird</code> было <code>name</code> общественной собственности. Он считается открытым, потому что его можно получить и изменить вне определения <code>bird</code> . <blockquote> bird.name = "Duffy"; </blockquote> Поэтому любая часть вашего кода может легко изменить имя <code>bird</code> на любое значение. Подумайте о таких вещах, как пароли и банковские счета, которые легко заменяются любой частью вашей кодовой базы. Это может вызвать множество проблем. Самый простой способ сделать свойства private - создать переменную в функции конструктора. Это изменяет область действия этой переменной в функции конструктора по сравнению с глобально доступной. Таким образом, свойство может быть доступно и доступно только с помощью методов, также входящих в конструкторскую функцию. <blockquote> функция Bird () { let hatchedEgg = 10; // частная собственность this.getHatchedEggCount = function () {// общедоступный метод, который может использовать объект птицы return hatchedEgg; }; } let ducky = new Bird (); ducky.getHatchedEggCount (); // возвращает 10 </blockquote> Здесь <code>getHachedEggCount</code> является привилегированным методом, поскольку он имеет доступ к частной переменной <code>hatchedEgg</code> . Это возможно, потому что <code>hatchedEgg</code> объявлен в том же контексте, что и <code>getHachedEggCount</code> . В JavaScript функция всегда имеет доступ к контексту, в котором она была создана. Это называется <code>closure</code> .</section>

Use Closure to Protect Properties Within an Object from Being Modified Externally

<section id="description">
Общим шаблоном в JavaScript является выполнение функции сразу после ее объявления: <blockquote> (функция () { console.log («Chirp, chirp!»); }) (); // это анонимное выражение функции, которое выполняется сразу // Вывод «Чирп, чириканье!» немедленно </blockquote> Обратите внимание, что функция не имеет имени и не сохраняется в переменной. Две скобки () в конце выражения функции приводят к немедленному ее выполнению или вызову. Этот шаблон известен как выражение, <code>immediately invoked function expression</code> или <code>IIFE</code> .</section>

Understand the Immediately Invoked Function Expression (IIFE)

<section id="description">
<code>IIFE</code> <code>immediately invoked function expression</code> ( <code>IIFE</code> ) часто используется для группировки связанных функций в один объект или <code>module</code> . Например, более ранняя задача определила два микшина: <blockquote> функция glideMixin (obj) { obj.glide = function () { console.log («Скольжение по воде»); }; } функция flyMixin (obj) { obj.fly = function () { console.log («Flying, wooosh!»); }; } </blockquote> Мы можем сгруппировать эти <code>mixins</code> в модуль следующим образом: <blockquote> let motionModule = (function () { вернуть { glideMixin: function (obj) { obj.glide = function () { console.log («Скольжение по воде»); }; }, flyMixin: function (obj) { obj.fly = function () { console.log («Flying, wooosh!»); }; } } }) (); // Две скобки приводят к немедленному вызову функции </blockquote> Обратите внимание, что вы <code>immediately invoked function expression</code> ( <code>IIFE</code> ), которое возвращает объект <code>motionModule</code> . Этот возвращенный объект содержит все поведение <code>mixin</code> как свойства объекта. Преимущество шаблона <code>module</code> заключается в том, что все поведение движения может быть упаковано в один объект, который затем может использоваться другими частями вашего кода. Вот пример использования: <blockquote> motionModule.glideMixin (уток); duck.glide (); </blockquote>
</section>