Что такое {}.prototype?

Question

[platedz]

Часто вижу запись навроде… = {}.prototype =… А что это такое и как его можно использовать, не нашел. Подскажите пожалуйста?

Comments

[platedz]

Если быть более точным, то записи могут быть разные, например как здесь
developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice
Выражение навроде, {}.prototype, я написал обобщенно, т.е. это может быть к примеру Function.prototype.call
хотя вопрос возник после попытки создать прототип таким способом

function root(){}
root.prototype = { root :"свойство root" }
function user() {}
user = {}.prototype = root;
var u = new user();

При явном создании функций-конструкторов роль prototype мне кажется понятно, т.е. prototype является ссылкой на свойства родителя. А роль при использовании глобальных, и/или предопределенных объектов в мне не понятна

Буду признателен за пояснение, или более развернутую информацию, где описывается использование подобных синтаксисов

[Олег Торбасов]

Не могу понять, откуда у айтишников, образованных и культурных, по идее, людей, такая тяга к употреблению просторечных форм вроде «навроде». Зачем человеческий язык коверкать?

Answer 1

[Илья Лесных]

Не правильно. Во-первых, torbasow не прав, {}.prototype — не SyntaxError. Такая ошибка вызывается из-за того, что интерпритатор ставит после законченной конструкции {} точку с запятой и получается следующее:
{};.prototype что и выдает такой результат.

Если же написать так:
var o = {}; o.prototype;
то, как уже было замечено, это вернет нам undefined.

Далее, по поводу присваивания
user = {}.prototype = root
видимо вы не в курсе, что операция присваивания имеет приоритет справа налево, то есть сперва выполняется правый операнд, затем тот, что левее и так далее, пока дело не дойдет до самого левого. Пример:
var3 = 10; var var1 = var2 = (var3 + 1); console.log('1: '+var1); console.log('2: '+var2);
выведет

1: 11
2: 11

Comments

[platedz]

Спасибо, по поводу синтаксической ошибки понятно, а вот по поводу присваивания не очень. Т.е., если я правильно понимаю, получается, что user = root, потому что user = {}.prototype, а {}.prototype = root. Не ясно только, где этот {}.prototype?

А также не ясно почему здесь к примеру

function root(){}
root.prototype = { root :"свойство root" }
var admin = function(){}
admin = root;
admin.prototype.admin = "свойство admin";
var r = new root(); 
var a = new admin();

И r и a имеют свойства и root и admin
Т.е. получается что они оба имею общие свойства

[platedz]

Т.е. получается что admin — это только ссылка на root, и меняю я в данном случае всегда только root? Или как правильнее?

[Илья Лесных]

Советую почитать JavaScript Garden для большего понимания тонкостей JS.

Например раздел «Объекты и их свойства» ( shamansir.github.com/JavaScript-Garden/#object.general ) для понимания, почему происходит SyntaxError из примера выше.

Так же раздел «Автоматическая вставка точек с запятой» ( shamansir.github.com/JavaScript-Garden/#core.semicolon ) будет полезен.

Что касается второго вопроса, в JS есть сл. типы данных:

• number
• string
• boolean
• function
• array
• object
• regexp
• error
• date
• undefined
• null

Что касается undefined и null — то это изврашение именно JS и о них стоит говорить отдельно. Они оба обозначают ровно «ничего».
Есть так же типы, которые считаются примитивами — string, boolean и number. Примитивы потому, что они единственные, которые передаются по значению. Все остальное передается по ссылке. Соответственно в вашем примере да, объект admin это ссылка на объект root, поэтому у a и есть свойство root.

В тоже время в общем-то практически все в JS является объектом, т.к. у всех типов (кроме undefined и null) есть конструктор, при создании через который (с ключевым словом new) в переменной будет хранится не типизированное значение, а объект. Как-то так.

[qxfusion]

несогласен по поводу undefined и null
— undefined — свойство НЕ существует
— null — свойство существует но ничего не содержит (т.е. пустое)

Если быть точнее то string, boolean и number — это «нативные» примитивы

При создании через new будет создан особый гибридный объект — содержащий 2 прототипа (1) Object от new (2) нативный тип (если это string, boolean, number)

[platedz]

И еще, к теме не относится, но раз уж стал читать то возник вопрос что имело ввиду здесь
http://shamansir.github.com/JavaScript-Garden/#function.general
в самом низу Выражения с именованными фунциями

var foo = function bar() {
    bar(); // работает
}
bar(); // получим ReferenceError

При этом я получаю то, что ожидал

var local_rec = function rec(start,stop) 
		{ 
			if(start < stop) { alert("start: "+start+ "\n stop: "+stop); rec(start+1,stop); }
			
		}
rec(1,3);
local_rec(30,32);

[platedz]

Извиняюсь, наврал. Просто функция была rec(){...} была также объявлена ниже. Хотя в таком случае не очень понятна работа интерпретатора, почему он выполняет функцию которая объявлена ниже ее выполнения? Особенно учитывая тот факт, что он не может определить дом-элемент, если он объявлен ниже кода который его вызывает

те.е

document.getElementById("div") 

не найдет элемент с id=«div», если он выше

<div id="div"></div>

[Илья Лесных]

Такой вот он, интерпретатор. На самом деле есть 3 способа задания функции:
1) именованный (он же FunctionDeclaration)
function fname(args) { ... }
2) и 3) анонимный (FunctionExpression)
var fname = function(args) { … } // либо var fname = new Function(fbody, args)

Основное отличие как раз в том, как интерпретатор воспринимает такое объявление. Именованные функции интерпретатор видит до того, как идет последовательное выполнение кода, таким образом к ним можно обращаться и до их непосредственного объявления в коде. Анонимные же видны как обычные переменные — после их объявления, т.к. интерпретатор воспринимает их в живую.

Что же касается комментария qxfusion, не вижу принципиальной разницы с моим. Да, вы уточнили, но я с этим и не спорил :)

Если возвращаться к теме про типы: javascript.ru/basic/types

Answer 2

[Power]

{}.prototype, в общем случае, равно undefined и смысла в нём мало. (не путать с Object.prototype)
Покажите, где вы такое видели.

Answer 3

[Константин Китманов]

Это большая тема. Одно из лучших объяснений, имхо.

Answer 4

[platedz]

Честно говоря, я считал что, {}.prototype и Object.prototype, одно и тоже, как и Array.prototype и [].prototype. Буду признателен за пояснение.

Comments

[Олег Торбасов]

{}.prototype — SyntaxError
Object.prototype — Object {}
[].prototype — undefined
Array.prototype — []

[platedz]

Спасибо за ответ, но хотелось бы знать, как и какие из этих записей можно использовать, как применять и соответственно для чего?

[platedz]

Т.е. я так понял в моем коде {}.prototype роли как таковой не играет, т.е. я присвоил root сразу и user и {}.prototype, но учитывая, что {}.prototype синтаксическая ошибка, то вызвать я его не могу. С другой стороны не ясно, почему сама запись «user = {}.prototype = root», ошибки не вызвала?

[qxfusion]

{}.prototype поскольку {} воспринимается как блок кода — хотя не во всех движках так — это большая тема
[].prototype = undefined поскольку у созданного массива нету свойства конструктора прототипа

Array.prototype и т.д. — это система классов JavaScript основанная на прототипировании, к этому-же относится и __proto__ свойство у прототипированных объектов.

[platedz]

Так что же такое {}.prototype и [].prototype? И являются ли она Object.prototype и Array.prototype?

Answer 5

[Илья Севостьянов]

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

Отличный способ попрактиковаться — зарядившись свежей порцией знаний полученной из книг и примеров, засеть на каком ни будь форуме, того же javascript.ru, и следить за вопросами, пытаться найти на них ответ, причем воплотив его в работающий код с всеми возможными теоретическими пояснениями, так как туда люди идут как раз с «граблями» и «неочевидностями», «скилл» прокачивается очень хорошо, не редкость, что там таки и удается пощупать нечто реальное, с вполне себе понятным «юз кейсом».
Ну и собственно никто не отменял такой способ практики как «велосипедостроение», т.е. откажитесь от некоего готового решения и попробуйте реализовать необходимый от него функционал самостоятельно, а после взгляните на исходники готового решения и после разбирайтесь — почему у Вас не так :) (очень доставляет) например — попробуйте отказаться от jQuery для выполнения чего-то небольшого, но прогоните по всем браузерам, — экскурс по внутренней кухне браузеров Вам обеспечен, а с ним и много кода на JavaScript. Чувствуете неуверенность в понимании асинхронного стиля программирования — попробуйте поиграться с Node.JS — хапните асинхронности в самом чистом ее проявлении.
PS: Еще именно для практики — очень полезно писать тесты, опять же желательно без привлечения сторонних решений, уж поверьте мне код тестов очень редко бывает меньше кода самого приложения :), я обычно делаю так когда текущих задач связаных с JavaScript не стоит, а «нога» (в смысле мой JavaScript) уж больно затекла. Беру что ни будь старенькое и давай обкладывать тестами… (И кода напишу много, и глядишь найду проблемы какие, что-то перепишу). Вот.

Answer 6

[_ _]

Могу ошибаться, но судя по всему это глобальное определение прототипа для Object.
Т.е. впоследствии при создании любого объекта для него будут доступны методы, определенные через prototype.
Вы можете в любой момент добавить объекту метод. А через прототип вы добавляете его всем экземплярам Object сразу.

Answer 7

[platedz]

Большое спасибо за ответы.

Object -> Object.prototype
Function -> Function.prototype -> Object.prototype

Т.е. Object.prototype является своего рода родителем всех объектов (к которым в том числе относятся и функции), как предопределенных, так и нет. Сначала свойства и методы ищутся у самого объекта, а потом по порядку у всех его прототипов, в том числе пока не дойдут до Object.prototype.

Правильно я понимаю?

Предполагаю даже, что конструкторы создаются именно за счет того, что в Function.prototype содержатся все необходимые для этого методы и свойства. И если я прав, то было бы не лишним узнать какие именно.

Также здесь описано, что можно переопределить свойство Object.prototype. И насколько я понимаю, то же самое можно сделать и для свойств других предопределенных объектов. Не ясно только, как это все происходит, т.е. как мне назначить скажем новое свойство или метод, а самое главное, проверить и посмотреть (убедиться), что все получилось.

Comments

[Илья Лесных]

Да, вы правильно понимаете.

Переопределить можно, но крайне не рекомендуется. По крайней мере для встроенный объектов, типа Array. Для своих (аля создание абстрактного класса с последующим наследием — велком). Если все же интересно как — например в ECMA-262 появился метод forEach, который можно имплементировать при его отсутствии в ранних версиях примерно так:

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  }
}

и соответственно вызывать можно будет так:

[1,2,3].forEach(function(element, index, array) {
    console.log("a[" + index + "] = " + element);
});

Если что, примеры взять от сюда:
developer.mozilla.org/ru/docs/JavaScript/Reference/Global_Objects/Array/forEach

[platedz]

Огромное спасибо за ответ.
Например я создаю метод для Object.prototype

Object.prototype.forin = function(){var result = ""; for(i in this) {result += i + ": "+this[i] +"\n"} return result;}
var ob = {a:"a",b:"b"}
console.log(ob.forin());

Я могу увидеть этот метод если наберу в консоли Object.prototype
Могу ли я как-то по другому получить доступ к его свойствам и методам? Например

for(i in Object.prototype) document.write( i+ ": '" +  Object.prototype[i] + "', <br>");

Не получается.
Вопрос второй.
Как я могу посмотреть те же свойства и методы (пусть даже через консоль) у других предопределенных объектов, например Array.prototype и Function.prototype? Включая и предопределенные методы
Вопрос третий. Вышеуказанный метод, который я создал выводит не совсем то, что я хочу

a: a
b: b
forin: function (){var result = ""; for(i in this) {result += i + ": "+this[i] +"\n"} return result;}

а мне нужно получить только
a: a
b: b
Как этого добиться?

[Илья Лесных]

А мне нужно получить только… Как этого добиться?

Использованием метода hasOwnProperty()

По поводу изменения Object.prototype / Array.prototype / Function.prototype — повторюсь, лучше этого не делать. Лучше создать абстрактный объект, скажем Iterator в нем нужные методы и свойства, и от него уже наследоваться. Иначе вы загромождаете ВСЕ объекты свойством, которое нужно только одному-двум.

[platedz]

Спасибо за ответ. По поводу изменения глобальных объектов я понимаю, что лучше не делать, но на данный момент моей целью является разобраться. Поэтому меня и интересует как их вызвать напрямую и что они из себя представляют. Попробовать их изменить

Также я не понял что такое
Object.prototype.constructor.__proto__.apply
и почему
Function.prototype.apply === Object.prototype.constructor.__proto__.apply
??

[Илья Лесных]

В общем и целом я бы сказал, что зачем вам такие извращенские конструкции, по крайней мере на ранней стадии знакомства с языком. Думаю в мире очень мало людей, которые без шпаргалок и интернета могут сходу ночью 100% верно ответить на вопрос что значит такая конструкция монструозного вида. Да потому что оно и не нужно в основном. Если же начать разбираться, более менее среднего опыта должно хватить, чтобы самому разобраться.

Если все же любопытно, советую почитать вот это:
javascript.ru/tutorial/object/inheritance#svoystvo-prototype-i-prototip

[platedz]

Большое спасибо за ответы. Честно говоря читал, но думаю, что не помешает еще раз, тем более как раз обратил внимание на использование и объяснение функции constructor.
В целом единственным вопросом для меня осталось как получить «в явном виде» доступ к таким объектам как Array, Function, т.е. я могу посмотреть, что в Object.prototype просто набрав в консоли Object.prototype, также к примеру со String и Number, а вот с Function и Array не выходит. Может есть другие способы перебрать все их методы и свойства?

[Илья Лесных]

Оно?

console.dir(Array.prototype);
console.dir(Function.prototype);

[platedz]

Да. Спасибо огромное. Теперь точно вопросов больше нет, по крайней мере пока

Answer 8

[platedz]

А также не ясно, что если мне нужно установить не ссылку на объект, а просто скопировать объект, а затем дополнить ее новыми свойствами, т.е. если я хочу чтобы admin, получил свойства и методы root. Но при этом дальнейшее изменении свойств и методов или добавление их не влияло на root. А также изменения свойств root, не влияла на свойства объекта admin.

Comments

[Илья Севостьянов]

Вам батенька, надо взять необходимую литературу по основам JavaScript, как вам уже и советовали выше, Из нее вы почерпнете все ответы на возникающие у Вас вопросы, т.к. то что Вас интересует от вопроса к вопросу — в простонародии называют «мат.часть».
Если Вы хотите изучить JavaScript на должном уровне, и при этом ранее имели дело с программированием на других высокоуровневых языках, например Pyton или Ruby, то Вам необходимо отказаться от предрассудков 100%-ной переносимости базовых понятий программирования, JavaScript очень своеобразный язык со своими достоинствами и недостатками, зачастую не очевидными приемами, основное на что Вам следует обратить внимание это:
1) Особая объектная модель, в JavaScript нет ООП в каноническом его представлений, зато присутствует своя своеобразная прототипная модель наследования.
2) Особой устройство «кучи»(scope), области видимости переменных, чем обусловлено такой интересный прием как «Замыкания».
3) Ключевое слово «this»
4) Функциональное программирование — так же представлено не в каноническом смысле, и все-же Функция ЭТО ОБЪЕКТ
В Рунете существует замечательный ресурс посвященный JavaScript (http://javascript.ru/)
там очень много «разжеванного» материала.
PS: JavaScript в настоящее время используется повсеместно как встраиваемый язык, потому следует так-же учитывать особенности интерпритатора/окружения, хотя он так-же представлен такими технологияит как Node.JS где выполняет роль базового языка, существует множество его диалектов со своими особенностями, тот-же ActionScript, QtQuick, JScript (Windows Scripting Host)… Вот.

[Илья Лесных]

Объекты передаются по ссылке, всегда. Процесс копирования объектов (т.е. фактически передача его по значению) можно достичь с помощью операции, которую принято называть клонированием. И тут есть ряд решений.

1) jQuery.extend()
2) Имплементация своей функции аля oClone() — ее смысл дико простой, пробегаем в цикле for in по клонируемому объекту и записываем каждое свойство в новый объект. Если свойство является объектом (цепочка прототипного наследования), то вызываем саму себя рекурсивно.
3) Наиболее изящный вариант, который играет именно на том, что нативный примитив строка передается именно по значению, а объект можно привести к строке и обратно. Пользуемся этим так:

x = {...}
y = JSON.parse(JSON.stringify(x))

[platedz]

Спасибо большое.
Литературу я читаю, и все, что мне посоветовали по ссылке уже практически дочитал, посмотрел попробовал. Многое узнал, но за последнее время много информации уже получил, весь новый год за чтением провел, уже хотелось бы как-то на практике все это закрепить, чтобы не забылось, но пробелы в знаниях не позволяют реализовать задуманное.