Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0

Share

Download to read offline

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

Download to read offline

Обычно мы задаем объекты литерально, через пару фигурных скобок. С их помощью мы можем моделировать окружающую нас действительность и описывать её в коде. А чем лучше мы знаем этот инструмент, тем более удивительные вещи мы можем творить с его помощью. Барабанов Дмитрий рассматривает объект с точки зрения спецификации EcmaScript. Это дает новую информацию к размышлению: а почему те или иные вещи работают именно таким образом в JavaScript?

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

  1. 1. Объекты в ECMAScript youtube channel InSimpleWords
  2. 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. 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. 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. 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. 6. Объекты в ECMAScript youtube channel InSimpleWords
  7. 7. youtube channel InSimpleWordsОбъекты в ECMAScript
  8. 8. youtube channel InSimpleWordsОбъекты в ECMAScript
  9. 9. youtube channel InSimpleWordsОбъекты в ECMAScript Обычный объект Экзотический объект
  10. 10. youtube channel InSimpleWordsОбъекты в ECMAScript
  11. 11. youtube channel InSimpleWordsОбъекты в ECMAScript
  12. 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. 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. 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. 15. youtube channel InSimpleWordsОбъекты в ECMAScript - Implicit reference в ECMAScript ? - А что вообще из себя представляет ECMAScript ? - Кроме того, что там много текста и умных слов …
  16. 16. youtube channel InSimpleWordsОбъекты в ECMAScript - Описывает работу с какими-то данными (Reference, Lexical Environment … Record)
  17. 17. youtube channel InSimpleWordsОбъекты в ECMAScript - По каким-то алгоритмам
  18. 18. youtube channel InSimpleWordsОбъекты в ECMAScript - Похоже на JavaScript? - А может это и есть JavaScript? - EcmaScript - есть не что иное как набор утверждений и правил, на основе которых написаны / имплементированы движки JavaScript (SpiderMonkey, V8 …). - Разве это не одно и тоже? …
  19. 19. youtube channel InSimpleWordsОбъекты в ECMAScript IMPLICIT EXPLICIT ECMAScript JavaScript VS
  20. 20. youtube channel InSimpleWordsОбъекты в ECMAScript IMPLICIT EXPLICIT ECMAScript JavaScript V8 Реализует спецификацию, например, на С++
  21. 21. youtube channel InSimpleWordsОбъекты в ECMAScript
  22. 22. youtube channel InSimpleWordsОбъекты в ECMAScript [[Prototype]] - ссылка на прототип объекта, закодированная на уровне ECMAScript (C++) prototype - обычное свойство функции конструктора, управляемое из JavaScript, указывающее на объект, который будет устанавливаться новорожденным объектам от этой функции по ссылке [[Prototype]]
  23. 23. youtube channel InSimpleWordsОбъекты в ECMAScript __proto__ - ссылка на прототип объекта, доступная на уровне JavaScript, обнажающая средство управления прототипом объекта [[Prototype]] на уровне EcmaScript (C++) prototype chain (прототипная цепочка) - специальный термин, который обозначает связь JavaScript объектов между собой по ссылке [[Prototype]] на уровне EcmaScript (C++)
  24. 24. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (descriptors) { age : 31 } ключ + значение свойство, которое управляется дескриптором
  25. 25. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (descriptors) data property descriptor [[Value]] [[Writable]] [[Enumerable]] [[Configurable]] accessor property descriptor [[Get]] [[Set]] [[Enumerable]] [[Configurable]] generic property descriptor
  26. 26. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (behaviour) Поведение объекта (behaviour) - это набор его внутренних методов, которые реализуют суть объекта и приемы работы с ним. Внутренние методы описываются абстрактными алгоритмами, которые предписывают ожидаемый результат.
  27. 27. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (behaviour) по-человечески Поведение объекта (behaviour) – то, как мы можем использовать объект. Это список действий, которые объясняют / показывают, что должно происходить, например, при взятии значения свойства, или при его удалении ... , например
  28. 28. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (behaviour) [[GetPrototypeOf]]() - получить прототип [[PreventExtensions]]() - запретить “расширять” объект новыми свойствами [[DefineOwnProperty]](property, Descriptor) - установить собственное свойство объекта из заданного дескриптора … и другие
  29. 29. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (behaviour) команда JavaScript команда ECMAScript вызывает алгоритм поведения
  30. 30. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (behaviour) алгоритм поведения изменяет состояние объекта на требуемое
  31. 31. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (behaviour) ммм, поведение экзотического объекта угадаете какого объекта ?
  32. 32. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (invariants) Инварианты - это строгие правила, которым должны подчиняться все объекты: и обычные, и экзотические… Эти правила призваны исключить недопонимание или неоднозначность каких-то трактований. Запрещено обходить инварианты какой-то своей или сторонней реализацией. Иначе это приведет к непредсказуемому поведению кода.
  33. 33. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (invariants) - если свойство объекта заморожено через атрибут configurable === false, то удалить это свойство через метод [[Delete]] уже нельзя - если объект нерасширяем и у него уже есть прототип V, то любой вызов [[GetPrototypeOf]] будет всегда возвращать прототип V. Спасибо, КЭП А вот здесь уже сложнее
  34. 34. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта [[Prototype]] Descriptors Behaviour Invariants Хотите ещё?
  35. 35. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (functions) [[Call]] ( thisArgument, argumentsList) [[Construct]] ( argumentsList, newTarget) [[ECMAScriptCode]] – тело функции [[FormalParameters]] – параметры функции [[Strict]] – будет ли выполняться код функции в строгом режиме … и другие
  36. 36. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (functions) [[Environment]] – лексическое окружение, в котором была создана функция. Используется как внешнее лексическое окружение при выполнении кода этой функции. Ничего не напоминает? Может …
  37. 37. youtube channel InSimpleWordsОбъекты в ECMAScript Внутренние составляющие объекта (functions) Замыкание – механизм, который при вызове функции устанавливает связь её собственного лексического окружения с внешним лексическим окружением, где эта функция была создана. Область видимости – совокупность данных, с которыми может работать выполняемый код Давайте не путать с …
  38. 38. youtube channel InSimpleWordsОбъекты в ECMAScript
  39. 39. youtube channel InSimpleWordsОбъекты в ECMAScript
  40. 40. youtube channel InSimpleWordsОбъекты в ECMAScript Как “забинденная” функция сохраняет this и прикрепленные аргументы?
  41. 41. youtube channel InSimpleWordsОбъекты в ECMAScript Почему генератор может восстановить исполнение кода на прерванной точке?
  42. 42. youtube channel InSimpleWordsОбъекты в ECMAScript Где хранятся коллбеки Promise.prototype.then() ?
  43. 43. youtube channel InSimpleWordsОбъекты в ECMAScript Магия исчезает тогда, когда появляются знания!
  44. 44. youtube channel InSimpleWordsОбъекты в ECMAScript Семья – это важная первичная ячейка общества / ECMAScript, в которой люди / объекты связаны между собой определенными отношениями. ЕCMAScript вариант: конструктор объект прототип Классический вариант: мама сын папа
  45. 45. youtube channel InSimpleWordsОбъекты в ECMAScript
  46. 46. youtube channel InSimpleWordsОбъекты в ECMAScript
  47. 47. youtube channel InSimpleWordsОбъекты в ECMAScript Функция CreateObj настраивает “свой” объект- прототип CreateObj.prototype свойствами, которые пригодятся в будущем рожденному объекту child. А обратиться к этим свойствам у CreateObj.prototype - сhild сможет через [[Prototype]]
  48. 48. youtube channel InSimpleWordsОбъекты в ECMAScript А у папы и мамы есть свои папа и мама … А у них свои … Построим генеалогическое древо нашей функции ? Поищем Адама и Еву у CreateObj ?
  49. 49. youtube channel InSimpleWordsОбъекты в ECMAScript
  50. 50. youtube channel InSimpleWordsОбъекты в ECMAScript
  51. 51. youtube channel InSimpleWordsОбъекты в ECMAScript Наверно, над многими из нас есть семья соседей сверху: маркизы Де-Generator-s … Не надо всматриваться и разбираться в следующем рисунке! Он лишь для примера! Показывает, почему их семья объектов не дают нам, программистам, спать по ночам. Рисунок скопирован из спецификации
  52. 52. youtube channel InSimpleWordsОбъекты в ECMAScript
  53. 53. youtube channel InSimpleWordsОбъекты в ECMAScript … сейчас это уже детская забава, но именно в тот момент чувствовалось, как нечто в нашем сознании незримо поменялось … Эксперимент
  54. 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. 55. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: __proto__ работает
  56. 56. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: такого свойства, как “__proto__” , не существует
  57. 57. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: for in не смог помочь нам найти “__proto__”
  58. 58. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: в конце концов свойство “__proto__” мы находим у Object.prototype
  59. 59. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: искушение – прибиваем “__proto__”
  60. 60. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: прототипа больше нет ни у кого, JavaScript сломлен
  61. 61. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: но ECMAScript не сломан !
  62. 62. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: итоги Прототипная цепь работает. Свойство __proto__ равно undefined, а JavaScript как работал, так и продолжает работать. Напакостив “светлой стороне силы”, мы ничего не сможем сделать “темной”. Внутренняя структура объектов EcmaScript и их взаимосвязи не нарушены!
  63. 63. youtube channel InSimpleWordsОбъекты в ECMAScript Эксперимент: итоги Объект с точки зрения EcmaScript - это техническое описание некой абстрактной сущности, которая: - существует во взаимосвязи с другими объектами, опираясь на ссылку [[Prototype]] - обладает набором собственных внутренних свойств и методов, обеспечивающими предсказуемое поведение (behavior + invariants) - состоит в JavaScript из свойств, каждое из которых управляется дескриптором
  64. 64. youtube channel InSimpleWordsОбъекты в ECMAScript Ну и в заключение А нужно ли разбираться в ECMAScript? И без него как-то жили, живем и будем жить …
  65. 65. youtube channel InSimpleWordsОбъекты в ECMAScript
  66. 66. youtube channel InSimpleWordsОбъекты в ECMAScript
  67. 67. youtube channel InSimpleWordsОбъекты в ECMAScript
  68. 68. youtube channel InSimpleWordsОбъекты в ECMAScript
  69. 69. youtube channel InSimpleWordsОбъекты в ECMAScript
  70. 70. youtube channel InSimpleWordsОбъекты в ECMAScript
  71. 71. youtube channel InSimpleWordsОбъекты в ECMAScript
  72. 72. youtube channel InSimpleWordsОбъекты в ECMAScript
  73. 73. youtube channel InSimpleWordsОбъекты в ECMAScript
  74. 74. youtube channel InSimpleWordsОбъекты в ECMAScript
  75. 75. youtube channel InSimpleWordsОбъекты в ECMAScript
  76. 76. youtube channel InSimpleWordsОбъекты в ECMAScript
  77. 77. youtube channel InSimpleWordsОбъекты в ECMAScript Спасибо всем внимание! И помните об ECMAScript! Истина где-то рядом … V8

Обычно мы задаем объекты литерально, через пару фигурных скобок. С их помощью мы можем моделировать окружающую нас действительность и описывать её в коде. А чем лучше мы знаем этот инструмент, тем более удивительные вещи мы можем творить с его помощью. Барабанов Дмитрий рассматривает объект с точки зрения спецификации EcmaScript. Это дает новую информацию к размышлению: а почему те или иные вещи работают именно таким образом в JavaScript?

Views

Total views

140

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

11

Shares

0

Comments

0

Likes

0

×