Объекты - одно из основных понятий в JavaScript. Когда я только приступил к их изучению, они показались мне довольно простыми: всего лишь пары ключей и значений, как и описывалось в теории.
Лишь спустя некоторое время я начал понимать, что тема гораздо сложнее, чем я полагал. И тогда я стал изучать информацию из разных источников. Некоторые из них давали хорошее представление о предмете, но увидеть всю картину целиком я смог не сразу.
В этом посте я попытался охватить все аспекты работы с объектами в JS, не вдаваясь слишком глубоко в отдельные подробности, но и не упуская важные детали, которые помогут вам понять предмет и почувствовать себя увереннее во время его дальнейшего изучения.
Итак, давайте начнем с основ.
Объект
Объект в JavaScript - это просто набор свойств, каждое из которые представляет собой пару ключ-значение. Обратиться к ключам можно с помощью точечного (obj.a ) или скобочного обозначения (obj["a"] ).Помните, что скобки следует использовать, если ключ:
- не является допустимым JavaScript-идентификатором (в нем есть пробел, тире, начинается с цифры...)
- является переменной.
Прототип
У каждого объекта в JavaScript есть внутреннее свойство под названием Prototype . В большинстве браузеров вы можете обратиться к нему по обозначению __proto__ .Prototype - это способ обеспечить наследование свойств в JavaScript. Так можно делится функциональностью без дублирования кода в памяти. Способ работает за счет создания связи между двумя объектами.
Проще говоря, Prototype создает указатель с одного объекта на другой.
Цепочка прототипов
Каждый раз, когда JS ищет свойство в объекте и не находит его непосредственно у самого объекта, он проверяет наличие свойства в объекте-прототипе. Если свойства нет и в нем, то JS продолжит поиск в прототипе связанного объекта. Так будет продолжаться до тех пор, пока JS не найдет подходящее свойство или не достигнет конца цепочки.
Давайте рассмотрим пример:
Var cons = function () {
this.a = 1;
this.b = 2;
}
var obj = new cons();
cons.prototype.b = 3;
cons.prototype.c = 4;
cons
- это конструктор (просто функция, которую можно вызывать с помощью оператора new
).
На пятой строке мы создаем новый объект - новую копию cons . Сразу после создания obj также получает свойство прототипа.
А теперь мы добавляем свойства ("b", "c"
) прототипу объекта cons
.
Рассмотрим obj
:
obj.a // 1
- здесь все по-старому, obj.a
по-прежнему равен 1.
obj.c?
- у obj
нет свойства c
! Однако, как ранее упоминалось, JS теперь поищет его в прототипе obj
и вернет значение 4.
А теперь давайте подумаем, каково значение obj.b и каким оно станет, когда мы удалим obj.b ?
Obj.b равен 2. Мы назначили свойство b , но мы сделали это для прототипа cons , поэтому когда мы проверяем obj.b , то по-прежнему получаем 2. Однако сразу после удаления obj.b JS уже не сможет найти b у obj , и потому продолжит поиск в прототипе и вернет значение 3.
Создание объекта
Литерал объекта: let obj = {a: 1};Мы создали объект со следующей цепочкой прототипов: obj ---> Object.prototype ---> null
Как вы можете догадаться, object.prototype - это прототип объекта, а также конец цепочки прототипов.
Object.create():
var newObj = Object.create(obj);
У newObj
будет следующая цепочка прототипов: newObj ---> obj ---> Object.prototype ---> null
Конструктор. Как и в приведенном выше примере, конструктор - это просто JS-функция, позволяющая нам воспользоваться оператором new для создания новых ее экземпляров.
ES6 классы:
Class rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
getArea() {
return this.height * this.width;
}
}
let square = new rectangle(2, 2);
Square
- экземпляр конструктора rectangle
, и поэтому мы можем вызвать square.getArea() //4
, square.width
, а также все функции, унаследованные от object.prototype
.
Какой из способов лучше? Если вы планируете создать несколько экземпляров, можно воспользоваться ES6 или конструктором. Если же вы планируете создать объект один раз, то лучше задать литерал, поскольку это самый простой способ.
И теперь, когда мы узнали о prototype и познакомились со всеми способами создания новых объектов, мы можем перейти к обсуждению одного из самых запутанных моментов, связанных с объектами.
Сравнение и изменение объектов
В JavaScript объекты относятся к ссылочному типуКогда мы создаем объект let obj = {a: 1}; , переменная obj получает адрес в памяти объекта, но не его значение! Крайне важно понимать эту разницу, поскольку в противном случае могут возникнуть ошибки. Когда мы создаем другой объект let newObj = obj , мы фактически создаем указатель на некую область памяти obj , а не абсолютно новый объект.
Это значит, что выполняя newObj.a = 2 , мы фактически изменяем obj таким образом, что obj.a становится равен 2!
Такой подход легко приводит к появлению багов, поэтому многие компании работают с неизменяемыми объектами. Вместо изменения уже созданного объекта вам придется опять создавать новый объект (копию оригинала) и вносить изменения уже в нем. Именно так работают важные библиотеки вроде Redux, и в целом это одна из основных концепций функционального программирования. Подробнее можно почитать .
Равенство
Из сказанного выше также вытекает, что два объекта никогда не могут быть равными, даже если они обладают одинаковыми свойствами. Это связано с тем, что JS по факту сравнивает расположение в памяти объектов, а два объекта никогда не находятся в одной ячейке памяти.
// Two distinct objects with the same properties are not equal
var fruit = {name: "apple"};
var fruitbear = {name: "apple"};
fruit === fruitbear; // return false
// here fruit and fruitbear are pointing to same object
var fruit = {name: "apple"};
var fruitbear = fruit;
fruit === fruitbear; // return true
Итак, вы скорее всего уже задались вопросом, как можно сравнить объекты или как производить с объектами различные манипуляции, учитывая требование к их неизменности.
Рассмотрим несколько возможностей.
Изменение объекта
Допустим, ясно, что по-хорошему нам не следует изменять объекты, поэтому мы хотим создать копию соответствующего объекта и изменить ее свойства. На помощь приходит Object.assign() .
Var obj = { a: 1, b: 2};
var newObj = Object.assign({}, obj,{a:2}) // {a: 2, b: 2 }
Если мы захотим изменить значение свойства a
объекта obj
, можно воспользоваться object.assign
для создания копии obj
и ее изменения.
В примере видно, что мы сначала создаем пустой объект, затем копируем значения obj и вносим наши изменения, в конечном счете получая новый и готовый к использованию объект.
Пожалуйста, обратите внимание, что этот способ не сработает для глубокого копирования. Говоря о глубоком копировании, мы имеем в виду, что нужно скопировать объект с одним или несколькими свойствами.
Const obj = {a: 1, b: { a: 1 } }; // b property is an object
Object.assign()
копирует свойства объекта, поэтому если значение свойства - это указатель на объект, то копируется только указатель.
Для глубокого копирования необходима рекурсивная операция. Здесь можно написать функцию или просто воспользоваться методом _.cloneDeep из библиотеки Lodash .
Сравнение объектов
Есть один классный прием работы с объектами - строчное преобразование. В следующем примере мы преобразовываем оба объекта в строки и сравниваем их:
JSON.stringify(obj1) === JSON.stringify(obj2)
Такой подход оправдан, поскольку в итоге мы сравниваем строки, представляющие собой указатель на тип-значение. Плохая новость - он не всегда срабатывает, главным образом потому, что тот или иной порядок свойств объекта не гарантируется.
Другое хорошее решение - воспользоваться методом _.isEqual из Lodash , выполняющим глубокое сравнение объектов.
И перед тем, как закончить, давайте пробежимся по некоторым часто возникающим вопросам на тему объектов. Это поможет глубже погрузиться в тему и применить полученные знания на практике.
Постарайтесь подумать над решением самостоятельно перед тем, как прочитать ответ.
Как узнать длину объекта?
Для получения ответа необходимо перебрать все свойства объекта одно за другим и посчитать их. Существует несколько способов выполнить подобную итерацию:- for in . Этот метод охватывает все счетные свойства объекта и цепочки его прототипов. Мы познакомились с прототипом (и, надеюсь, усвоили материал), поэтому должно быть ясно, что применение for in не всегда будет верным для получения свойств объекта.
- Object.keys . Этот способ возвращает массив с ключами всех собственных (принадлежащих указанному объекту) счетных свойств. Такой подход лучше, поскольку мы работаем только над свойствами объекта, не обращаясь к свойствам prototype . Бывают, однако, ситуации, когда вы присвоили атрибуту enumerable некоторого свойства значение false, и object.keys в итоге пропускает его, а вы получаете некорректный результат. Такое происходит редко, но в подобных случаях очень кстати придется getOwnPropertyNames .
- getOwnPropertyNames возвращает массив, содержащий все собственные ключи объекта (как счетные, так и несчетные).
- Object.values перебирает собственные счетные свойства и возвращает массив с соответствующими значениями .
- Object.entries перебирает собственные счетные свойства и возвращает массив с ключами и их значениями .
Один из таких методов - array.length . В итоге мы можем просто написать
Let objLength = Object.getOwnPropertyNames(obj).length;
Как проверить, пуст ли объект?
- JSON.stringify(myObj) === “{}” ?. Здесь мы снова используем инструмент строкового преобразования, позволяющий легко проверить, пуст ли объект (сравнивая строки, а не объекты).
- !Object.keys(myobj).length // true ?.? Как я упоминал, конвертирование ключей объекта в массив может быть очень полезным. Здесь мы пользуемся удобным свойством length , унаследованным от Array.prototype , проверяя с его помощью длину ключей в массиве. В JS 0 превращается в false, поэтому добавляя ! мы превращаем его в true. Любые другие числа будут превращаться в false.
В заключение
Надеюсь, теперь вы чувствуете себя увереннее в создании объектов и работе с ними. Давайте подытожим:- Помните, что объекты относятся к ссылочному типу, а значит, с ними рекомендуется работать без изменения оригинальных объектов.
- Подружитесь со свойством prototype и цепочкой прототипов.
- Познакомьтесь с инструментами-помощниками в работе с объектами. Помните, что можно превращать объекты в строки, получать массив с их ключами или просто перебирать их свойства с помощью набора методов, с которым мы познакомились.
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-тег