В этой статье мы обсудим объектно-ориентированные аспекты языка JavaScript. В своей повседневной жизни мы сталкиваемся с множеством объектов, таких как телевизор, сотовый телефон, автомобиль, животные, птицы и т. Д., И все эти объекты имеют свои собственные свойства и методы. Например - Джон мальчик. Таким образом, он также является объектом со свойствами, такими как глаза, уши, руки, ноги и т. Д., и такими методами, как ходьба, разговор, танцы, еда и т. Д.

Литерал объекта

Мы можем определить или создать объект JavaScript с помощью литерала объекта, заключив все методы и свойства в фигурные скобки, и он показан ниже:

Теперь мы научимся обновлять свойства вышеуказанного литерала объекта john.

Итак, мы можем легко обновить свойства с помощью оператора присваивания ‘=’.

Мы также можем проделать ту же операцию, описанную выше, используя следующую процедуру.

Вышеупомянутый процесс помогает нам динамически изменять свойства и методы или получать к ним доступ. Давайте разберемся в этом на примере.

Мы также можем добавить новые свойства к объекту john, который показан ниже.

Мы также можем добавить новые методы к объекту john, который показан ниже.

Классы JavaScript

В предыдущем разделе мы создали объект john, который был человеком. Теперь, что, если мы хотим создать 50 других людей с теми же свойствами и методами, что и john, но с другими именами. В таком сценарии, если мы используем объектные литералы, мы должны снова и снова определять все и вся, как показано в примере ниже.

Итак, для решения этой проблемы в ECMAScript 2015, также известном как ES6, были введены классы JavaScript. Классы JavaScript - это шаблоны для объектов JavaScript.

Синтаксис для класса JavaScript приведен ниже -

class ClassName {
  constructor() { ... }
}

Мы используем ключевое слово class для создания класса. Мы всегда должны добавлять метод с именем constructor().

Метод конструктора - это особый метод:

  • У него должно быть точное название «конструктор».
  • Выполняется автоматически при создании нового объекта.
  • Используется для инициализации свойств объекта

Если вы не определите метод конструктора, JavaScript добавит пустой метод конструктора.

Теперь мы определим класс и создадим два объекта этого класса.

Теперь мы получим доступ к свойствам и методам обоих объектов.

Цепочка методов

Теперь мы узнаем о цепочке методов. Для этого мы определим другой класс Airplane следующим образом:

Теперь мы создадим объект этого класса и будем использовать цепочку методов.

В приведенном выше примере мы могли использовать цепочку методов, потому что мы возвращали this (сам объект) в функциях fly и acquire.

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

Наследование - это способность одного класса наследовать свойства и методы другого класса.

В приведенном выше примере мы унаследовали свойства и методы из класса Human в класс Man.

Теперь мы создадим объект и получим доступ к методам и свойствам.

Прототип на JavaScript

Когда мы создаем функцию в JavaScript, JS-движок создает два объекта. Первый объект - это объект функции, который имеет имя самой функции. Другой объект, который создается вместе с первым, имеет имя prototype.

Давайте разберемся с вышеуказанной концепцией на примере. Мы создадим функцию с именем myFunc(). Итак, как только этот функциональный объект создается, JS-движок также создает другой объект, к которому myFunc.prototype может получить доступ.

Теперь давайте добавим новое свойство в объект myFunc.prototype с именем hobby.

Затем мы создадим новый объект следующим образом -

Теперь, используя этот новый объект obj, мы можем получить доступ к свойству hobby, определенному в объекте prototype в myFunc. Способ доступа к нему показан ниже -

Мы также можем проверить то, что мы сделали выше, используя следующий код -

Итак, новый объект obj указывает на prototype объект myFunc, используя свойство __proto__.

Мы можем понять вышеупомянутую концепцию с помощью следующей иллюстрации.

Поскольку мы создали свойство под объектом prototype, которое может быть доступно из других объектов, созданных следующим образом - var obj = new myFunc();.

Теперь предположим, что мы хотим получить доступ к свойству hobby из obj напрямую, без использования __proto__.

Мы видим, что мы все еще можем получить доступ к значению, хранящемуся в объекте prototype. Это означает, что JS-движок сначала просматривает свойства, определенные в obj. Если он найдет какое-либо свойство с именем hobby, он вернет значение. В противном случае, если он не найдет, он проверит свойства, определенные в __proto__, а затем вернет значение, хранящееся в hobby.

В нашем случае движок JS не нашел ни одного свойства с именем hobby, хранящегося в obj. Итак, он перешел к __proto__ и извлек значение, хранящееся там.

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

Возьмем другой пример.

Мы создадим функцию Human() следующим образом:

Мы создадим свойство и метод под prototype этой функции.

Теперь мы создадим еще два объекта из функции Human с помощью ключевого слова new.

Итак, мы ясно видим, что можем получить доступ к свойствам и методам, хранящимся в объекте prototype, также из других объектов.

Из предыдущих примеров, as myFunc имеет свойство с именем prototype, которое указывает на объект-прототип, созданный вместе с функцией.

Точно так же объект-прототип также имеет свойство с именем constructor, которое указывает на функцию. Это проиллюстрировано ниже -

Теперь мы создадим еще один объект из функции myFunc с помощью ключевого слова new.

Если мы хотим проверить, с помощью какой функции мы создали объект Obj, мы можем использовать Obj.__proto__.constructor или Obj.constructor, чтобы увидеть имя этой функции.

Теперь мы поймем глобальную функцию, которая называется Object(). Когда мы вызываем эту функцию, она возвращает объект.

Итак, мы создадим еще один объект, используя эту Object() функцию с new ключевым словом.

Теперь мы создадим еще один объект, используя фигурные скобки.

Итак, мы видим, что обе процедуры дают одинаковый результат. Здесь мы можем заключить, что var Obj2 = {}; - это сокращенный метод var myObj = new Object(); для определения объекта.

Мы также можем проверить, указывает ли свойство __proto__ обоих этих объектов на объект prototype глобальной функции Object().

Мы также можем проиллюстрировать эту концепцию с помощью следующей диаграммы.

Теперь мы установим свойство dance в объекте-прототипе глобальной функции Object().

Затем мы определим функцию foo().

Как только мы определили функцию foo(), она создала объект-прототип, к которому можно получить доступ через foo.prototype.

Теперь мы создадим объект, используя функцию foo() с ключевым словом new.

У объекта obj есть свойство __proto__, с помощью которого мы можем получить доступ к prototype объекту foo(). Поскольку объект prototype в foo() сам является объектом, поэтому у него также есть свойство __proto__, которое указывает на объект prototype функции Object().

Итак, к свойству dance объекта protoype глобальной функции Object() можно получить доступ следующими способами.

Итак, мы можем сделать вывод, что свойства и методы, хранящиеся в глобальном Object, доступны из любых созданных объектов.

Поскольку объект prototype глобальной функции Object() также является объектом. У него также есть свойство __proto__, которое указывает на null.

Вышеупомянутые концепции можно проиллюстрировать следующей схемой.

использованная литература

Классы JavaScript: https://www.w3schools.com/js/js_class_intro.asp

Объекты JavaScript: https://www.w3schools.com/js/js_objects.asp