«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Эта статья является продолжением предыдущей: Прототипное программирование - Прототип и экземпляр объекта.

Здесь рассмотрим, как работать с прототипами и как осуществляется связь экземпляра объекта с прототипом объекта.

Примеры работы со свойством __proto__ и методами Object.create() и Object.setPrototypeOf().



Пример работы с прототипами

Пример работы с прототипами.

Сначала рассмотрим устаревший способ связи Экземпляра с Прототипом: через свойство __proto__. Но этот способ еще может встречаться, поэтому о нем нужно знать.

Пример 1.1

// Прототип "Солдат"
const soldier = {
    helth: 500,
    armor: 200
};

// Экземпляр прототипа "Джон"
const jonh = {
    helth: 300
};

// Связь Экземпляра с Прототипом
jonh.__proto__ = soldier;

console.log(jonh.armor);

Результат


200

1. Есть Прототип Объекта "Солдат" со свойствами: здоровье и броня.

2. Есть Экземпляр прототипа - Объект "Джон" с одним свойством: здоровье.

3. Устанавливаем связь Экземпляра с Прототипом при помощи свойства proto: благодаря этому Экземпляр получает от Прототипа значение недостающего свойства jonh.armor.

Итак, Экземпляр прототипа может получать от Прототипа значения тех свойств, которых у него нет, но которые есть у Прототипа.

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

Пример 1.2

// Прототип "Солдат"
const soldier = {
    helth: 500,
    armor: 200,
    sayHello: function(){
        console.log('Hello');
    }
};

// Экземпляр прототипа "Джон"
const jonh = {
    helth: 300
};

// Связь Экземпляра с Прототипом
jonh.__proto__ = soldier;

jonh.sayHello();

Результат


Hello

Свойства proto - устаревший способ

Ипользование свойства __proto__ - это устаревшая модель кодирования. Сейчас нужно использовать методы Object.create(), Object.getPrototypeOf и Object.setPrototypeOf. Подробнее об этом читайте здесь и здесь.

Метод Object.create() - создает объект-экземпляр с указанием объекта-прототипа.

Метод Object.getPrototypeOf - получает прототип.

Метод Object.setPrototypeOf - устанавливает прототип.

Метод Object.setPrototypeOf

Вернемся к примеру 1.2 и заменим фрагмент кода jonh.__proto__ = soldier; современным вариантом связи объекта-экземпляра с обектом-прототипом.

Пример 2.1

// Прототип "Солдат"
const soldier = {
    helth: 500,
    armor: 200,
    sayHello: function(){
        console.log('Hello');
    }
};

// Экземпляр прототипа "Джон"
const jonh = {
    helth: 300
};

// Связь Экземпляра с Прототипом
Object.setPrototypeOf(jonh, soldier);

jonh.sayHello();

Результат


Hello

Итак, метод Object.setPrototypeOf устанавливает прототип для экземпляра и имеет два параметра: 1-ый - объект-экземпляр и 2-ой - обект-прототип.

Таким образом, метод Object.setPrototypeOf устанавливает связь Экземпляр <--> Прототип.

Запись Object.setPrototypeOf(jonh, soldier) звучит так: устанавливаем прототип для jonh от soldier (прототип для Джона - от Солдата).

Метод Object.create()

В примере 2.1 сначала создавался объект-экземпляр jonh, потом устанавливалась его связь с обектом-прототипом soldier.

В основном на практике, при помощи метода Object.create() наследование от обекта-прототипа происходит сразу - на этапе создания объекта-экземпляра.

Как это выглядит?

Пример 3.1

// Прототип "Солдат"
const soldier = {
    helth: 500,
    armor: 200,
    sayHello: function(){
        console.log('Hello');
    }
};

// Создание экземпляра и его связь с прототипом
const jonh = Object.create(soldier);

jonh.sayHello();

Результат


Hello

Запись const jonh = Object.create(soldier) звучит так: создаем новый объект jonh, который прототипно наследуется от soldier.

При этом объект jonh еще не имеет собственных свойств и методов, но может наследовать их от soldier.

Итак, мы рассмотрели, как работают методы Object.create() и Object.setPrototypeOf().

О методе Object.getPrototypeOf() речь будет идти позже.

Информация данная на предыдущей и текущей страницах - это только начало знакомства с парадигмой объектно-ориентированного программирования. Этот стиль программирования осваивается постепенно. Следует помнить, что ООП - это наука о том, как делать правильную архитектуру.

Из этого материала, следует усвоить, что JavaScript также является Прототипноо Ориентированным языком программирования: это частный случай ООП (один из его стилей). В этой статье мы это и увидели, что многое в JavaScript строится на прототипах.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Свойство proto - Методы Object.create и Object.setPrototypeOf
152
Условия if else - Конструкция switch case - Тернарный оператор
191
Циклы while и for - Операторы break и continue
241
Практика часть 2 – Циклы и Условия
378
Объявление функций – Стрелочные функции ES6
383
Методы и свойства строк и чисел - Метод substr - Индекс строки
114
Практика часть 3 - Используем функции
251
Что такое callback-функция - Аргумент другой функции
428
Свойства и методы объектов - Деструктуризация объектов ES6
520
Методы массивов - Перебор элементов массива - Псевдомассивы
597
Передача данных по ссылке и по значению – Клонирование объекта
170
Метод assign() – Копирование исходных объектов в целевой объект
140
Копирование массивов - Оператор spread
259
Прототипное Программирование - Прототип и Экземпляр Объекта
148
Практика часть 4 - Используем функции как методы объекта
142
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки