Quadratoff 27 мар 2012 в 22:32

Prototype, proto и оператор new

3 мин

84K

Веб-разработка * JavaScript *

Туториал

+52

Комментарии 44

Quadratoff 27 мар 2012 в 22:34

Это моя первая статья на хабре

TheShock 28 мар 2012 в 18:57

Кстати, для желающих реально разобраться в теме — очень рекомендую почитать ветку комментов от dsCode:
habrahabr.ru/post/111393/#comment_3555912

Начиная с «В ECMAScript нет (пока) сахара для классов».
Очень классно и познавательно. Там можно и разобраться, что такое __proto__, prototype и new на нормальных, понятных примерах.

Alex_At_Net 27 мар 2012 в 23:14

В консоли Хрома:

> function Test(){} var q=new Test(); console.log(q.constructor.prototype===q.__proto__);

true

т.е. __proto__ равно constructor.prototype?

friday 27 мар 2012 в 23:31

Да.

mayorovp 28 мар 2012 в 03:28

Только для объектов, созданных «простыми» конструкторами.

> function Test() {} Test.prototype = {}; var q = new Test(); console.log(q.constructor.prototype===q.__proto__);

false

НЛО прилетело и опубликовало эту надпись здесь

lifestar 27 мар 2012 в 23:46

А как это на практике можно использовать?

Quadratoff 28 мар 2012 в 00:12

Вы про __proto__?
Ну например если в переопределенном методе какого либо класса вам нужно вызвать этод же метод родительского, тогда можете сделать так:
Object.getPrototypeOf(this).myMethod.apply(this, arguments);

mayorovp 28 мар 2012 в 03:32

Неверно. Данный подход зациклится при использовании сложных иерархий (начиная с трех уровней) — можете проверить.

Пусть иерархия выглядит так:

var a = {};
var b = Object.create(a);
var c = Object.create(b);

a.name = «a»;
b.name = «b»;
c.name = «c»;

b.some_func = function() { console.log(Object.getPrototypeOf(this).name); }
c.some_func(); // выведет b, т.е. нам не удалось получить a как прототип this

m_z 28 мар 2012 в 03:39

так все же верно,c inherits b inherits a, вызов c::parent вернет b, вызов c::parent::parent вернет 'a'.

mayorovp 28 мар 2012 в 03:44

Хорошо, вот другой пример.

var a = {};
var b = Object.create(a);
var c = Object.create(b);

a.some_func = function() { console.log(«a»); }
b.some_func = function() { console.log(«b»); Object.getPrototypeOf(this).some_func.apply(this, arguments); }
c.some_func = function() { console.log(«c»); Object.getPrototypeOf(this).some_func.apply(this, arguments); }

a.some_func(); //a
b.some_func(); //b a
c.some_func(); //c b b b b…

Это я к чему? Да к тому, что конструкция Object.getPrototypeOf(this).myMethod.apply(this, arguments); делает нечто, совершенно отличающиеся от вызова родительского метода.

m_z 28 мар 2012 в 06:23

Угу, получается надо юзать Object.getPrototypeOf(this).some_func.apply(Object.getPrototypeOf(this), arguments);?

mayorovp 28 мар 2012 в 06:30

Для метода, не меняющего состояние объекта — пойдет.

Если метод меняет состояние, то первым аргументом apply может быть только this.

Для решения данной проблемы надо вспомнить, что вообще-то мы знаем, от какого объекта унаследовались. То есть правильный вариант таков:

var a = {};
var b = Object.create(a);
var c = Object.create(b);

a.some_func = function() { console.log(«a»); }
b.some_func = function() { console.log(«b»); a.some_func.apply(this, arguments); }
c.some_func = function() { console.log(«c»); b.some_func.apply(this, arguments); }

a.some_func(); //a
b.some_func(); //b a
c.some_func(); //c b a

На случай неизвестной заранее иерархии или для дополнительной защиты, можно накрутить что-нибудь с замыканиями.
Но Object.getPrototypeOf(this) использовать для подобной цели нельзя.

Gaen 28 мар 2012 в 03:31

>поиск происходит в другом объекте, свойстве __proto__
>оно [свойство prototype] по умолчанию является объектом

Такие формулировки вводят в заблуждение. Свойство __proto__ не содержит никаких объектов, оно содержит ссылку на объект. Это важно.

>поиск происходит в другом объекте, на который ссылается свойство __proto__
>оно [свойство prototype] по умолчанию ссылается на объект

taliban 28 мар 2012 в 08:08

В JS Вообще все переменные содержат ссылку, кроме простых, так что в данном случае это не важно.

Seldon 28 мар 2012 в 05:21

Мне вот только одно не понятно, почему вы не поискали подобные темы на хабре, имхо уже топиков 20 обсудало эту тему.
habrahabr.ru/post/108915/
habrahabr.ru/post/133034/
habrahabr.ru/post/120193/

И таких тем еще куча, тема очередной дубль своими словами о том что уже давно написали, разжевали.

taliban 28 мар 2012 в 08:09

Да ладно Вам, никто из читающих не будет искать, а так хоть узнаю что-то новое.

Seldon 28 мар 2012 в 08:22

Если бы новое — ладно, но как сказал TheShock тему обсосали 200 раз, в свое время на хабре на эту тему по 1 посту в день писали. А так такую статью уже каждый написать может открываешь гугл ищешь готовую статью копируешь, меняешь пару предложение — все.

Quadratoff 28 мар 2012 в 11:16

Искал. Но так и не нашел простого и понятного объяснения свойства __proto__.

Вы хотите сказать что статья эта никому не нужна, и лучше бы ее не было?
Однако уже больше сотни человек добавили ее в избранное.

TheShock 28 мар 2012 в 11:27

Но так и не нашел простого и понятного объяснения свойства __proto__.

Вы мне напомнили этот комикс:

TheShock 28 мар 2012 в 11:28

Русская версия, на всяк случай:

Quadratoff 28 мар 2012 в 11:35

я же не стандарт предлагаю, а просто хочу помочь некоторым людям разобраться в javascript

TheShock 28 мар 2012 в 11:39

Расшифрую)
— Ситуация: есть 14 разных топиков, объясняющих __proto__ просто и понятно
— 14?! Долбануться! Нужно написать один универсальный топик, объясняющий __proto__ реально просто и понятно
— Ситуация: есть 15 разных топиков, объясняющих __proto__ просто и понятно

Quadratoff 28 мар 2012 в 11:43

ну и в чем зло 15го топика?

TheShock 28 мар 2012 в 11:46

Та ни в чём. Он просто не нужен)

Quadratoff 28 мар 2012 в 11:49

Вам уже не нужен (т.к. вы уже полностью разобрались в теме), а кому-то еще нужен

Quadratoff 28 мар 2012 в 11:49

Мне кажется чем больше литературы по определенной теме, тем лучше — есть выбор.

TheShock 28 мар 2012 в 12:07

С другой стороны — осложняется поиск)

НЛО прилетело и опубликовало эту надпись здесь

TheShock 28 мар 2012 в 17:02

Просто реально — есть столько не раскрытых или плохо раскрытых тем. Лучше эту энергию затратить на что-то полезное, а не на очередной клон той же статьи.

jMas 26 окт 2013 в 11:53

Без определенного фундамента — сложно раскрыть более сложные темы.

TheShock 27 окт 2013 в 13:23

О чём вы говорите? Этим фундаментом уже заложено всё, что можно. Давным давно пора строить дом, а не продолжать в десятый раз ложить фундамент того же размера, но под другим углом.

termi 28 мар 2012 в 06:49

Если рекомендуете для старых браузеров эмулировать функции `Object.create` и `Object.getPrototypeOf`, то, лучше уж, давайте ссылку на
github.com/kriskowal/es5-shim — тут эти методы описаны максимально по стандарту и учитывают очень много разных нюансов.
Например: функция `Object.create` задаёт свойство `__proto__` у созданного объекта, а в функция `Object.getPrototypeOf` несколько универсальные приведённого вами кода:

Object.getPrototypeOf = function getPrototypeOf(object) {
        return object.__proto__ || (
            object.constructor
                ? object.constructor.prototype
                : prototypeOfObject
        );
    };

Quadratoff 28 мар 2012 в 10:15

ок. спасибо за ссылочку, не знал раньше про эту библиотеку

mr_idiot 28 мар 2012 в 07:09

Как корректно поменять __proto__ объекта, чтобы превратить его в массив (серверный JS)? Такой код работает:
a.__proto__=Array.prototype
Но вы говорите, что использовать его некорректно. Есть ли какой-нибудь корректный способ без копирования элементов массива?

azproduction 28 мар 2012 в 07:53

var MyArray = function () {};
MyArray.prototype = new Array();
var a = new MyArray();

// same as
// var a = {};
// a.__proto__=Array.prototype

a.push(42);
console.log(a.length); // 1

Если просто копировать аттрибуты прототипа массивы, то сломается length

lxyd 28 мар 2012 в 08:43

А разве не надо ещё и конструктор прототипу прописать?
MyArray.prototype.constructor = MyArray;
А то получится, что конструктор у нас будет системным массивом, а не нашей функцией.

azproduction 28 мар 2012 в 14:35

Если будет использоваться в instanceof — пишите. Лучше не изобретать свой массив (не наследовать), а написать обертку над существующим (см комент ниже).

TheShock 28 мар 2012 в 09:08

Основная проблема такого подхода вот в чём:

var MyArray = function () {};
MyArray.prototype = new Array();
var a = new MyArray();
a[1] = 123;
a.length; // 0

azproduction 28 мар 2012 в 14:33

Угу, так же как и с a.__proto__=Array.prototype

mr_idiot 28 мар 2012 в 18:50

Таким образом, вы сделали массив из пустого объекта. А если имеется объект типа {0:'x', 1:'y'}, то его можно превратить в «почти-массив» таким кодом:

obj.__proto__ = Array.prototype;

obj.length = <длина массива>; // Допустим, в нашей задаче она известна

И такой подход точно работает (неправильно отрабатывает конструкция типа for (var i in obj), но ее можно заменить методами forEach и т. д.
Есть ли способ проделать то же самое, не трогая свойство __proto__?

TheShock 28 мар 2012 в 19:02

Эта конструкция всегда неправильно работает: for (var i in obj).
То, что вы хотите — можно сделать так:

var obj = {0:'x', 1:'y'};
obj.length = 2;
console.log( [].slice.call(obj) ); // ['x', 'y' ]

Но если вас интересует теоретическая возможность, то я думаю, что кроссбраузерно и стандартно — это врядли реально.

mr_idiot 28 мар 2012 в 19:08

Метод slice копирует элементы массива и создает новый массив. Соответственно, тратятся ресурсы на ненужную операцию.
А кроссбраузерность не нужна — речь шла о серверном JS. На клиенте можно было бы, например, воспользоваться методом jQuery.makeArray (который работает примерно так же, как предложенный вами вариант).
Вообщем, пока я решил проблему хаком указанным выше, правильного варианта, по-видимому, не существует.

TheShock 28 мар 2012 в 07:10

Поставил плюс, но, пожалуйста, в следующий раз выбирайте тему, не обсосаную 200 раз.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий