Далее на странице...
Разные языки программирования используют разные принципы внутри себя.
Когда-то программы состояли только из набора функций, которые вызывали друг друга в нужный момент. У такого подхода есть недостатки, поэтому техники программирования постоянно совершенствовались.
Так появились различные подходы к программированию: функциональный подход, объектно-ориентированный, процедурный и другие.
Подход к программированию или Парадигма программирования - совокупность идей и понятий, определяющих стиль написания программ.
Прототипно Ориентированное Программирование (ПОП) - это стиль объектно-ориентированного программирования. Об этом далее и по порядку.
JavaScript - это объектно-ориентированный язык
JavaScript - это объектно-ориентированный язык программирования. Главную роль играет Объект, который может содержать методы и свойства, любые типы данных.
Чтобы лучше понять, что такое Объектно-Ориентированное Программирование и что такое Объект нужно взять пример из реальной жизни.
Автомобиль - это Объект. У него есть свойства: двигатель, кузов, колеса и другие. Есть методы - это то, что он умеет делать: вместимость определенного числа пассажиров, перевозка грузов и т.п.
Холодильник, микроволновая печь и т.п. - это тоже объекты. Уже со своими свойствами.
Что является объектами в JavaScript?
Рассмотренные выше примеры объектов из реальной жизни должны быть понятны. Здесь все просто.
Смысл объектно-ориентированного программирования заключается в том, что любая вещь в нем - это Объект с набором свойств и методов.
Что является объектами в JavaScript?
Например, строка - это объект. У строки, как у объекта есть свойства и методы: свойство length - число символов в строке. Методы регистра строки - toUpperCase и toLowerCase и другие.
Так вот, с одной стороны простой набор символов или текст, заключенный в кавычки - это Строка - примитивный тип данных.
Но как только к строке применяются свойства и методы, то JavaScript уже относит строку к другому типу данных - это Объект.
После работы с ней (как с объектом), после ее модификации JavaScript возвращает строку в прежнее состояние.
Пример 1.1
const str = 'any text';
const strObj = new String(str);
console.log(typeof(str));
console.log(typeof(strObj));
Результат
string
object
Из строки str, создаем объект типа String. Так работает и JavaScript, когда нужно работать со строкой как с объектом: переводит строку в другой тип данных Object.
Нужно понимать, как действует JavaScript, чтобы в дальнейшем успешно работать со сложными скриптами и Фреймворками.
Что такое прототипы?
Что такое прототипы?
Вернемся к примерам из реальной жизни с Автомобилями.
Автомобиль - это Объект. Допустим мы имеем дело с группой легковых Автомобилей. С одной стороны, они отличны друг от друга: разные марки, модели (а значит отличия в размерах колес, в кузовах и т.п.). Но общего у них то, что все это Легковые Автомобили.
Именно Легковые автомобили - это и является Прототипом. Теперь можно создать новый Экземпляр - новый Объект - новый Автомобиль, отталкиваясь от прототипа «Легковой».
Из реальной жизни - к языку JavaScritp.
Строки или массивы могут иметь разное наполнение. Допустим, что каждая строка отлична от другой.
Но ко всем строкам применимы одни и те же методы и свойства.
Таким образом, создавая новую строку мы создаем новый экземпляр прототипа Строк.
Новый массив - это новый экземпляр прототипа Массивов.
Рассмотрим пример и воспользуемся командой console.dir.
Пример 2.1
console.dir([1,2,3]);
console.dir(['as', 'der']);
// ------------ Объекты --------------
const obj = {
a: 1,
b: 'asd'
};
console.dir({});
console.dir(obj);
Результат
Array(3)
0: 1
1: 2
2: 3
length: 3
__proto__: Array(0)
concat: ? concat()
constructor: ? Array()
copyWithin: ? copyWithin()
entries: ? entries()
every: ? every()
fill: ? fill()
filter: ? filter()
...
...
...
__proto__: Object
Array(2)
0: "as"
1: "der"
length: 2
__proto__: Array(0)
// ------------ Объекты --------------
Object
__proto__: Object
Object
a: 1
b: "asd"
__proto__: Object
-
Работа с массивами. В команду console.dir поочередно переданы два экземпляра массивов (два разных массива).
Прототип у обоих массивов один и тот же - прототип Array. На это указывает свойство proto.
И далее указано, какие свойства и методы относятся к этому прототипу (приведен не полный список).
Обратить внимание.
В самом конце списка - свойство proto ссылается на Объект: __proto__: Object. Почему...
...об этом ниже в комментариях к иллюстрации.
-
Работа с объектами. В команду console.dir поочередно переданы два экземпляра объектов (два разных объекта): пустой и заранее созданный. У этих объектов также один прототип: __proto__: Object.
В примере это не отображено, но через свойство proto также можно просмотреть все свойства и методы, относящиеся к прототипу Объект.
Система прототипов
Для понимания того, что объект - это ключевая структура языка JavaScript и того, как устроена система прототипов в нем, рассмотрим иллюстрацию и дадим пояснения к ней.
Комментарии к иллюстрации на примере Массивов.
1. Любой экземпляр прототипа Массивов (т.е. любой массив) через свойство proto связан с прототипом Массивов Array.
2. Прототип массивов Array содержит свойства и методы, которые применимы к каждому экземпляру массива (к любому массиву).
3. Прототип массивов Array через свойство proto связан с прототипом Объектов Object.
Таким образом объект - это ключевая структура.
Есть методы, которых нет в Прототипе массивов Array, но которые всё же применяются к экземплярам массивов.
Это значит, что они берутся от прототипа Объектов Object.
В JavaScript любые конструкции прототипно наследуются от объекта. Именно по цепочке прототипов (как показано на иллюстрации) все и работает.
Аналогичная ситуация обстоит и с числами (функциями): любой экземпляр прототипа Чисел (какое-либо число) относится к самому прототипу Чисел Number, который в свою очередь связан все с тем же прототипом Объектов Object.
Прототипы на практике
На практике в реальных проектах разработчиками создаются объекты, которые ПРОТАТИПНО наследуются друг от друга.
То есть подобные структуры, как на иллюстрации выше, формируются лично разработчиками.
Читайте продолжение этой статьи - Работа с прототипами - Свойство proto - Методы Object.create() и Object.setPrototypeOf().
