В этой статье мы обсудим объектно-ориентированные аспекты языка 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