Объект представляет собой сложный тип данных, который хранит значения и позволяет им быть доступными с определенным ключом. Комбинация ключ / значение внутри объекта называется свойством.
JavaScript - это объектно-ориентированный язык программирования. Это означает, что почти каждое значение является объектом. Некоторые виды значений называются примитивами , и они рассматриваются как «основа», как простые типы данных. Этими примитивами являются строки, числа, логические значения, null и undefined.
(Обратите внимание, что, кроме логических значений, null и undefined, все примитивы также являются секретными объектами, поскольку только объекты могут иметь методы - у вас есть String.split, Number.toString и т. Д.)
Существует также много других типов данных, которые представляют собой особый тип объекта:
- Массивы хранят значения в индексированном виде и гарантируют порядок (в отличие от объектов)
- Функции получают значения, исполняют код и могут возвращать значение для дальнейшего использования
- Наборы похожи на массив, но хранят только уникальные значения
Однако, буквальный объект - это то, о чем думают многие, когда думают, что это объект. Это выглядит так:
const myObject = {
name: "Jack",
cool: false,
friends: 0
pets: ["Dog", "Cat", "Snake"]
};
Вы можете видеть, что свойства объекта имеют формат key: value, с запятой ,, если есть больше свойств (в ES6 допускаются конечные запятые).
Объекты также могут содержать методов :
const myObject = {
name: "Jack",
sayHello: function() {
console.log(`Hello, my name is ${this.name}!`);
}
};
Примечание : При создании методов внутри объекта, функция высшего уровня (в данном случае деталь непосредственно после sayHello), должна быть функцией в стиле ES5 чтобы ссылки на this работали правильно. Если вложенные функции (например, setTimeout) также должны ссылаться на объект, они должны быть функциями в стиле ES6, поскольку функции стрелок (=>) не имеют собственной привязки this.
Объекты также могут быть построены с использованием конструкторов (ES5) или классов (ES6).
Конструктор должен быть функцией ES5, и внутри него вы можете назначить все свойства (обычно из переданных параметров):
function MyObject(name, cool) {
this.name = name;
this.cool = cool;
}
var jack = new MyObject("Jack", false);
var bob = new MyObject("Bob", true);
console.log(jack);
console.log(bob);
.as-console-wrapper { max-height: 100% !important; top: auto; }
Чтобы прикрепить методы к новым объектам, вы можете прикрепить их к prototype конструктора:
function MyObject(name, cool) {
this.name = name;
this.cool = cool;
}
MyObject.prototype.sayHello = function() {
console.log(`Hello, I am ${this.name}`);
};
var jack = new MyObject("Jack", false);
var bob = new MyObject("Bob", true);
jack.sayHello();
bob.sayHello();
Классы ES6 являются рестайлингом конструктора. У вас есть функция constructor, в которой вы определяете все свои свойства и размещаете все остальные методы в одном месте. Вот наш MyObject конструктор, преобразованный в класс ES6:
class MyObject {
constructor(name, cool) {
this.name = name;
this.cool = cool;
}
sayHello() {
console.log(`Hello, I am ${this.name}`);
}
}
let jack = new MyObject("Jack", false);
let bob = new MyObject("Bob", true);
jack.sayHello();
bob.sayHello();
Вы также можете помещать объекты в другие контейнеры данных - например, объекты и массивы. Если вы поместите объект внутрь объекта, у вас есть вложенный объект :
const parent = {
nested: {
value: "I am nested"
}
};
console.log(parent.nested.value);
Как вы можете видеть выше, вы получаете доступ к различным свойствам и методам объектов, используя точечные обозначения. Но что, если у вас есть свойство, которое вы хотите получить, но имя свойства хранится в переменной? Вам необходимо использовать динамическое обозначение свойства , которое также называется квадратное скобочное обозначение (поскольку оно включает квадратные скобки []):
const obj = {
aReallyObscureKey: "Hello!"
};
const key = "aReallyObscureKey";
console.log(obj[key]);
Массивы также могут содержать объекты:
const arrayOfObjects = [{
name: "Jack",
cool: false
}, {
name: "Bob",
cool: true
}];
console.log(arrayOfObjects);
.as-console-wrapper { max-height: 100% !important; top: auto; }
Надеюсь, это поможет. Вот несколько ссылок, которые помогут узнать больше об объектах: