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

Есть 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 если что," если делаете все верно он вам не нужен"