Pull to refresh

Разбираемся с prototype, __proto__, constructor и их цепочками в картинках

Reading time 2 min
Views 33K
Есть javascript код:
  1. var A = function () {};
  2. A.prototype.b = 100;
  3. var a = new A();
  4. A.prototype.c = 101;
  5. a.c = -100;
  6. A.prototype = {};
  7. A.prototype.b = 536;
  8. /* 1 */ console.log(a.__proto__.constructor.prototype.b === 536);
  9. var b = new A();
  10. /* 2 */ console.log(a.__proto__.__proto__.constructor === a.__proto__.constructor.prototype.constructor);
  11. /* 3 */ console.log(b instanceof A);
  12. /* 4 */ console.log(!(a instanceof Object));
Вопрос. Что возвратят выражения 1-4 и почему?

Затрудняетесь ответить?
Тогда вам стоит пройти под кат ;-) (Далее 600 Кб больших изображений)


Итак, я думаю многие заинтересованные данной темой читали мануалы и умные книги по javascript, да и не раз, но в голове никак не могут отложиться основы псевдо-ОО (т.е. Prototype-based) части языка. В этой статье вы не найдете сухих фактов и мануалов, после прочтения просмотра станет все просто и понятно.

Что за схемы?
Справа на схеме текущий выполненный код, слева состояние объектов. Черные стрелки — ссылки на объект. Подписи над стрелками — имя свойства по ссылке. Серые стрелки — свои неявные свойства — ссылки на свойства прототипа. Красными отмечены глобальные javascript объекты. Синими переменные. Зелеными локальные объекты. Все console.log'и возвращают true.

Все изображения кликабильны

Можно не листать, а скачать исходники (png + bmml): http://narod.ru/disk/400270001/javascript_prototype.zip.html

Слайд 1





Слайд 2





Слайд 3





Слайд 4





Слайд 5





Исходники (png + bmml): http://narod.ru/disk/400270001/javascript_prototype.zip.html
Исходник кода: pastebin.com/wBchEpxq

Надеюсь, моя статья была полезна для вас, а схемы понятны :)

PS Свойство __proto__ является устаревшим начиная с JavaScript 1.8.1 вместо него стоит использовать Object.getPrototypeOf(object), однако, как писал crash Крокфорд просит не использовать getPrototypeOf если что," если делаете все верно он вам не нужен"
Tags:
Hubs:
+41
Comments 51
Comments Comments 51

Articles