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

2.
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

3.
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

4.
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

5.
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

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

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

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

9.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Обычный объект
Экзотический объект

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

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

12.
youtube channel
InSimpleWordsОбъекты в ECMAScript
An object is a collection of properties and has a single
prototype object. The prototype may be the null value.

13.
youtube channel
InSimpleWordsОбъекты в ECMAScript
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.

14.
youtube channel
InSimpleWordsОбъекты в ECMAScript
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.

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

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

17.
youtube channel
InSimpleWordsОбъекты в ECMAScript
- По каким-то алгоритмам

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

19.
youtube channel
InSimpleWordsОбъекты в ECMAScript
IMPLICIT
EXPLICIT
ECMAScript
JavaScript
VS

20.
youtube channel
InSimpleWordsОбъекты в ECMAScript
IMPLICIT
EXPLICIT
ECMAScript
JavaScript
V8
Реализует
спецификацию,
например,
на С++

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

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

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

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

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

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

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

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

29.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Внутренние составляющие объекта (behaviour)
команда JavaScript
команда ECMAScript
вызывает алгоритм поведения

30.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Внутренние составляющие объекта (behaviour)
алгоритм поведения
изменяет
состояние объекта на требуемое

31.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Внутренние составляющие объекта (behaviour)
ммм, поведение
экзотического объекта
угадаете
какого
объекта ?

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

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

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

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

36.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Внутренние составляющие объекта (functions)
[[Environment]] – лексическое окружение, в
котором была создана функция. Используется
как внешнее лексическое окружение при
выполнении кода этой функции.
Ничего не напоминает?
Может …

37.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Внутренние составляющие объекта (functions)
Замыкание – механизм, который при вызове
функции устанавливает связь её собственного
лексического окружения с внешним лексическим
окружением, где эта функция была создана.
Область видимости – совокупность данных, с
которыми может работать выполняемый код
Давайте не путать с …

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

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

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

41.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Почему генератор может восстановить
исполнение кода на прерванной точке?

42.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Где хранятся коллбеки Promise.prototype.then() ?

43.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Магия исчезает тогда,
когда появляются знания!

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

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

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

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

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

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

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

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

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

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

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

55.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Эксперимент: __proto__ работает

56.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Эксперимент:
такого свойства, как “__proto__” , не существует

57.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Эксперимент:
for in не смог помочь нам найти “__proto__”

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

59.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Эксперимент: искушение – прибиваем “__proto__”

60.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Эксперимент:
прототипа больше нет ни у кого,
JavaScript сломлен

61.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Эксперимент:
но ECMAScript не сломан !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

77.
youtube channel
InSimpleWordsОбъекты в ECMAScript
Спасибо всем
внимание!
И помните об ECMAScript!
Истина где-то рядом …
V8