Наиболее важная часть объекта – его свойства. Объект представляет из себя набор свойств, и каждое свойство состоит из имени и значения, ассоциированного с этим именем. Именем свойства (ключом) может быть только строка, а вот значением – любой тип данных. Если значением свойства является функция, то её можно назвать методом объекта.

Свойства объектов в JavaScript являются теми же самыми переменными, за тем исключением, что они закреплены за объектом. Как и все переменные JavaScript, имя объекта (которое тоже может быть переменной) и имя свойства чуствительны к регистру. Свойства объекта определяют его индивидуальные характеристики.

Получить значение свойства можно с помощью операторов точки (.) или квадратных скобок ([]). Значение в левой части оператора должно быть ссылкой на объект, обычно это просто имя переменной, содержащей ссылку на объект, но это может быть любое допустимое в JavaScript выражение, являющееся объектом.

Значение в правой части оператора должно быть именем свойства. При использовании оператора точка (.) справа должен находиться простой идентификатор, соответствующий имени свойства. Доступ к любому имени свойства, которое содержит невалидный JavaScript идентификатор (например, имя свойства содержит в себе пробел, тире или начинается с цифры), может быть получен с использованием квадратных скобок ([]).

Выполнить код »

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

Выполнить код »

Значение объекта может быть обновлено путем присваивания. Если свойство с таким именем уже существует в объекте, его значение заменяется:

Выполнить код »

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

Выполнить код »

Если имя свойства хранится в переменной, то единственный способ к нему обратиться – это применение оператора [] (квадратные скобки).

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

Выполнить код »

Методы объектов можно добавлять и удалять в любой момент, точно также как вы поступаете с обычными свойствами объектов:

Выполнить код »

Для доступа к свойствам объекта внутри метода используется ключевое слово this. Использование this позволяет ссылаться на объект, к которому принадлежит метод:

Выполнить код »

Здесь вместо this внутри функции (метода) greeting можно было бы обратиться к объекту, используя переменную person (сам объект):

Ключевое слово this
var person = {
  name: 'John',
  greeting: function() { 
    alert( 'Hello, ' + this.name + '!');
  }
// идентичная запись
greeting: function() { 
    alert( 'Hello, ' + person.name + '!');
  }

В предыдущем примере мы определили функцию внутри свойства greeting во время определения объекта person. Однако, мы можем определить сначала функцию, а затем закрепить ее за свойством person.fun. В таком случае поведение this не изменится:

Выполнить код »

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

Через ключевое слово this метод может получить доступ не только к любому свойству объекта, но и передать куда-нибудь ссылку на сам объект:

Выполнить код »

Известно, что каждый объект содержит ссылку на свой объект-прототип. Если метод находится где-то в цепочке прототипов, то this ссылается на объект, на котором был вызван метод, т.е. как будто этот метод является методом самого объекта, а не прототипа.

Выполнить код »

В этом примере объект person, не имеет собственного свойства (метода) fullName, а наследует это свойство от своего прототипа prototypeObject. Поскольку поиск свойства начался с person.fullName, то this внутри функции fullName будет ссылаться на объект person. Таким образом, если fullName вызывается как метод объекта person, то и this относится к person. Это очень важная особеность прототипного наследования JavaScript.

Оператор delete удаляет свойство из объек­та. Он удаляет свойство объекта, если оно есть. Удаление не касается свойств объектов, связанных по цепочке прототипов. Если свойство с таким же именем существует в цепочке прототипов, объект унаследует это свойство из прототипа.

Выражение delete возвращает true, если удаление свойства прошло успешно. delete вернет false только в том случае, когда свойство не было удалено (например, если свойство относится к защищенному объекту, принадлежащему браузеру). true возвращается даже в том случае, если свойство, которое вы пытаетесь удалить, не существует в объекте:

Выполнить код »
  • Объект представляет собой набор свойств.
  • Получить значение свойства можно с помощью операторов точки (.) или квадратных скобок ([]).
  • Свойства можно добавить в объект в любой момент. Для этого следует присвоить значение с указанием имени нового свойства.
  • Метод представляет собой свойство, значением которого является функция. Для ссылки на объект, из которого вызывается метод, используется ключевое слово this.
  • Методы можно вызывать в точечной записи: имя объекта, точка и имя свойства метода, за которым следует пара круглых скобок.
  • Метод можно рассматривать как функцию, присвоенную свойству, поэтому новый метод можно добавить в любой момент.
  • Методы могут получать аргументы, как и обычные функции.
  • Если несуществующему свойству объекта присваивается значение, данное свойство добавляется в объект. Для удаления свойств используют инструкцию delete.

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

    Почему данный код выдаёт синтаксическую ошибку?

    var cat = { 
    legs: 4
    name: "Гармония" 
    color: "Черепаховый"
    };
    
    alert( cat.name );  // SyntaxError
    
    Показать решение

    Решение:

    Чтобы исправить ошибку, нужно добавить запятую после первого и второго свойства.

    Выполнить код »
  • Доступ к свойствам объекта

    Сохраните значения свойств объекта myObj в переменных x, y и z. Выведите значения переменных x, y и z через alert.

    var myObj = {
      "an entree": "hamburger",
      "my side": "veggies",
      "the drink": "water"
    };
    
    // ваш код
    
    Показать решение
    Выполнить код »
  • Свойство в переменной

    1. В переменной myDog сохраните имя свойства объекта dogs: "hunter".
    2. Присвойте свойство с именем myDog и значением "Ротвейлер" объекту dogs.
    3. Выведите значение свойства, хранящегося в переменной myDog через alert.
    var dogs = {
      running: "Арабская борзая",
      hunter: "Лабрадор",
      guard: "Московская"
    }
    
    // ваш код
    
    Показать решение

    Решение:

    Если имя свойства объекта хранится в переменной (var myDog = "hunter"), то обратиться к нему можно только через квадратные скобки dogs[myDog].

    Выполнить код »
  • Обновить свойство

    Поменяйте значение свойства guard c "Московская" на "Московская-сторожевая"

    var dogs = {
      running: "Арабская борзая",
      hunter: "Лабрадор",
      guard: "Московская"
    }
    
    // ваш код
    
    Показать решение

    Решение:

    Если имя свойства объекта хранится в переменной (var myDog = "hunter"), то обратиться к нему можно только через квадратные скобки dogs[myDog].

    Выполнить код »
  • Добавление и удаление свойств

    Добавьте в объект dogs свойство с именем driving и значением "Сибирский хаски". Удалите свойство "guard" из dogs. Выведите вновь добавленное и удалённое свойства через alert.

    var dogs = {
      running: "Арабская борзая",
      hunter: "Лабрадор",
      guard: "Московская-сторожевая"
    }
    
    // ваш код
    
    Показать решение

    Решение:

    Выполнить код »
  • Добавление метода

    1. Определите никак не связанную с приведенными объектами dog_1 и dog_2 функцию testBreed, которая будет выводить породу (breed), тип (a type) и вес (the weight) собаки.
    2. Присвойте функцию testBreed свойству sayAbout для обоих объектов.
    3. Запустите функцию testBreed для каждого из объектов.
    var dog_1 = {
      breed: "Алабай",
      "a type": "собака-компаньон",
      "the weight": "50 кг"
    }
    
    var dog_2 = {
      breed: "Бультерьер",
      "a type": "бойцовская",
      "the weight": "36 кг"
    }
    
    // ваш код
    
    Показать решение

    Решение:

    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).