Объекты в Javascript

Опубликовано: 14 Декабря, 2021

Объекты в JavaScript являются наиболее важным типом данных и образуют строительные блоки для современного JavaScript. Эти объекты сильно отличаются от примитивных типов данных JavaScript (Number, String, Boolean, null, undefined и symbol) в том смысле, что все эти примитивные типы данных хранят по одному значению каждый (в зависимости от их типов).

Объекты более сложные, и каждый объект может содержать любую комбинацию этих примитивных типов данных, а также ссылочных типов данных.
Объект - это ссылочный тип данных. Переменным, которым присвоено ссылочное значение, дается ссылка или указатель на это значение. Эта ссылка или указатель указывает на то место в памяти, где хранится объект. Переменные на самом деле не хранят значение.
Грубо говоря, объекты в JavaScript могут быть определены как неупорядоченный набор связанных данных примитивных или ссылочных типов в форме пар «ключ: значение». Эти ключи могут быть переменными или функциями и называются соответственно свойствами и методами в контексте объекта.

Объект может быть создан с помощью фигурных скобок {…} с дополнительным списком свойств. Свойство - это пара «ключ: значение», где ключ - это строка (также называемая «именем свойства»), а значение может быть любым.
Чтобы понять это довольно абстрактное определение, давайте посмотрим на пример объекта JavaScript:

let school = {
    название: "Школа Вивекананды",
    локация: «Дели», г.
    учреждено: «1971»
}

В приведенном выше примере «имя», «местоположение», «установлен» - все это «ключи», а «Школа Вивекананды», «Дели» и 1971 - значения этих ключей соответственно.

Каждый из этих ключей называется свойствами объекта. Объект в JavaScript также может иметь функцию в качестве члена, и в этом случае он будет известен как метод этого объекта.

Посмотрим на такой пример:

// javascript code demonstrating a simple object
let school = {
    name: "Vivekananda School",
    location : "Delhi",
    established : "1971",
    displayInfo : function(){
        console.log(`${school.name} was established 
              in ${school.established} at ${school.location}`);
    }
}
school.displayInfo();   

Выход:

В приведенном выше примере «displayinfo» - это метод школьного объекта, который используется для работы с данными объекта, хранящимися в его свойствах.

Свойства объекта JavaScript

Имена свойств могут быть строками или числами. В случае, если имена свойств являются числами, к ним необходимо обращаться, используя «обозначение скобок», например:

 let school = {
    name: 'Vivekananda School' ,
    location : 'Delhi' ,
    established : '1971' ,
    20 : 1000,
    displayInfo : function (){
        console.log(`The value of the key 20 is ${school[ '20' ]}`);
    }
 }
 school.displayInfo();

Выход:

Но подробнее о скобках позже.

Имена свойств также могут быть строками с несколькими словами, разделенными пробелами. В этом случае имена этих свойств необходимо заключить в кавычки:

let school = {
    "название школы": "Школа Вивекананды",
}

Как и имена свойств, которые являются числами, к ним также необходимо обращаться в скобках. Например, если мы хотим получить доступ к «Вивекананде» из «Школы Вивекананды», мы можем сделать что-то вроде этого:

// bracket notation 
let school = {
    name: "Vivekananda School",
    displayInfo : function(){
        console.log(`${school.name.split(" ")[0]}`);
    }
}
school.displayInfo(); // Vivekananda

Выход:

В приведенном выше коде мы использовали обозначение скобок, а также метод разделения, предоставляемый javascript, о котором вы узнаете в статье о строках.

Унаследованные свойства

Унаследованные свойства объекта - это те свойства, которые были унаследованы от прототипа объекта, а не определены для самого объекта, что известно как собственное свойство объекта. Чтобы проверить, является ли свойство собственным свойством объекта, мы можем использовать метод hasOwnProperty

Атрибуты собственности
Свойства данных в JavaScript имеют четыре атрибута.

value: стоимость свойства.
Writable: если true, значение свойства может быть изменено.
enumerable: если true, свойство можно перебирать с помощью перечисления «for-in». В противном случае свойство называется неперечислимым.
configurable: если false, попытки удалить свойство, изменить свойство на свойство доступа или свойства или изменить его атрибуты (кроме [[Value]] или изменение [[Writable]] на false) завершатся неудачно.

 // hasOwnProperty code in js
 const object1 = new Object();
 object1.property1 = 42;
 
console.log(object1.hasOwnProperty( 'property1' )); // true 

Выход:

Создание объектов

Есть несколько способов или синтаксиса для создания объектов. Один из них, известный как синтаксис литерала объекта, мы уже использовали. Помимо синтаксиса литерала объекта, объекты в JavaScript также могут быть созданы с помощью конструкторов, конструктора объектов или шаблона прототипа.

Использование синтаксиса литерала объекта: В синтаксисе литерала объекта используется нотация {…} для непосредственной инициализации объекта и его методов / свойств.
Давайте посмотрим на пример создания объектов с помощью этого метода:
```
var obj = {
    член1: значение1,
    член2: значение2,
};
```
Эти члены могут быть чем угодно - строками, числами, функциями, массивами или даже другими объектами. Такой объект называется литералом объекта. Это отличается от других методов создания объектов, которые включают использование конструкторов и классов или прототипов, которые обсуждались ниже.

Конструктор объектов: Другой способ создания объектов в JavaScript включает использование конструктора «Object». Конструктор Object создает оболочку объекта для данного значения. Это в сочетании с ключевым словом «new» позволяет нам инициализировать новые объекты.
Пример :

 const school = new Object();
 school.name = 'Vivekanada school' ;
 school.location = 'Delhi' ;
 school.established = 1971;
 
school.displayInfo = function (){
    console.log(`${school.name} was established
          in ${school.established} at ${school.location}`);
 }
 
school.displayInfo();

Выход:

Два упомянутых выше метода плохо подходят для программ, требующих создания нескольких объектов одного и того же типа, так как это потребует многократного написания вышеуказанных строк кода для каждого такого объекта. Чтобы справиться с этой проблемой, мы можем использовать два других метода создания объектов в JavaScript, которые значительно уменьшают эту нагрузку, как указано ниже:

Конструкторы: конструкторы в JavaScript, как и в большинстве других языков ООП, предоставляют шаблон для создания объектов. Другими словами, он определяет набор свойств и методов, которые будут общими для всех объектов, инициализируемых с помощью конструктора.
Давайте посмотрим на пример:

 function Vehicle(name, maker) {
   this .name = name;
   this .maker = maker;
 }
 
let car1 = new Vehicle( 'Fiesta' , 'Ford' );
 let car2 = new Vehicle( 'Santa Fe' , 'Hyundai' )
 
console.log(car1.name); // Output: Fiesta
 console.log(car2.name); // Output: Santa Fe 

Выход:

Обратите внимание на использование ключевого слова «new» перед функцией Vehicle. Использование ключевого слова new таким образом до того, как какая-либо функция превратит его в конструктор. Что на самом деле делает «новый автомобиль ()»:

Он создает новый объект и устанавливает свойство конструктора объекта для школ (важно отметить, что это свойство является специальным свойством по умолчанию, которое не перечисляется и не может быть изменено путем установки свойства «constructor: someFunction» вручную).
Затем он настраивает объект для работы с Vehicle (каждая функция в JavaScript получает объект-прототип, который изначально является просто пустым объектом, но может быть изменен. Объект при создании экземпляра наследует все свойства от объекта-прототипа своего конструктора. ).
Затем вызывает Vehicle () в контексте нового объекта, что означает, что когда ключевое слово «this» встречается в конструкторе (vehicle ()), оно относится к новому объекту, который был создан на первом шаге.
После этого вновь созданный объект возвращается в car1 и car2 (в приведенном выше примере).

Внутри классов могут быть специальные методы с именем constructor() .

 class people {
    constructor()
    {
        this .name = "Adam" ;
    }
 }
 
let person1 = new people();
 
// Output : Adam
 console.log(person1.name);

Выход:

Наличие более одной функции в классе с именем constructor() приводит к ошибке.

Прототипы. Другой способ создания объектов - использование прототипов. Каждая функция JavaScript prototype по умолчанию оно пусто). К этому свойству могут быть прикреплены методы или свойства. Подробное описание прототипов выходит за рамки этого введения в объекты.
Однако вы можете ознакомиться с основным синтаксисом, используемым ниже:
```
let obj = Object.create (prototype_object, propertiesObject)
          // второй аргумент propertiesObject является необязательным
```
Пример использования метода Object.create ():
let footballers = {
position: "Striker"
}

let footballer1 = Object.create(footballers);

// Output : Striker
console.log(footballer1.position);

Выход:

В приведенном выше примере футболисты послужили прототипом для создания объекта «футболист1».
Все объекты, созданные таким образом, наследуют все свойства и методы от своих объектов-прототипов. У прототипов могут быть прототипы, у них могут быть прототипы и так далее. В JavaScript это называется цепочкой прототипов. Эта цепочка завершается Object.prototype который является резервным прототипом по умолчанию для всех объектов. Объекты Javascript по умолчанию наследуют свойства и методы от Object.prototype, но их можно легко переопределить. Также интересно отметить, что прототипом по умолчанию не всегда является Object.prototype. Например, строки и массивы имеют свои собственные прототипы по умолчанию - String.prototype и Array.prototype соответственно.

Доступ к членам объекта

Доступ к членам объекта (свойствам или методам) можно получить с помощью:

точечная запись:

 (имя_объекта.имя_члена)

 let school = {
    name : "Vivekanada" ,
    location : "Delhi" ,
    established : 1971,
    20 : 1000,
    displayinfo : function () {
        console.log(`${school.name} was established
          in ${school.established} at ${school.location}`);
    }
 
}
 
console.log(school.name);
 
console.log(school.established);

Выход:

Обозначение скобок:

 objectName ["memberName"]

 let school = {
    name : "Vivekanada School" ,
    location : "Delhi" ,
    established : 1995,
    20 : 1000,
    displayinfo : function () {
        document.write(`${school.name} was established
          in ${school.established} at ${school.location}`);
    }
 }
 
// Output : Vivekanada School
 console.log(school[ 'name' ]);
 
// Output: 1000
 console.log(school[ '20' ]); 

Выход:

В отличие от записи через точку, ключевое слово скобки работает с любой комбинацией строк, включая, но не ограничиваясь, строки из нескольких слов.
Например:

somePerson.first name // недействительно
    somePerson ["имя"] // допустимо

В отличие от точечной записи, скобка может также содержать имена, которые являются результатами любых переменных выражений, значения которых вычисляются во время выполнения.
Например :

let key = "first name" somePerson [key] = "Имя Фамилия"

Подобные операции невозможны при использовании точечной записи.

Итерация по всем ключам объекта

Чтобы перебрать все существующие перечислимые ключи объекта, мы можем использовать конструкцию for...in . Стоит отметить, что это позволяет нам получить доступ только к тем свойствам объекта, которые можно перечислить (напомним, что перечислимость является одним из четырех атрибутов свойств данных).
Например, свойства, унаследованные от Object.prototype, не подлежат перечислению. Но перечислимые свойства, унаследованные откуда-то, также могут быть доступны с помощью конструкции for...in
Пример:

 let person = {
    gender : "male"
 }
 
var person1 = Object.create(person);
 person1.name = "Adam" ;
 person1.age = 45;
 person1.nationality = "Australian" ;
 
for (let key in person1) {
 // Output : name, age, nationality
 // and gender
    console.log(key);
 }

Выход:

Удаление свойств

Чтобы удалить свойство объекта, мы можем использовать оператор delete Пример его использования приведен ниже:

 let obj1 = {
    propfirst : "Name"
 }
 
// Output : Name
 console.log(obj1.propfirst);
 delete obj1.propfirst
 
// Output : undefined
 console.log(obj1.propfirst);

Выход:

Важно отметить, что мы не можем удалить унаследованные или неконфигурируемые свойства таким образом.
Например :

 let obj1 = {
    propfirst : "Name"
 }
 // Output : Name
 console.log(obj1.propfirst)
  let obj2 = Object.create(obj1);
 
 // Output : Name
  console.log(obj2.propfirst);
   
  // Output : true.
  console.log( delete obj2.propfirst);
 
    // Surprisingly Note that this will return true
    // regardless of whether the deletion was successful
 
    // Output : Name
    console.log(obj2.propfirst);

Выход:

JavaScript

Объекты в Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ