Классы JavaScript, наследование и связывание прототипов (способ ES5 и ES6)

Понимание и реализация объектно-ориентированного программирования

An article from https://knowledgescoops.com

Класс JavaScript (ES6)

Можно связать класс в JavaScript с классом на объектно-ориентированном языке программирования. Класс может выглядеть примерно так:

Как программист, мы просто создаем экземпляры класса как:

var user = new User('Kunal');
console.log(user);

Объект класса регистрируется, как на изображении выше. Посмотрите, как экземпляр, созданный для класса, представлен внутри прототипами и парами "ключ-значение" объекта.

Занятия в ES5

Преобразование класса в ES5

Пользовательский экземпляр, который мы только что видели, представлен прототипами и парами "ключ-значение" объекта, что соответствует синтаксису ES5. Итак, мы можем четко сказать, что классы - это просто синтаксический сахар по сравнению с кодом ES5.

Рассмотрим сценарий, если вам нужно было написать тот же код на ES5 без синтаксического сахара. Здесь мы можем использовать шаблон создания объекта.

Код, который мы написали выше, может быть написан на ES5 с помощью следующей функции-конструктора:

Как видите, в консоли мы получаем тот же вывод, что и при создании экземпляра из класса.

__proto__ Внутри __proto__

Цепочка прототипов

Вы заметили, что у нас __proto__ внутри __proto__?

Это цепочка прототипов.

В JavaScript у каждого объекта есть прототип, и мы также знаем, что прототип объекта также является объектом, таким образом создавая вложение прототипов.

Итак, JavaScript использует аналогичную концепцию для создания наследования путем связывания нескольких экземпляров с прототипами и создания вложенных прототипов.

Например, объект, показанный на изображении выше, является объектом User. Мы можем назначить User.prototype.prototype экземпляром класса Person . Таким образом создается наследование путем объединения прототипов в цепочку.

Я объясню это подробно на примере позже в этой статье.

Объекты, созданные с помощью классов (ES6) и объекты, созданные с помощью функций-конструкторов (ES5)

Они точно такие же?

Хотя они кажутся одинаковыми, расширив внутренний __proto__, мы увидим разницу между ними.

При раскрытии __proto__ экземпляра, созданного с помощью синтаксиса класса, мы ничего не получаем во внутреннем объекте __proto__ .

С другой стороны, расширение внутреннего __proto__ для экземпляра, созданного с помощью функции-конструктора, дает следующий результат:

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

С классами мы не получаем наследования по умолчанию и получаем чистый объект, назначенный внутреннему свойству __proto__ прототипа объекта User .

Мы также можем сделать это, явно изменив внутреннее свойство __proto__ .

Object.create(null) создает для нас чистый объект.

Наследование

Путь ES6 - классы

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

Это зарегистрирует пользователя как:

На внешнем прототипе мы получаем функции User (printUser функция), а на внутреннем прототипе мы получаем функции Person (printPerson функция).

Мы получаем наследование в действии, используя цепочку прототипов, но с синтаксическим сахаром.

Наследование - путь ES5

Хотя классы - это просто синтаксический сахар по сравнению с ES5, мы должны знать, как на самом деле реализовано наследование в ES5.

Приведенный выше пример наследования с использованием классов может быть представлен в ES5 с использованием следующего синтаксиса:

В приведенном выше коде нам необходимо понять две вещи:

1. Функция __extends.
2. Person.call(this).

Функция __extends принимает два объекта, родительский объект и дочерний объект, и устанавливает прототип для child.prototype экземпляру родительского объекта.

Person.call(this) вызывает функцию Person с настраиваемым this контекстом. Вызов функции Person с пользовательским контекстом this включает свойства объекта Person в объекте User.

Теперь, если мы попытаемся создать экземпляр класса User, мы получим:

var user = new User();

Получаем тот же объект, что и при создании экземпляра дочернего класса.

оператор instanceof

Для созданного экземпляра есть свойства как User, так и Person. Таким образом, следующие два оператора вернут true.

console.log(user instanceof User);   // true
console.log(user instanceof Person); // true

Еще статьи для чтения…

For more such articles, visit www.knowledgescoops.com
Want to read more articles like this?
Follow me on medium @kunaltandon.kt
Connect with me on LinkedIn:
https://www.linkedin.com/in/kunal-tandon/