В JS объект представляет собой неупорядоченный набор связанных пар ключ / значение (свойств). Каждое свойство может ссылаться на примитивный тип (строка, число, логическое значение, null, undefined) или другой объект (массив, функции и т. Д.).

Есть два типа двух форм объектов:

  • Буквальный (декларативная форма)
const developer = {
 name: 'Srinjoy Santra',
 age: 21,
 "isGraduate": false
 };
  • Созданная форма
const developer = new Object();
developer.name = 'Srinjoy Santra';
developer.age = 21;
developer['isGraduate'] = false;

Давайте разберемся с ними и посмотрим, что происходит:

  • Переменная, присвоенная объекту, называется developer.
  • Фигурные скобки используются для определения объекта developer.
  • Отдельные ключи (например, g, name) связаны с одним значением (в данном случае 'Srinjoy Santra'). Эти пары ключ / значение соединены двоеточием (:).
  • Каждая отдельная пара ключ / значение, известная как свойство этого объекта, отделяется от других свойств запятой (,). Следовательно, объект developer содержит три свойства.
  • Вторая форма создает новый пустой объект.
  • Затем свойства добавляются одно за другим.

Создание и изменение свойств

Доступ к свойствам объекта

Есть два способа получить доступ к значениям объекта:

  • Точечная запись
developer.age; // 21
  • Обозначение скобок
developer['isGradute']; // false

Оба обозначения эквивалентны, но есть одна загвоздка.

Предположим, мы пытаемся получить доступ к новому свойству из объекта developer.

developer.1 // Uncaught SyntaxError: Unexpected number

developer[1]; // (returns the value of the `1` property)

Кроме того, если мы попытаемся получить доступ к его свойству, используя другую переменную, в которой хранится ключ.

const  variable = 'name';
developer[variable]; // "Srinjoy Santra"
developer.variable; // undefined

Обновление объектов

  • Обновление существующих свойств
developer.age += 3; // 24
developer.isGraduate = true; // true
  • Добавление нового свойства
developer['company'] = 'Google'; // 'Google' Kidding!
  • Удаление собственности
delete developer.company; // true

Передача объекта

Объекты в JS изменяемы, в отличие от примитивов. Если вы передаете объект в функцию, JS передает ссылку на этот объект.

function upgradeSkills(object){
object.skiils[3]='Python';
}
developer.skills = ['Javascript','HTML','CSS'];
upgradeSkills(developer)
developer.skills
//(4) ["Javascript", "HTML", "CSS", "Python"]

Что ж, это круто, если только объект impostor не получает возможность скопировать детали объекта developer.

impostor = developer
impostor.name = 'John Smith'; /* That's the most used FB name */
impostor
//{name: "John Smith", age: 24, isGraduate: true, skills: //Array(4)}
developer
//{name: "John Smith", age: 24, isGraduate: true, skills: //Array(4)}

Поскольку объекты передаются как ссылки, внесение изменений в копию напрямую влияет на исходный объект. В обоих объектах impostor и developer теперь имя "John Smith".

Сравнение объекта с другим объектом

Предположим, другой newImpostor получает доступ к developer значениям объекта и заполняет детали следующим образом.

const newImposter = {
name : 'John Smith',
age : 24,
isGraduate : true,
skills : ['Javascript','HTML','CSS','Python']
}
newImposter === developer // false

Дело в том, что последнее выражение возвращает истину только тогда, когда две ссылки точно на один и тот же объект.

impostor === developer // true

Вызов методов объекта

Помните, что в определении объекта JS я упоминал, что объект может иметь другой объект, такой как методы / функции и т. Д., В качестве своего свойства.

developer.greeting = function () {
  console.log('Hello!');
};
developer['greeting']();// "Hello!"

Требуется уточнение. Методы и функции взаимозаменяемы. Но у них есть небольшая разница. Метод - это часть объекта, а функция - нет. Посмотрите ссылку ниже. Https://stackoverflow.com/questions/155609/whats-the-difference-between-a-method-and-a-function

Передача аргументов в методы

developer['hobby'] = function tell(task) {
  console.log(`My hobby is ${task}.`);
};
developer.hobby(); // "My hobby is blogging."

Вы заметили, что на этот раз, помимо передачи аргументов методу, мы также назвали функцию? Оба (анонимный или именованный) являются допустимым синтаксисом.

Метод может получить доступ к объекту, для которого он был вызван

developer.identify = function() {
console.log(`I am ${this.name}.`);
}
developer.name = 'Srinjoy Santra';
developer.identify();//"I am Srinjoy Santra."

Что this? Это зарезервированное ключевое слово. Значение this определяется при вызове метода, и его значением является объект, для которого был вызван метод.

Не волнуйтесь, если вы не поняли сейчас. Мы еще вернемся к this.

Остерегайтесь глобалов

Ключевое словоthis не привязано. Классическим примером этого является приведенный ниже код.

function knows() {
  this.knowledge = true
}

knows();// undefined

№1. То, как вызывается функция, определяет значение this внутри функции.

Прокрутите вверх и прочтите, как вызывалась функция identify().

developer.identify();

Итак, внутри объекта this будет ссылаться на объект developer.

№2. Когда вызывается обычная функция, значением this является глобальный объект window.

Функция knows() вызывалась как обычная функция (не вызывалась как метод объекта).

knows();

Объект window - это часть спецификаций W3C, которая имеет доступ к большому количеству информации о самой странице.

Хорошо, если этого хватило, чтобы переварить, но это еще не все.

Глобальные переменные - это свойства, а глобальные функции - это методы объекта окна.

var javascriptIsCrazy = true;
(window.javascriptIsCrazy === javascriptIsCrazy); // true
let mentalCondition = 'sane';
(window.mentalCondition === mentalCondtition); // false
knows === this.knows; // true
knows === window.knows; // true

Переменная, объявленная вне функции с let или const, не будет добавлять переменную как свойство объекта window.

Избегайте глобалов

Среди бесчисленных причин, по которым мы не должны использовать глобальные переменные, очень распространены два случая сильной связи и коллизии имен. Проверьте это для других таких случаев. Http://wiki.c2.com/?GlobalVariablesAreBad

Тесная связь

let nation = 'India';
function greeting(){
console.log(`${nation} greets with Namaskar.`);}

Если мы выполним рефакторинг глобальной переменной nation до country, это нарушит работу функции.

Извлечение свойств и значений

Object() функция конструктора имеет доступ к нескольким методам. Два известных метода:

Object.keys ()

Object.keys(developer)
\\(7) ["name", "age", "isGraduate", "skills", "hobby", "identify", \\"greeting"]

Object.values ​​()

Object.values(developer)
(7) ["Srinjoy Santra", 24, true, Array(4), ƒ, ƒ, ƒ]

Object.keys() поддерживается всеми браузерами, тогда как Object.values(), добавленный недавно в 2017 году, может поддерживаться не всеми.

Вы видите здесь ошибку? Упоминание в комментариях.

Понравилось? Покажи свою поддержку хлопками 👏.

Следите за мной и ждите новых статей.

Я Сринджой Сантра. Начинающий веб-разработчик. Вы можете связаться со мной в LinkedIn, посетить мою учетную запись Github или подписаться на меня в Twitter.

Вы также можете проверить меня в Quora, Instagram и Wordpress.

(Эта статья взята из заметок, которые я сделал, когда делал Front-end Web Development Nanodegree от Udacity)



Мой опыт получения стипендии Google India Challenge
В декабре прошлого года в моем почтовом ящике появилось электронное письмо от Udacity India. Учитывая торговую марку Google… medium.com