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


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


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

Когда-то программы состояли только из набора функций, которые вызывали друг друга в нужный момент. У такого подхода есть недостатки, поэтому техники программирования постоянно совершенствовались.

Так появились различные подходы к программированию: функциональный подход, объектно-ориентированный, процедурный и другие.

Подход к программированию или Парадигма программирования - совокупность идей и понятий, определяющих стиль написания программ.

Прототипно Ориентированное Программирование (ПОП) - это стиль объектно-ориентированного программирования. Об этом далее и по порядку.



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().



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



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

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

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

Ваше Имя:

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

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

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


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

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