Блог

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

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

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

let school = {
 name : "Vivekananda School",
 location : "Delhi",
 established : "1971"
}

В приведенном выше примере “name”, “location”, “established” все ли “ключи” и “Vivekananda School”, “Delhi” и 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 = {  "school name" : "Vivekananda School", } 

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

Выход:

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

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

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

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

• ценность: Стоимость недвижимости.
• доступно для записи: Если значение true, значение свойства может быть изменено
• перечислимые: Если значение true, свойство может быть повторено с помощью перечисления “для”. В противном случае свойство считается неисчислимым.
• настраиваемый:Если значение false, попытки удалить свойство, изменить свойство на свойство доступа или или изменить его атрибуты (кроме [[Значение]] или изменить [[Доступно для записи]] на false) завершатся неудачей.

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

console.log(object1.hasOwnProperty('property1')); // true

Выход:

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

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

1. Использование синтаксиса объектного литерала : Синтаксис объектного литерала использует нотацию {…} для прямой инициализации объекта и его методов/свойств.
   Давайте рассмотрим пример создания объектов с помощью этого метода :

var obj = { member1 : value1, member2 : value2, };

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

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

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, которые значительно снижают эту нагрузку, как указано ниже:

3. Конструкторы: Конструкторы в 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 объект-прототип функции ( Каждая функция в JavaScript получает объект-прототип, который изначально является просто пустым объектом, но может быть изменен.Объект при создании экземпляра наследует все свойства от объекта-прототипа своего конструктора).
• Затем вызывает Vehicle() в контексте нового объекта, что означает, что, когда ключевое слово “this” встречается в конструкторе(vehicle ()), оно ссылается на новый объект, созданный на первом шаге.
• Как только это будет завершено, вновь созданный объект возвращается в car1 и car2(в приведенном выше примере).

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

class people {
	constructor()
	{
		this.name = "Adam";
	}
}

let person1 = new people();

// Output : Adam	
console.log(person1.name);	

Выход:

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

4. Прототипы : Другой способ создания объектов предполагает использование прототипов. Каждая функция JavaScript имеет prototype свойство объекта по умолчанию(по умолчанию оно пустое). Методы или свойства могут быть прикреплены к этому свойству. Подробное описание прототипов выходит за рамки этого введения в объекты.

Однако вы можете ознакомиться с основным синтаксисом, используемым, как показано ниже:

let obj = Object.create(prototype_object, propertiesObject) // the second propertiesObject argument is optional 

Примером использования метода Object.create() является:

let footballers = {
	position: "Striker"
}

let footballer1 = Object.create(footballers);

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

Выход:

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

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

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

1. точечная нотация :

(objectName.memberName)

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);

Выход:

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

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']);

Выход:

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

somePerson.first name // invalid  somePerson["first name"] // valid 

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

let key = "first name" somePerson[key] = "Name Surname" 

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

Перебор всех ключей объекта

Для перебора всех существующих перечислимых ключей объекта мы можем использовать 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);

Выход: