Статьи

Вернуться к основам: синтаксис JavaScript-объекта

Ноябрь 29, 2018

Объекты являются краеугольным камнем языка JavaScript. Многие встроенные типы данных, такие как ошибки, регулярные выражения и функции, представлены в JavaScript как объекты. Чтобы быть успешным разработчиком JavaScript, вы должны четко понимать, как работают объекты. Эта статья научит вас основам создания и управления объектами в JavaScript.

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

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

Создавать объекты в JavaScript легко. Язык обеспечивает синтаксис, известный как буквенная нотация объекта, для быстрого создания объектов. Объектные литералы обозначаются фигурными скобками. В следующем примере создается пустой объект без свойств. 

var object = {};

Внутри фигурных скобок свойства и их значения указываются в виде списка пар ключ / значение. Ключами могут быть строки или идентификаторы, а значениями могут быть любые допустимые выражения. Список пар ключ / значение разделен запятой, каждый ключ и значение отделяются двоеточием. В следующем примере создается объект с тремя свойствами с использованием буквенной нотации. Первое свойство, foo Второе свойство, bar Третье свойство, baz 

 var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};

Обратите внимание на использование пробелов в предыдущем примере. Каждое свойство написано в отдельной строке и имеет отступ. Весь объект мог быть записан в одну строку, но код в этом формате более читабелен. Это особенно верно для объектов со многими свойствами или вложенных объектов.

Доступ к свойствам

JavaScript предоставляет две нотации для доступа к свойствам объекта. Первый и наиболее распространенный, известен как точечная нотация . В точечной нотации доступ к свойству осуществляется путем предоставления имени хост-объекта, за которым следует точка (или точка), а затем имя свойства. В следующем примере показано, как точечная нотация используется для чтения и записи в свойство. Если object.foo Обратите внимание, что если object.fooundefined 

 object.foo = object.foo + 1;

Альтернативный синтаксис для доступа к свойствам объекта известен как обозначение в скобках . В обозначениях в скобках за именем объекта следует набор квадратных скобок. Внутри квадратных скобок имя свойства указывается в виде строки. Предыдущий пример точечной нотации был переписан ниже для использования скобочной нотации. Хотя код может выглядеть иначе, он функционально эквивалентен предыдущему примеру. 

 object["foo"] = object["foo"] + 1;

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

 var f = "f";

object[f + "oo"] = "bar";

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

 object["!@#$%^&*()."] = true;

Доступ к вложенным свойствам

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

 var object = {
  baz: {
    foo: {
      bar: 5
    }
  }
};

Следующие выражения обращаются к вложенному свойству bar В первом выражении используется точечная нотация, а во втором — квадратная скобка. Третье выражение объединяет обе нотации для достижения одинакового результата. 

 object.baz.foo.bar;
object["baz"]["foo"]["bar"];
object["baz"].foo["bar"];

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

 var bar = object.baz.foo.bar;
var count = 0;

for (var i = 0; i < 100000; i++) {
  count += bar;
  // better than count += object.baz.foo.bar;
}

Функции как методы

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

 var object = {
  sum: function(foo, bar) {
    return foo + bar;
  }
};

Методы также могут быть вызваны с использованием точечных и скобочных обозначений. В следующем примере вызывается метод sum() 

 object.sum(1, 2);
object["sum"](1, 2);

Добавление свойств и методов

Буквенная нотация объекта полезна для создания новых объектов, но не может добавлять свойства или методы к существующим объектам. К счастью, добавить новые данные в объект так же просто, как создать оператор присваивания. В следующем примере создается пустой объект. Два свойства, foobarbaz Обратите внимание, что этот пример использует точечную нотацию, но скобочная нотация также будет работать одинаково. 

 var object = {};

object.foo = 1;
object.bar = null;
object.baz = function() {
  return "hello from baz()";
};

Вывод

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

39
Share: