Объектно-ориентированное программирование. Работа с объектами в JavaScript: теория и практика
Приветствую всех, кто читает данную публикацию. Сегодня я хочу разобрать с вами ключевой инструмент языка – объекты JavaScript. Напомню, что js является кроссбраузерным и функционирует во всех ОС (windows, mac os и т.д.). В отличие от объектно-ориентированных языков программирования, в js реализация объектов значительно отличается от привычного функционала и вариаций использования экземпляров, например, в C#.
Поэтому после прочтения текущей статьи вы познаете главные отличительные черты скриптовых объектов, узнаете, какими способами их можно создать, обновить и удалить. Также я затрону тему, касающуюся свойств, методов и конструкторов, расскажу о полезных командах и конечно же немного о наследовании. Думаю, пришло время приступать к обучению!
Что из себя представляет объект в JavaScript и какими возможностями обладает?
В js объектами являются простые ассоциативные массивы (их еще также называют хэшами).
Что же такое ассоциативный массив?
Это структура данных, в которой хранится какое-то количество информации, относящееся и описывающее определенный элемент. Все данные структурированы и связаны между собой как «ключ =>значение».
К примеру, вам нужно описать автомобили. Тогда вы создаете объект avto и описываете в массиве его характеристики. Я решил описать марку машины (name), ее цвет (color) и стоимость (price). Ниже я прикрепил код реализации описанного задания.
1 2 3 4 5 | var avto = { name: "BMW 116i", color: "black", price: 588000 }; |
var avto = { name: "BMW 116i", color: "black", price: 588000 };
Вот вы видите один из способов создания объекта с именем «avto». Name, color и price являются ключами, по которым в ходе написания приложения можно будет обращаться.
Этим примером я забежал вперед, поэтому сейчас разберем все по порядку.
Создать объект можно несколькими способами:
var avto = {}; или var avto = new Object ();
В обоих случаях создается пустой объект с известным именем, но первым вариантом пользуются гораздо чаще, так как его короче и удобнее писать.
Все про свойства
Теперь нужно заполнить пустой объект параметрами. Для этого необходимо добавить свойства, которые также выше я называл ключами. И опять-таки существует два способа объявления свойств.
Хочу отметить, что в JavaScript нет строгих рамок по созданию и инициализации таких параметров. Новые свойства могут появляться на протяжении всего кода, точно также как удаляться и обновляться.
Таким образом, можно сразу создать все ключи или же объявлять их по мере поступления. И даже если в ходе написания программы вы обратитесь к несуществующим ключам, ошибки не будет. В этом случае вернется “undefined”.
Первый способ.
Создание и обращение к свойствам через точку. Для реализации такого варианта нужно написать имя объекта, а после через точку приписать к нему наименование ключа и далее через знак равно присвоить какое-то значение:
avto.name = “ BMW 116i”
А вот в такой способ к существующим ключам вы добавите еще один элемент:
Этот способ используется тогда, когда имя свойства уже известно и нужно проделать определенные действия со значениями.
Второй способ.
Ничем не отличается от первого, если сравнивать их предназначения. Однако этот способ обладает небольшим преимуществом. Для такого варианта используются квадратные скобки:
avto[“name”] = “ BMW 116i”
А приятным добавлением является возможность создавать наименование свойств в виде любой строки. К примеру,
avto[“name of the car”] = “ BMW 116i”
Работа с ключами через квадратные скобки используется тогда, когда какие-то параметры вводятся пользователем и хранятся в переменных или когда заранее неизвестны названия свойств. Например, пользователь запрашивает стоимость выбранного автомобиля. В переменную записывается элемент, который был вызван, а в ответ передается цена:
var avto = {}; avto.name = "BMW_116i"; avto.price = 588000; var key = "price"; // была запрошена цена машины alert(avto);
Теперь перейдем к удалению свойств. Здесь все очень просто. Для удаления используется команда delete . Так, если к последнему примеру снизу дописать вот такие 2 строки:
delete avto.price;
alert (avto);
То с вызовом alert во второй раз диалоговое окно выдаст “undefined”.
Несколько слов о компактности
На текущем этапе я вам рассказал, как создать объект и описать его свойства. К этому я прикрепил контрольные примеры, однако самые внимательные из вас, дорогие читатели, заметили, что первый программный код несколько отличается от всех остальных.
А все потому что там используется компактное представление данных. Это очень популярный метод объявления ключей, так как он короче при написании и легче воспринимается визуально.
Давайте-ка переберем наши свойства
В JavaScript можно быстро перебрать созданные свойства. Для этого был предусмотрен специальный механизм, более известный как цикл .
Если вы знакомы с другими языками программирования, то знаете, что чаще всего циклы создаются при помощи слова for , далее в круглых скобках прописывается условие перебора элементов.
В js оно напоминает своим внешним видом цикл foreach из языка C#. Ознакомьтесь с общим видом конструкции:
for (var obj in object) { // выполнение перебора}
где obj отвечает за название перечисляемых ключей,
object – за их значения.
А теперь вот вам конкретный примерчик.
1 2 3 4 5 6 7 8 | var avto = { name: "BMW 116i", color: "black", price: 588000 }; for (var obj in object) { alert(obj + ":" + object) } |
var avto = { name: "BMW 116i", color: "black", price: 588000 }; for (var obj in object) { alert(obj + ":" + object) }
Настало время познакомиться с методами
В скриптовом языке предусмотрено создание методов. Это абсолютно простой механизм, с помощью которого в любое время к любому объекту можно дописать метод или методы, которые расширяют возможности созданных ассоциативных массивов. Их также называют свойствами-функциями.
Js сам по себе очень динамичный и удивительный в какой-то степени. Это заключается в том, как можно создавать элементы разных типов. При изучении этого языка не нужно запоминать сложных конструкций, так как множество объявлений очень схожи между собой.
Так, для создания метода, нужно объявить объект, а после начать писать команду, точь-в-точь напоминающую создание свойств. Однако после «=» пишется уже не значение, а ключевое слово function (переменная). А далее в фигурных скобках ведется перечисление действий.
Вот реализация данного механизма:
var avto ={} avto.name = “BMV” avto.year = 1999 avto.drive = function(k) { alert(«Автомобиль проехал»+n+« км. »)} avto.drive(300) avto.drive(450)
Как видите, этот пример содержит свойства и методы, вызов которых изначально идентичен.
В JS есть еще и конструкторы?
Так точно! В этом языке все, что использует ключевое слово «new », автоматически становится конструктором. Так, выше вы видели объявление пустого объекта в виде: avto = new Object ();. Это и есть конструктор.
Для наглядности рассмотрите представленные строки ниже.
var bob = new Object ();
bob.name = «Bob Smith»;
Однако это не весь арсенал возможностей. В js можно создавать свои собственные конструкторы и после использовать их для объявления новых объектов.
Итак, я хочу «смастерить» пользовательский конструктор для уже родных автомобилей. Заметьте, что имя надо писать с большой буквы. Это отличительная черта функций. Для этого я пишу вот такую программную реализацию:
function Avto (name, price) {
this.name = name;
this.price = price;
Теперь при создании неограниченного количества объектов и применения к ним этого конструктора, все они будут относиться к одному классу. Например:
var car1 = new Avto («BMW», 650000);
var car2 = new Avto («Audi», 520000);
В добавок к этому внутри конструктора можно создавать методы.
Особенности наследования в JavaScript
Обычно во многих языках наследование основывается на классах, которые могут наследовать друг друга. Тогда можно услышать такие выражения, как «класс-предок», «дочерний класс» и т.д.
Однако в js все иначе. Здесь наследуются объекты.
Все наследование основывается на внутренней ссылке между объектами, которая известна под именем «прототип». Если к методу приписать через точку «.prototype», а далее прописать имя прототипа, то все объекты выбранного метода будут наследоваться от этого прототипа.
Перейдем к примеру.
function Transport (name) { this.name = name this.canDrive = true } var transport = new Transport ("avto") // создали объект transport function Bike (name) { this.name = name } Bike.prototype = transport // указываем, что все новые объекты этого класса будут использовать в качестве прототипа transport bike1 = new Bike ("for_sport") bike2= new Bike ("for_child") console.log(bike1.name) console.log(bike2.name) console.log(bike1.canDrive)
На этом я, пожалуй, закончу. Я рассказал вам о фундаментальных аспектах скриптового языка. Однако это только поверхностные знания. Далее будем углубляться. А пока не забывайте вступать в ряды моих подписчиков и делиться ссылкой на статью с друзьями. Удачи!
Пока-пока!
С уважением, Роман Чуешов
Прочитано: 97 раз
JavaScript спроектирован на основе простой парадигмы. В основе концепции лежат простые объекты. Объект - это набор свойств, и каждое свойство состоит из имени и значения, ассоциированного с этим именем. Значением свойства может быть функция, которую можно назвать методом объекта. В дополнение к встроенным в браузер объектам, вы можете определить свои собственные объекты. Эта глава описывает как пользоваться объектами, свойствами, функциями и методами, а также как создавать свои собственные объекты.
Обзор объектов
Объекты в JavaScript, как и во многих других языках программирования, похожи на объекты реальной жизни. Концепцию объектов JavaScript легче понять, проводя паралелли с реально существующими в жизни объектами.
В JavaScript объект - это самостоятельная единица, имеющая свойства и определенный тип. Сравним, например, с чашкой. У чашки есть цвет, форма, вес, материал, из которого она сделана, и т.д. Точно так же, объекты JavaScript имеют свойства, которые определяют их характеристики.
Объекты и свойства
В JavaScript объект имеет свойства, ассоциированные с ним. Свойство объекта можно понимать как переменную, закрепленную за объектом. Свойства объекта в сущности являются теми же самыми переменными JavaScript, за тем исключением, что они закреплены за объектом. Свойства объекта определяют его характеристики. Получить доступ к свойству объекта можно с помощью точечной записи:
ObjectName.propertyName
Как и все переменные JavaScript, имя объекта (которое тоже может быть переменной) и имя свойства являются чуствительными к регистру. Вы можете определить свойство указав его значение. Например, давайте создадим объект myCar и определим его свойства make , model , и year следующим образом:
Var myCar = new Object(); myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969;
Неопределенные свойства объекта являются undefined (а не null).
MyCar. color; // undefined
Свойства объектов JavaScript также могут быть доступны или заданы с использованием скобочной записи (более подробно см. ). Объекты иногда называются ассоциативными массивами , поскольку каждое свойство связано со строковым значением, которое можно использовать для доступа к нему. Так, например, вы можете получить доступ к свойствам объекта myCar следующим образом:
MyCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["year"] = 1969;
Имена свойств объекта могут быть строками JavaScript, или тем, что может быть сконвертировано в строку, включая пустую строку. Как бы то ни было, доступ к любому имени свойства, которое содержит невалидный JavaScript идентификатор (например, имя свойства содержит в себе пробел и тире или начинается с цифры), может быть получен с использованием квадратных скобок. Этот способ записи также полезен, когда имена свойств должны быть динамически определены (когда имя свойства не определено до момента исполнения). Примеры далее:
Var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Dot syntax"; myObj["date created"] = "String with space"; myObj = "String value"; myObj = "Random Number"; myObj = "Object"; myObj[""] = "Even an empty string"; console.log(myObj);
Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведенном выше коде, когда ключ obj добавляется в myObj , JavaScript вызывает метод obj.toString () и использует эту результирующую строку в качестве нового ключа.
Вы также можете получить доступ к свойствам, используя значение строки, которое хранится в переменной:
Var propertyName = "make"; myCar = "Ford"; propertyName = "model"; myCar = "Mustang";
Вы можете пользоваться квадратными скобками в конструкции for...in чтобы выполнить итерацию всех свойств объекта, для которых она разрешена. Чтобы показать как это работает, следующая функция показывает все свойства объекта, когда вы передаете в нее сам объект и его имя как аргументы функции:
Function showProps(obj, objName) { var result = ""; for (var i in obj) { if (obj.hasOwnProperty(i)) { result += objName + "." + i + " = " + obj[i] + "\n"; } } return result; }
Так что если вызвать эту функцию вот так showProps(myCar, "myCar"), то получим результат:
MyCar.make = Ford myCar.model = Mustang myCar.year = 1969
Перечисление всех свойств объекта
Использование функции конструктора
Другой способ создать объект в два шага описан ниже:
- Определите тип объекта, написав функцию-конструктор. Название такой функции, как правило, начинается с заглавной буквы.
- Создайте экземпляр объекта с помощью ключевого слова new .
Чтобы определить тип объекта создайте функцию, которая определяет тип объекта, его имя, свойства и методы. Например предположим, что вы хотите создать тип объекта для описания машин. Вы хотите, чтобы объект этого типа назывался car , и вы хотите, чтобы у него были свойства make, model, и year. Чтобы сделать это, напишите следующую функцию:
Function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }
Заметьте, что используется this чтобы присвоить значения (переданные как аргументы функции) свойствам объекта.
Теперь вы можете создать объект, называемый mycar , следующим образом:
Var mycar = new Car("Eagle", "Talon TSi", 1993);
Эта инструкция создает объект типа Car с ссылкой mycar и присваивает определенные значения его свойствам. Значением mycar.make станет строка "Eagle", mycar.year - это целое число 1993, и так далее.
Вы можете создать столько объектов car, сколько нужно, просто вызывая new . Например:
Var kenscar = new Car("Nissan", "300ZX", 1992); var vpgscar = new Car("Mazda", "Miata", 1990);
Объект может иметь свойство, которое будет другим объектом. Например, далее определяется объект типа Person следующим образом:
Function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; }
и затем создать два новых экземпляра объектов Person как показано далее:
Var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");
Затем, вы можете переписать определение car и включить в него свойство owner , которому назначить объект person следующим образом:
Function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; }
Затем, чтобы создать экземпляры новых объектов, выполните следующие инструкции:
Var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);
Заметьте, что вместо того, чтобы передавать строку, литерал или целое число при создании новых объектов, в выражениях выше передаются объекты rand и ken как аргумент функции. Теперь, если вам нужно узнать имя владельца car2, это можно сделать следующим образом:
Car2.owner
Заметьте, что в любое время вы можете добавить новое свойство ранее созданному объекту. Например, выражение
Car1.color = "black";
добавляет свойство color к car1, и устанавливаего его значение равным "black." Как бы там ни было, это не влияет на любые другие объекты. Чтобы добавить новое свойство всем объектам одного типа, вы должны добавить свойство в определение типа объекта car .
Использование метода Object.create
Объекты также можно создавать с помощью метода Object.create . Этот метод очень удобен, так как позволяет вам указывать объект прототип для нового вашего объекта без определения функции конструктора.
// список свойств и методов для Animal var Animal = { type: "Invertebrates", // Значение type по умолчанию displayType: function() { // Метод отображающий тип объекта Animal console.log(this.type); } }; // Создаем объект Animal var animal1 = Object.create(Animal); animal1.displayType(); // Выведет:Invertebrates // Создаем объект Animal и присваиваем ему type = Fishes var fish = Object.create(Animal); fish.type = "Fishes"; fish.displayType(); // Выведет:Fishes
Наследование
Все объекты в JavaScript наследуются как минимум от другого объекта. Объект, от которого произошло наследование называется прототипом, и унаследованные свойства могут быть найдены в объекте prototype конструктора.
Индексы свойств объекта
В JavaScript 1.0 вы можете сослаться на свойства объекта либо по его имени, либо по его порядковому индексу. В JavaScript 1.1 и позже, если вы изначально определили свойство по имени, вы всегда должны ссылаться на него по его имени, и если вы изначально определили свойство по индексу, то должны ссылаться на него по его индексу.
Это ограничение налагается когда вы создаете объект и его свойства с помощью функции конструктора (как мы это делали ранее с типом Car ) и когда вы определяете индивидуальные свойства явно (например, myCar.color = "red"). Если вы изначально определили свойство объекта через индекс, например myCar = "25 mpg" , то впоследствии сослаться на это свойство можно только так myCar .
Исключение из правил - объекты, отображаемые из HTML, например массив forms . Вы всегда можете сослаться на объекты в этих массивах или используя их индекс (который основывается на порядке появления в HTML документе), или по их именам (если таковые были определены). Например, если второй html-тег