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

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

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

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

9. 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 Реализует спецификацию, например, на С++

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) Замыкание – механизм, который при вызове функции устанавливает связь её собственного лексического окружения с внешним лексическим окружением, где эта функция была создана. Область видимости – совокупность данных, с которыми может работать выполняемый код Давайте не путать с …

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 вариант: конструктор объект прототип Классический вариант: мама сын папа

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

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

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

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? И без него как-то жили, живем и будем жить …

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

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (19)

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

More from OdessaFrontend (20)

Recently uploaded (20)