Перейти к содержимому

Как объявить объект в javascript

  • автор:

Объект функции, NFE

Как мы уже знаем, в JavaScript функция – это значение.

Каждое значение в JavaScript имеет свой тип. А функция – это какой тип?

В JavaScript функции – это объекты.

Можно представить функцию как «объект, который может делать какое-то действие». Функции можно не только вызывать, но и использовать их как обычные объекты: добавлять/удалять свойства, передавать их по ссылке и т.д.

Свойство «name»

Объект функции содержит несколько полезных свойств.

Например, имя функции нам доступно как свойство «name»:

function sayHi() < alert("Hi"); >alert(sayHi.name); // sayHi

Что довольно забавно, логика назначения name весьма умная. Она присваивает корректное имя даже в случае, когда функция создаётся без имени и тут же присваивается, вот так:

let sayHi = function() < alert("Hi"); >; alert(sayHi.name); // sayHi (есть имя!)

Это работает даже в случае присваивания значения по умолчанию:

function f(sayHi = function() <>) < alert(sayHi.name); // sayHi (работает!) >f();

В спецификации это называется «контекстное имя»: если функция не имеет name, то JavaScript пытается определить его из контекста.

Также имена имеют и методы объекта:

let user = < sayHi() < // . >, sayBye: function() < // . >> alert(user.sayHi.name); // sayHi alert(user.sayBye.name); // sayBye

В этом нет никакой магии. Бывает, что корректное имя определить невозможно. В таких случаях свойство name имеет пустое значение. Например:

// функция объявлена внутри массива let arr = [function() <>]; alert( arr[0].name ); // // здесь отсутствует возможность определить имя, поэтому его нет

Впрочем, на практике такое бывает редко, обычно функции имеют name .

Свойство «length»

Ещё одно встроенное свойство «length» содержит количество параметров функции в её объявлении. Например:

function f1(a) <> function f2(a, b) <> function many(a, b, . more) <> alert(f1.length); // 1 alert(f2.length); // 2 alert(many.length); // 2

Как мы видим, троеточие, обозначающее «остаточные параметры», здесь как бы «не считается»

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

Например, в коде ниже функция ask принимает в качестве параметров вопрос question и произвольное количество функций-обработчиков ответа handler .

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

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

Чтобы вызвать обработчик handler правильно, будем проверять свойство handler.length .

Идея состоит в том, чтобы иметь простой синтаксис обработчика без аргументов для положительных ответов (наиболее распространённый случай), но также и возможность передавать универсальные обработчики:

function ask(question, . handlers) < let isYes = confirm(question); for(let handler of handlers) < if (handler.length == 0) < if (isYes) handler(); >else < handler(isYes); >> > // для положительных ответов вызываются оба типа обработчиков // для отрицательных - только второго типа ask("Вопрос?", () => alert('Вы ответили да'), result => alert(result));

Это частный случай так называемого Ad-hoc-полиморфизма – обработка аргументов в зависимости от их типа или, как в нашем случае – от значения length . Эта идея имеет применение в библиотеках JavaScript.

Пользовательские свойства

Мы также можем добавить свои собственные свойства.

Давайте добавим свойство counter для отслеживания общего количества вызовов:

function sayHi() < alert("Hi"); // давайте посчитаем, сколько вызовов мы сделали sayHi.counter++; >sayHi.counter = 0; // начальное значение sayHi(); // Hi sayHi(); // Hi alert( `Вызвана $ раза` ); // Вызвана 2 раза

Свойство не есть переменная

Свойство функции, назначенное как sayHi.counter = 0 , не объявляет локальную переменную counter внутри неё. Другими словами, свойство counter и переменная let counter – это две независимые вещи.

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

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

function makeCounter() < // вместо // let count = 0 function counter() < return counter.count++; >; counter.count = 0; return counter; > let counter = makeCounter(); alert( counter() ); // 0 alert( counter() ); // 1

Свойство count теперь хранится прямо в функции, а не в её внешнем лексическом окружении.

Это хуже или лучше, чем использовать замыкание?

Основное отличие в том, что если значение count живёт во внешней переменной, то оно не доступно для внешнего кода. Изменить его могут только вложенные функции. А если оно присвоено как свойство функции, то мы можем его получить:

function makeCounter() < function counter() < return counter.count++; >; counter.count = 0; return counter; > let counter = makeCounter(); counter.count = 10; alert( counter() ); // 10

Поэтому выбор реализации зависит от наших целей.

Named Function Expression

Named Function Expression или NFE – это термин для Function Expression, у которого есть имя.

Например, давайте объявим Function Expression:

let sayHi = function(who) < alert(`Hello, $`); >;

И присвоим ему имя:

let sayHi = function func(who) < alert(`Hello, $`); >;

Чего мы здесь достигли? Какова цель этого дополнительного имени func ?

Для начала заметим, что функция всё ещё задана как Function Expression. Добавление «func» после function не превращает объявление в Function Declaration, потому что оно все ещё является частью выражения присваивания.

Добавление такого имени ничего не ломает.

Функция все ещё доступна как sayHi() :

let sayHi = function func(who) < alert(`Hello, $`); >; sayHi("John"); // Hello, John

Есть две важные особенности имени func , ради которого оно даётся:

  1. Оно позволяет функции ссылаться на себя же.
  2. Оно не доступно за пределами функции.

Например, ниже функция sayHi вызывает себя с «Guest» , если не передан параметр who :

let sayHi = function func(who) < if (who) < alert(`Hello, $`); > else < func("Guest"); // использует func, чтобы снова вызвать себя же >>; sayHi(); // Hello, Guest // А вот так - не cработает: func(); // Ошибка, func не определена (недоступна вне функции)

Почему мы используем func ? Почему просто не использовать sayHi для вложенного вызова?

Вообще, обычно мы можем так поступить:

let sayHi = function(who) < if (who) < alert(`Hello, $`); > else < sayHi("Guest"); >>;

Однако, у этого кода есть проблема, которая заключается в том, что значение sayHi может быть изменено. Функция может быть присвоена другой переменной, и тогда код начнёт выдавать ошибки:

let sayHi = function(who) < if (who) < alert(`Hello, $`); > else < sayHi("Guest"); // Ошибка: sayHi не является функцией >>; let welcome = sayHi; sayHi = null; welcome(); // Ошибка, вложенный вызов sayHi больше не работает!

Так происходит, потому что функция берёт sayHi из внешнего лексического окружения. Так как локальная переменная sayHi отсутствует, используется внешняя. И на момент вызова эта внешняя sayHi равна null .

Необязательное имя, которое можно вставить в Function Expression, как раз и призвано решать такого рода проблемы.

Давайте используем его, чтобы исправить наш код:

let sayHi = function func(who) < if (who) < alert(`Hello, $`); > else < func("Guest"); // Теперь всё в порядке >>; let welcome = sayHi; sayHi = null; welcome(); // Hello, Guest (вложенный вызов работает)

Теперь всё работает, потому что имя «func» локальное и находится внутри функции. Теперь оно взято не снаружи (и недоступно оттуда). Спецификация гарантирует, что оно всегда будет ссылаться на текущую функцию.

Внешний код все ещё содержит переменные sayHi и welcome , но теперь func – это «внутреннее имя функции», таким образом она может вызвать себя изнутри.

Это не работает с Function Declaration

Трюк с «внутренним» именем, описанный выше, работает только для Function Expression и не работает для Function Declaration. Для Function Declaration синтаксис не предусматривает возможность объявить дополнительное «внутреннее» имя.

Зачастую, когда нам нужно надёжное «внутреннее» имя, стоит переписать Function Declaration на Named Function Expression.

Итого

Функции – это объекты.

  • name – имя функции. Обычно берётся из объявления функции, но если там нет – JavaScript пытается понять его из контекста.
  • length – количество аргументов в объявлении функции. Троеточие («остаточные параметры») не считается.

Если функция объявлена как Function Expression (вне основного потока кода) и имеет имя, тогда это называется Named Function Expression (Именованным Функциональным Выражением). Это имя может быть использовано для ссылки на себя же, для рекурсивных вызовов и т.п.

Также функции могут содержать дополнительные свойства. Многие известные JavaScript-библиотеки искусно используют эту возможность.

Они создают «основную» функцию и добавляют множество «вспомогательных» функций внутрь первой. Например, библиотека jQuery создаёт функцию с именем $ . Библиотека lodash создаёт функцию _ , а потом добавляет в неё _.clone , _.keyBy и другие свойства (чтобы узнать о ней побольше см. документацию). Они делают это, чтобы уменьшить засорение глобального пространства имён посредством того, что одна библиотека предоставляет только одну глобальную переменную, уменьшая вероятность конфликта имён.

Таким образом, функция может не только делать что-то сама по себе, но также и предоставлять полезную функциональность через свои свойства.

Задачи

Установка и уменьшение значения счётчика

важность: 5

Измените код makeCounter() так, чтобы счётчик мог уменьшать и устанавливать значение:

  • counter() должен возвращать следующее значение (как и раньше).
  • counter.set(value) должен устанавливать счётчику значение value .
  • counter.decrease() должен уменьшать значение счётчика на 1.

Посмотрите код из песочницы с полным примером использования.

P.S. Для того, чтобы сохранить текущее значение счётчика, можно воспользоваться как замыканием, так и свойством функции. Или сделать два варианта решения: и так, и так.

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

function makeCounter() < let count = 0; function counter() < return count++; >counter.set = value => count = value; counter.decrease = () => count--; return counter; >

Инициализация объектов

Объекты могут быть инициализированы с помощью new Object() , Object.create() или литеральной (инициирующей) нотации. Инициализатор объекта это разделённый запятыми список ноль или более пар имён свойств и ассоциируемых с ними значений, заключённых в фигурные скобки ( <> ).

Синтаксис

var o = >; var o =  a: "foo", b: 42, c: > >; var a = "foo", b = 42, c = >; var o =  a: a, b: b, c: c >; var o =  property: function ([parameters]) >, get property() >, set property(value) >, >; 

Новая нотация в ECMAScript 2015

Пожалуйста, просмотрите таблицу поддержки этих нотаций. В неподдерживаемом окружении, эти нотации приведут к синтаксической ошибке.

// Сокращение имён свойств (ES2015) var a = "foo", b = 42, c = >; var o =  a, b, c >; // Сокращение имён методов (ES2015) var o =  property([parameters]) >, >; // Вычисление имён свойств (ES2015) var prop = "foo"; var o =  [prop]: "hey", ["b" + "ar"]: "there", >; 

Описание

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

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

Пустой объект без свойств может быть создан следующим образом:

var object = >; 

Однако, преимущество литеральной или инициирующей нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создаётся простой список пар ключ: значение , разделённых запятой. Следующий код создаёт объект с тремя парами значений и ключи это «foo» , «age» и «baz» . Значения этих ключей строка «bar» , число 42 и другой объект.

var object =  foo: "bar", age: 42, baz:  myProp: 12 >, >; 

Доступность свойств

После того, как создали объект, вы, вероятно, захотите прочитать или изменить его. Свойства объектов могут быть получены при помощи точечной нотации или квадратных скобок. Смотрите property accessors для детальной информации.

.foo; // "bar" object["age"]; // 42 object.foo = "baz"; 

Определение свойств

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

var a = "foo", b = 42, c = >; var o =  a: a, b: b, c: c, >; 

С ECMAScript 2015 появилась короткая нотация, способная достичь того же:

var a = "foo", b = 42, c = >; // Сокращение имён свойств (ES2015) var o =  a, b, c >; // Иначе говоря, console.log(o.a ===  a >.a); // true 
Повторение имён свойств

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

var a =  x: 1, x: 2 >; console.log(a); // 

В строгом режиме ECMAScript 5, повторение имён свойств будет воспринято как SyntaxError . С введением вычисляемых имён свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.

function haveES2015DuplicatePropertySemantics()  "use strict"; try  ( prop: 1, prop: 2 >); // Не будет ошибки, повторение имён доступно в строгом режиме return true; > catch (e)  // Будет ошибка, дубликаты запрещены в строгом режиме return false; > > 

Описание методов

Свойство объекта также может ссылаться на function, getter или setter.

var o =  property: function ([parameters]) >, get property() >, set property(value) >, >; 

В ECMAScript 2015, доступна короткая нотация, поэтому слово «function» более не обязательно.

// Сокращение имён методов (ES2015) var o =  property([parameters]) >, *generator() >, >; 

В ECMAScript 2015 есть способ кратко объявить свойства, чьими значениями являются генераторы функций:

var o =  *generator()  . . . .. > >; 

Что эквивалентно следующей ES5-подобной нотации (но отметьте, что ECMAScript 5 не содержит генераторов):

var o =  generator: function* ()  . . . .. > >; 

Для большей информации и примеров смотри method definitions.

Вычисляемые имена свойств

Начиная с ECMAScript 2015, синтаксис объявления объектов также поддерживает вычисляемые имена свойств. Это позволяет добавлять в скобки [] выражение, которое будет вычислено, как имя свойства. Это похоже на скобочную нотацию синтаксиса property accessor, которую вы, вероятно, уже использовали, чтобы прочитать и задать свойство. Теперь можно использовать аналогичный способ с литеральными объектами:

// Вычисляемое имя свойства (ES2015) var i = 0; var a =  ["foo" + ++i]: i, ["foo" + ++i]: i, ["foo" + ++i]: i, >; console.log(a.foo1); // 1 console.log(a.foo2); // 2 console.log(a.foo3); // 3 var param = "size"; var config =  [param]: 12, ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4, >; console.log(config); // 

Spread-свойства

Rest/Spread свойство ECMAScript предлагает (stage 3) добавлять spread свойства в литеральную нотацию. Оно копирует собственные перечисляемые свойства из представленного объекта в новый.

Поверхностное копирование (исключая prototype) или слияние объектов теперь возможно с помощью более короткого синтаксиса, чем Object.assign() .

var obj1 =  foo: "bar", x: 42 >; var obj2 =  foo: "baz", y: 13 >; var clonedObj =  . obj1 >; // Объект var mergedObj =  . obj1, . obj2 >; // Объект 

Заметьте, что Object.assign() вызывает setters, тогда как оператор spread нет.

Изменение Prototype

Объявление свойства в виде __proto__: value или «__proto__»: value не создаст свойства с именем __proto__ . Вместо этого, если предоставляемое значение объект или null , оно заменит [[Prototype]] создаваемого объекта на это значение. (Если значение не объект или null, объект не изменится.)

var obj1 = >; assert(Object.getPrototypeOf(obj1) === Object.prototype); var obj2 =  __proto__: null >; assert(Object.getPrototypeOf(obj2) === null); var protoObj = >; var obj3 =  __proto__: protoObj >; assert(Object.getPrototypeOf(obj3) === protoObj); var obj4 =  __proto__: "not an object or null" >; assert(Object.getPrototypeOf(obj4) === Object.prototype); assert(!obj4.hasOwnProperty("__proto__")); 

Только одно изменение prototype разрешено через литеральное объявление объекта: несколько изменений prototype вызовут синтаксическую ошибку.

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

var __proto__ = "variable"; var obj1 =  __proto__ >; assert(Object.getPrototypeOf(obj1) === Object.prototype); assert(obj1.hasOwnProperty("__proto__")); assert(obj1.__proto__ === "variable"); var obj2 =  __proto__()  return "hello"; >, >; assert(obj2.__proto__() === "hello"); var obj3 =  ["__prot" + "o__"]: 17 >; assert(obj3.__proto__ === 17); 

Литеральная нотация vs JSON

Литеральная нотация не то же самое, что и JavaScript Object Notation (JSON). Хотя они и выглядят аналогично, существует разница между ними:

  • JSON позволяет объявление свойств только с помощью синтаксиса «property»: value . Имя свойства должно быть заключено в двойные кавычки и объявление не может быть сокращено.
  • В JSON значения могут быть только строками, числами, массивами, true , false , null или другими (JSON) объектами.
  • Значения-функции (смотри «Методы» выше) не могут быть присвоены свойствам в JSON.
  • Объект вида Date будет строкой после JSON.parse() .
  • JSON.parse() отклонит вычисляемые имена свойств и вернёт ошибку.

Спецификации

Specification
ECMAScript Language Specification
# sec-object-initializer

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Property accessors
  • get / set
  • Method definitions
  • Lexical grammar

42. Объекты в JavaScript

Объект – это фундамент JavaScript. Объект – это значение, в котором есть другие значения, если попросту сказать. Объект состоит из неограниченного, неупорядоченного количества свойств, которые имеют свое имя и значение. Самый простой способ создать объект, это объединить свойства в фигурные скобки. Далее примеры:

var obj = site: first: 'corpyn.ru', 
second: 'codebra.ru'
>,
'author theory': 'Иван Иванов',
'today-sdate': '11 Апреля 2015',
>;

document.write(obj.site.first + "
"); // -> corpyn.ru
document.write(obj.site.second + "
"); // -> codebra.ru
document.write(obj.site['first'] + "
"); // -> corpyn.ru
document.write(obj['site']['first'] + "
"); // -> corpyn.ru
document.write(obj.author theory + "
"); // -> error
document.write(obj['author theory'] + "
"); // -> Иван Иванов

Объекты делятся на категории:

  • Объект базового языка – это объект, который определен спецификацией ECMAScript. Например, дата, массив, регулярное выражение
  • Объект среды выполнения – это объект, который определен средой выполнения (например, браузер)
  • Пользовательский объект – это объект, который создан во время выполнения скрипта

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

var obj =

После начинаем описывать свойства – имя_свойства: значение . Правила для имен свойств такие же, как и для переменных. НО! Можно указывать любое имя, при условии, что оно будет помещено в одинарные или двойные кавычки. Да даже такое: 217i&*2d

var obj = max: 'Любое значение'
>

Если свойств несколько, то после каждого должна быть запятая (последнюю запятую ставить не обязательно). Далее пример с ошибкой:

var obj = max: 'Любое значение' 
min: 'Любое значение'
>

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

var obj = max: 'Любое значение', 
min: 'Любое значение'
>

// Так тоже можно
var obj = max: 'Любое значение',
min: 'Любое значение',
>

Вложений можно делать сколько угодно. Напишем простого робота:

var robot = say: ask: yes: 'Yes!', 
no: 'No!',
>,
go: toLeft: 'Влево',
toRight: 'Вправо'
>,
>,
>;

document.write(robot.say.ask.yes); // -> Yes!
document.write(robot.say.ask.no); // -> No!
document.write(robot.say.ask); // -> [object Object]
document.write(robot.say.go.yes); // -> undefined (в свойстве go, нет свойства yes)
document.write(robot.say.go.toRight); // -> Вправо

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

var obj = new Object(); // == <>
var arr = new Array(); // == []

Объекты в JS

В этой статье вы познакомитесь с объектами в JavaScript на конкретных примерах.

В статье про типы данных в JavaScript мы уже рассказывали про 7 различных типов данных. Их еще называют «примитивными»: поскольку в них может содержаться только одно значение (например, строка, число или что-нибудь другое).

В этой статье мы поговорим про восьмой тип данных — объекты.

Объект — это непримитивный тип данных для хранения коллекций различных значений. Это одна из основ языка, объекты очень часто используют в JavaScript.

Вот пример объекта в JavaScript:

// объект let student = < firstName: 'Дима', class: 10 >;

Как видите, объект может хранить несколько значений. Например, в нашем объекте student хранится информация об имени школьника и классе, в которому он учится.

Примечание. Объекты в JavaScript немного отличаются от их реализации в других языках программирования. В JS не нужно создавать классы для создания объектов.

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

Синтаксис

Синтаксис объявления объекта в JS следующий:

let имя_объекта =

Ключ:значение — свойства

При использовании синтаксиса <. >можно поместить в объект несколько свойств — так называются пары в виде ключ: значение . При этом свойства нужно разделять запятыми.

let person = < name: 'Андрей', age: 20 >; console.log(typeof person); // Вывод: object
  • name и age — ключи,
  • ‘Андрей’ и 20 — значения,
  • name: ‘Андрей’ и age: 20 — свойства.

Можно в одну строку

Объявить объект можно и в одно строку:

let person = < name: 'Андрей', age: 20 >;

Можно с помощью const

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

const person = < name: 'Андрей', age: 20 >; // так сделать получится person.name = 'Петя'; // а так уже нет person = < name: 'Петя', age: 20 >; 

Если вы не понимаете, что означает строка person.name , — об этом ниже.

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

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

1. Через точку

Синтаксис
имяОбъекта.ключ
Пример
const person = < name: 'Андрей', age: 20, >; // доступ к свойству console.log(person.name); // Вывод: Андрей

2. Через квадратные скобки

Синтаксис
имяОбъекта["ключ"]
Пример
const person = < name: 'Андрей', age: 20, >; // доступ к свойству console.log(person["name"]); // Вывод: Андрей

Вложенные объекты

Внутри объекта можно хранить другой объект. Это называется вложенными объектами.

const student = < name: 'Андрей', age: 20, marks: < science: 70, math: 75 >> // доступ к свойству marks объекта student console.log(student.marks); // Вывод: // доступ к свойству science объекта marks, // который является свойством объекта student console.log(student.marks.science); // Вывод: 70

Методы объектов

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

const person = < name: 'Сергей', age: 30, // using function as a value greet: function() < console.log('привет') >> person.greet(); // Вывод: привет

В этом примере функция используется в качестве значения для ключа greet . Поэтому для вызова функции внутри объекта нужно использовать person.greet() , а не person.greet .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *