Объекты в ECMAScript | Odessa Frontend Meetup #16

Объекты в ECMAScript
youtube channel
InSimpleWords

ECMAScript is object-based: basic language and
host facilities are provided by objects, and an
ECMAScript program is a cluster of
communicating objects. In ECMAScript, an object
is a collection of zero or more properties each
with attributes that determine how each property
can be used. Properties are containers that hold
other objects, primitive values, or functions.
Объекты в ECMAScript youtube channel
InSimpleWords

Объекты в ECMAScript youtube channel
InSimpleWords

youtube channel
InSimpleWordsОбъекты в ECMAScript

youtube channel
Обычный объект
Экзотический объект

youtube channel
An object is a collection of properties and has a single
prototype object. The prototype may be the null value.

youtube channel
Every object created by a constructor has an
implicit reference (called the object's prototype)
to the value of its constructor's "prototype"
property. Furthermore, a prototype may have a
non-null implicit reference to its prototype, and so
on; this is called the prototype chain.
An object is a collection of properties and has a single
prototype object. The prototype may be the null value.

youtube channel
- Implicit reference в ECMAScript ?
- А что вообще из себя представляет
ECMAScript ?
- Кроме того, что там много текста и
умных слов …

youtube channel
- Описывает работу с какими-то данными
(Reference, Lexical Environment … Record)

youtube channel
- По каким-то алгоритмам

youtube channel
- Похоже на JavaScript?
- А может это и есть JavaScript?
- EcmaScript - есть не что иное как набор
утверждений и правил, на основе
которых написаны / имплементированы
движки JavaScript (SpiderMonkey, V8 …).
- Разве это не одно и тоже?
…

youtube channel
IMPLICIT
EXPLICIT
ECMAScript
JavaScript
VS

youtube channel
IMPLICIT
EXPLICIT
ECMAScript
JavaScript
V8
Реализует
спецификацию,
например,
на С++

youtube channel
[[Prototype]] - ссылка на прототип объекта,
закодированная на уровне ECMAScript (C++)
prototype - обычное свойство функции
конструктора, управляемое из JavaScript,
указывающее на объект, который будет
устанавливаться новорожденным объектам
от этой функции по ссылке [[Prototype]]

youtube channel
__proto__ - ссылка на прототип объекта,
доступная на уровне JavaScript, обнажающая
средство управления прототипом объекта
[[Prototype]] на уровне EcmaScript (C++)
prototype chain (прототипная цепочка) -
специальный термин, который обозначает
связь JavaScript объектов между собой по
ссылке [[Prototype]] на уровне EcmaScript (C++)

youtube channel
Внутренние составляющие объекта (descriptors)
{ age : 31 }
ключ + значение
свойство,
которое управляется
дескриптором

youtube channel
Внутренние составляющие объекта (descriptors)
data property descriptor
[[Value]]
[[Writable]]
[[Enumerable]]
[[Configurable]]
accessor property descriptor
[[Get]]
[[Set]]
[[Enumerable]]
[[Configurable]]
generic property descriptor

youtube channel
Внутренние составляющие объекта (behaviour)
Поведение объекта (behaviour) - это набор
его внутренних методов, которые
реализуют суть объекта и приемы работы с
ним. Внутренние методы описываются
абстрактными алгоритмами, которые
предписывают ожидаемый результат.

youtube channel
по-человечески
Поведение объекта (behaviour) – то, как мы
можем использовать объект. Это список
действий, которые объясняют / показывают,
что должно происходить, например, при
взятии значения свойства, или при его
удалении ... , например

youtube channel
[[GetPrototypeOf]]() - получить прототип
[[PreventExtensions]]() - запретить
“расширять” объект новыми свойствами
[[DefineOwnProperty]](property, Descriptor) -
установить собственное свойство объекта
из заданного дескриптора
… и другие

youtube channel
команда JavaScript
команда ECMAScript
вызывает алгоритм поведения

youtube channel
алгоритм поведения
изменяет
состояние объекта на требуемое

youtube channel
ммм, поведение
экзотического объекта
угадаете
какого
объекта ?

youtube channel
Внутренние составляющие объекта (invariants)
Инварианты - это строгие правила, которым
должны подчиняться все объекты: и обычные, и
экзотические… Эти правила призваны исключить
недопонимание или неоднозначность каких-то
трактований. Запрещено обходить инварианты
какой-то своей или сторонней реализацией. Иначе
это приведет к непредсказуемому поведению кода.

youtube channel
Внутренние составляющие объекта (invariants)
- если свойство объекта заморожено через
атрибут configurable === false, то удалить это
свойство через метод [[Delete]] уже нельзя
- если объект нерасширяем и у него уже есть
прототип V, то любой вызов [[GetPrototypeOf]]
будет всегда возвращать прототип V.
Спасибо, КЭП
А вот здесь уже сложнее

youtube channel
Внутренние составляющие объекта
[[Prototype]]
Descriptors
Behaviour
Invariants
Хотите ещё?

youtube channel
Внутренние составляющие объекта (functions)
[[Call]] ( thisArgument, argumentsList)
[[Construct]] ( argumentsList, newTarget)
[[ECMAScriptCode]] – тело функции
[[FormalParameters]] – параметры функции
[[Strict]] – будет ли выполняться код функции
в строгом режиме
… и другие

youtube channel
[[Environment]] – лексическое окружение, в
котором была создана функция. Используется
как внешнее лексическое окружение при
выполнении кода этой функции.
Ничего не напоминает?
Может …

youtube channel
Замыкание – механизм, который при вызове
функции устанавливает связь её собственного
лексического окружения с внешним лексическим
окружением, где эта функция была создана.
Область видимости – совокупность данных, с
которыми может работать выполняемый код
Давайте не путать с …

youtube channel
Как “забинденная” функция сохраняет this и
прикрепленные аргументы?

youtube channel
Почему генератор может восстановить
исполнение кода на прерванной точке?

youtube channel
Где хранятся коллбеки Promise.prototype.then() ?

youtube channel
Магия исчезает тогда,
когда появляются знания!

youtube channel
Семья – это важная первичная ячейка общества /
ECMAScript, в которой люди / объекты связаны
между собой определенными отношениями.
ЕCMAScript вариант:
конструктор
объект
прототип
Классический вариант:
мама
сын
папа

youtube channel
Функция CreateObj настраивает “свой” объект-
прототип CreateObj.prototype свойствами,
которые пригодятся в будущем рожденному
объекту child. А обратиться к этим свойствам у
CreateObj.prototype - сhild сможет через
[[Prototype]]

youtube channel
А у папы и мамы есть свои папа и мама … А у них
свои …
Построим генеалогическое древо нашей функции ?
Поищем Адама и Еву у CreateObj ?

youtube channel
Наверно, над многими из нас есть семья соседей
сверху: маркизы Де-Generator-s …
Не надо всматриваться и разбираться в
следующем рисунке! Он лишь для примера!
Показывает, почему их семья объектов не дают
нам, программистам, спать по ночам.
Рисунок скопирован из спецификации

youtube channel
… сейчас это уже детская забава, но именно в
тот момент чувствовалось, как нечто в нашем
сознании незримо поменялось …
Эксперимент

youtube channel
let child = new CreateObj();
function CreateObj() {
console.log("I am Mother");
this.age = 4;
};
CreateObj.prototype = {
xBox: true,
nerves: "Steel",
mind: "sharp",
heart: "brave"
};
функция
объект,
рожденный от функции
Эксперимент: исходные данные
прототип объекта
прототайп функции

youtube channel
Эксперимент: __proto__ работает

youtube channel
Эксперимент:
такого свойства, как “__proto__” , не существует

youtube channel
for in не смог помочь нам найти “__proto__”

youtube channel
Эксперимент: в конце концов свойство
“__proto__” мы находим у Object.prototype

youtube channel
Эксперимент: искушение – прибиваем “__proto__”

youtube channel
прототипа больше нет ни у кого,
JavaScript сломлен

youtube channel
но ECMAScript не сломан !

youtube channel
Эксперимент: итоги
Прототипная цепь работает. Свойство
__proto__ равно undefined, а JavaScript как
работал, так и продолжает работать.
Напакостив “светлой стороне силы”, мы ничего не
сможем сделать “темной”. Внутренняя
структура объектов EcmaScript и их взаимосвязи
не нарушены!

youtube channel
Эксперимент: итоги
Объект с точки зрения EcmaScript - это техническое
описание некой абстрактной сущности, которая:
- существует во взаимосвязи с другими объектами,
опираясь на ссылку [[Prototype]]
- обладает набором собственных внутренних
свойств и методов, обеспечивающими
предсказуемое поведение (behavior + invariants)
- состоит в JavaScript из свойств, каждое из которых
управляется дескриптором

youtube channel
Ну и в заключение
А нужно ли разбираться в ECMAScript? И без
него как-то жили, живем и будем жить …

youtube channel
Спасибо всем
внимание!
И помните об ECMAScript!
Истина где-то рядом …
V8

Объекты в ECMAScript | Odessa Frontend Meetup #16

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

Similaire à Объекты в ECMAScript | Odessa Frontend Meetup #16

Similaire à Объекты в ECMAScript | Odessa Frontend Meetup #16 (20)

Plus de OdessaFrontend

Plus de OdessaFrontend (20)

Объекты в ECMAScript | Odessa Frontend Meetup #16