VPF::Функции и методы в JS - Форум программистов

Sardar

Дата 18.2.2007, 20:40 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Материал находится тут: javascript: Методы. А в этой теме Вам предлагается его обсудить.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Sardar

Дата 19.2.2007, 04:12 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Ну раз такая тема создалась автоматом...

Вимание: далее рассматриваем метод с точки зрения реализации в JS, а не философию ООП.
Надеюсь это вам поможет делать меньше не свойственных/глупых для JS вещей.

Что такое метод в JS? Для этого нужно разобраться что такое функция, объект
и контекст выполнения функции.

Сразу поясним, что в JS функция это не, как обычно, некий блок кода, доступный по имени.
Функция это значение, такое же как строка или любой другой объект. На значение могут
ссылаться масса ссылок, которые вы и видите как переменные. Это должно быть уже знакомо
программистам на Java/C#/PHP/etc. Повторим: переменная это ссылка на значение.

Объект функции это фактически ссылка на скомпилированный код функции и на контекст, в
котором функция была определена. Созданный объект-функция помещается в переменную с "именем
функции", подчеркнём что эта переменная самая обычная переменная и её значение можно изменить на
что угодно.

Что же такое контекст? Это ключевой объект во всей этой истории, фактически это
пространство в котором находятся все переменные определённые в этом контексте. Контекст
ссылается на родительский контекст, в котором он был создан, именно по этому мы можем видеть
переменные определённые выше по контексту. Повторим: контекст содержит только переменные.

Контекстом обладают только функции. Внутри функции любой if/while/for/etc может
очерчивать любые блоки с фигурными скобками, всё равно все "определённые" в них переменные будут
видны по всей функции (только try/catch имеют "собственную" переменную). Переменные в контексте
создаются ключевым словом var. Фактически место под все переменные уже зарезервировано
при входе в функцию, так что вынос всех var в блоки "перед тем как они потребуются" не
даёт реально никаких оптимизаций. Что бы стало ясно, рассмотрим пример:

Код

function test(exp) {
    var a = "test";
    var b = 90;
    
    if(exp) { //что бы кто не подумал на какие оптимизации =)
        //мы сейчас не в "новом контексте", а всё в той же функции test
        a = "vingrad";
        b = 90;
        var b = 100;
        var c = 30;
        //потому все var "создают" переменные в контексте test
    }
    alert(a); //vingrad
    alert(b); //100
    alert(c); //30
    
    //здесь должно быть ясно, что это краткий синтаксис var cool = function() {...
    function cool() {
        //а сейчас мы в новом контексте, принадлежащим функции cool  (да, я помню что у функций нет имён, но как то же на них надо указывать ;-) )
        a = "JavaScript";
        alert(b); //undefined -- переменная b существует в этом контексте ещё до того,  как мы начали выполнение, помним про var, 
        //потому нет ошибки, но и значения тоже нет. помним что undefined это значение,  такое же как например null
        //null имеет особый смысл, это ссылка на объект, которая никуда не указывает
        //undefined это значение переменной, не имеющей пока "значения" вообще.
        b = 3;
        var b = 70;
        try { alert(non_existing_var); } //сейчас мы к этому подойдём
        catch(e) { alert(e); }
    }
    cool();
    alert(a); //JavaScript -- как видим из cool мы изменили а
    alert(b); //100 -- значение не изменилось
}

test(true);

В примере видим, что на момент входа в функцию все переменные определённые в контексте в любых
if'ах и других конструкциях уже существуют. Фактически контекст имеет фиксированный размер,
такой что бы вместить все переменные этого контекста, известный уже на этапе компиляции в
байткод/AST. При обращении к переменной контекст смотрит в своих переменных, если не нашёл, то
обращается к родительскому контексту. Так происходит до тех пор, пока не упрёмся в самый верхний
контекст (гипотетический метод run объекта window или global для настоящих ECMA-262). Далее
зависит от типа операции, если это get, то будет ошибка, которую мы успешно ловим в
try/catch. Если это set, то переменная с этим именем будет создана в самом верхнем
контексте*. Именно по этому я часто говорю, не забываем про var, иначе вы плодите
"глобальные" переменные.

* А можно ликовать по имени на этапе трансляции, а не искать по хешь-таблицам? Да так и
происходит, все обращения к переменным контекстов идут по прямым ссылкам, кроме тех что
определены в global. Ещё на этапе трансляции известно, какие переменные не найдены, но компилер
не будет ругаться, т.к. они могут "внезапно" появиться в global контексте. Впрочем это не верно
для кривого IE, судя по подсказкам к оптимизации, которые предлагает мелкософт.

Так, собрали мысли до кучи, попробуем по шагам выполнить код выше. Сначала трансляция скрипта в
байткод, получим:

Код

//функция это плоский кусок кода, вложений "функция в функцию" уже нет
[function: 0001 //test -- имён фактически нет, но мы будем их использовать
   [context(3)] //в этой функции определены 3 переменной: a, b и c
   ..... байткод ....
]

[function: 0002 //cool
   [context(1)] //собственно контекст содержит только b
   ... батйкод ...
]

Определим первую операцию над функциями - call(current_context):

создать контекст заданного размера, передать current_context (текущий контекст) как
родительский. Кстати на стеке создавать не удобно для JS, но можно если подойти креативно.
инициализировать все переменные в контексте значением undefined
выполнить байткод

Только самый верхний контекст создаётся браузером без родительского, он принадлежит самой
"внешней функции", в которой весь скрипт и выполняется.

Теперь определим операцию create_function_reference(current_context) - именно этой
операции соотвествует конструкция function()...:

создать объект "ссылка на функцию", инициализировать функцией 000х и текущим
контекстом current_context
положит (ссылку на) объект функцию в соответствующую переменную в контексте.

То есть ничем не отличается, например, от строки, которая создаёт ссылу на строку-константу.
Впрочем речь не об этом, внимательно смотрим, что вместе с ссылкой на функцию мы положили и
ссылку на текущий контекст. Теперь выполняя эту функцию мы выполняем её в сохранённом
контексте и "видим" те переменные. Примером будет ясно:

Код

<div id="text1">Some text...</div>
<div id="text2">Some other text...</div>
<script type="text/javascript">
function blink(obj) {
    var show = true;
    return function() { //возвращаем функцию (closure)
        //obj по прежнему видим, для каждого вызова blink он свой
        obj.style.visibility = (show = !show)? 'visible': 'hidden';
    }
}

//разные контексты blink, свой для каждого вызова ;-)
var functor1 = blink(document.getElementById("text1"));
var functor2 = blink(document.getElementById("text2"));

//переменная functorN содержит объект-функцию, также как *переменная* blink
window.setInterval(functor1, 400);
window.setInterval(functor2, 1000);
</script>

Кто не знаком с closure может быть сейчас немного удивлён. Да, это удобно, мощно,
встречается часто в скриптовых языках поновее, ну и естественно в функциональных (декларативных)
языках.Видим, что при вызове функции сохранённый вместе с ссылкой контекст определяет поведение
для каждого instance одной и той же функции. Собственно это и называется closure.
Повторим: все функции в JS это closure.

А где тут объекты и методы, мужики ?!
Да, увлеклись, вернёмся к нашим баранам. Мы знаем как вызывается функция и даже определили
гипотетическую операцию call для этого. Сразу скажу, этой операции в реальном JS нет, все
функции всегда вызываются как методы. Подчеркнём слово как методы, потому
как в привычном для Java/C#/C++ программиста, в JS методов нет. Есть вызов в контексте
объекта. Ну а объектом может быть что угодно smile

Многие привыкли, что метод это приватное свойство класса, где каждый объект этого класса имеет
доступ до этого метода и более никто. Доступ в смысле метод можно выполнить только на этом
объекте или на обьектов классов потомков. В JS метод это переменная/поле обьекта, в
которой лежит объект-функция. Отсюда будет ясно, почему два объекта, порождённые от одного
конструктора и следовательно instanceof constructor_function будет выдавать для них true,
могут иметь совершенно разный интерфейс. Это конечно особо извращённый случай, но можно.

Объект в JS это пустая хеш-таблица с ссылкой на протитип. Что такое прототип
поясним позже, сейчас выделим следующее:

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

К объекту внутри функции обращаемся через this. На ком функцию вызвали, на того
this и указывает. Только для global (в браузере window) можно опустить
указание объекта и вызвать "просто функцию". На самом деле мы её вызываем как метод global,
следовательно и this указывает на global. Пример, что бы осмыслить всё это:

Код

//внимание, приготовтесь думать немного более гибче, чем в Java/C++
//программисты Python/Ruby/Groovy велкам =)

//глобальная переменная, она же поле global.cool (в браузере window.cool)
//глобальный контекст единственный, где var это "ещё и поле объекта", потому как он сам
//и используется при вызове "простых функций"
var cool = "vingrad";

function test() {
    //this будет объектом test только при вызове с new
    //дабы не убить глобальную cool при простом вызове (помним, что this это глобал при простом вызове)
    //мы делаем вот такое условие
    if(this instanceof test) {
        this.cool = "created by test";
        this.method = bla;
    } else {
        //вообще что возвращаем из конструктора, то и будет результирующим объектом
        //у нас же при простом вызове нужно возвратить функцию, потому "с дефолтным возвратом" для конструктора
        return bla;
    }
    
    function bla() {
        //так на кого там this указывало...?
        alert(this.cool);
    }
}

//вызов в контексте global/window, по дефолту
test()(); //vingrad

//это литеральный объект, эквивалентно new Object(); b.cool=...
var b = {cool: "some value"};
test().apply(b); //вызываем в контексте нашего объекта, т.е. как его метод

//или "устанавливаем методом" и вызываем, конкретно механизма не меняет
b.method = test();
b.method();

//на чужих объектах пробовали, а на самой test нет =)
var c = new test();
//этот метод вкупе с полем cool мы *создали* в конструкторе
c.method();
//я надеюсь после всего этого чтива ясно почему так работает
c.other_method = c.method;
c.other_method();

Вроде всё так гармонично сложилось. Сейчас пойдём в детали и попытаемся угадать ту траву, что
курили нетскейповцы и ECMA'вцы, когда писали спецификацию JS.

В примере методом служила вложенная функция bla. Фактически не важно какая функция будет
использована, можно создавать целые коллекции функционала и "добавлять" его в нужные объекты.
Это немного по другому, чем привычное многим наследование по классам, программисты
Smalltalk и Objective-C сейчас сразу увидели своё родное. А если ещё и вспомнить
всё прочитанное 15 минут назад, то поймём, что все функци в JS это closure, значит и метод может
иметь свой собственный контекст откуда угодно. А это значит, что метод будет иметь свои
"приватные" поля, которые не обязательно определены в конструкторе объекта.

А есть ли способ объявить общие для всех объектов поля? Да, есть и имя ему
prototype. Любой объект имеет ссылку на функцию конструктор, которая и инициализировала
объект. Эта функция содержит поле .prototype, которое содержит пустой объект. Все поля
добавленные в прототип сразу видны и в контексте самого объекта. Пример:

Код

function test() {
    this.local_field = 90;
}
test.prototype.global_field = "cool";

var a = new test();
alert(a.local_field + ", " + a.global_field);

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

Код

function test() {
    this.local_field = 90;
}
test.prototype.global_field = "cool";

function bla() {
    this.bla_field = "wow!";
}
bla.prototype = new test();

var a = new bla();
//по смыслу унаследовали, в реале просто обращаемся к своему протипу, который в свою очередь  обращается к своему прототипу и т.д.
alert(a.bla_field + ", " + a.local_field + ", " + a.global_field)

Вот оно и наследование. Естественно любые изменения в прототипах bla или test тут
же будут видны во всех объектах, порождённых от bla (* маленькая оговорка чуть позже).
Например если создать String.prototype.my_action = function()..., то во всех строках
появится новый метод и можно сразу писать "строка".my_action().

В JS типы динамические, мало того, как мы видим объекты можно собрать с любым интерфейсом тут же
на лету. Но оператор <object> instanceof <function> есть, проверяет принадлежность
объекта к:

конструктору прототипа -- так можно иметь принадлежность к целой цепочке функций, от
прототипа к прототипу
к функции Object -- эту связь тоже нельзя изменить

Оператор возвращает true если функция является любым из перечисленных выше. Заметим, что
ссылка на прототип сохраняется в самом объекте. Это значит, что породив кучу обьектов,
затем сменив прототип и породив ещё кучу обьектов, мы увидим, что только вторая группа будет
иметь принадлежность к конструктору прототипа. Сменив прототип функции полностью оригинальный
объект мы теряем навсегда, достать даже из ранее созданных обьектов былой прототип нельзя.
Хотя эти объекты это прототип "видеть" будут. Также любой объект имеет специальное поле
.constructor, от которое указывает на функцию конструктор, т.е. можно создать новые
объекты не зная от какой функции этот объект. Впрочем всё гладко работает, пока мы полностью не
заменим прототип конструктора...
Это всё лучше понять на примере:

Код

//внимание! следующий код может хорошо промыть мозги
//лучше понять как оно фактически/физически работает, вместо попытки осмыслить "зачем"
//потому что не было никакого "зачем", все эти тонкости родились чисто как следствие реализации

function test() { //первый конкструктор
    this.local_field = 90; //собственное поле объекта
}
test.prototype.global_field = "cool"; //видимое/унаследованное поле

function bla() { //второй конструктор, никакой "родственной" связи
    this.bla_field = "wow!";
}

var t = new bla(); //этот объект создан до изменения прототипа, запомним поведение instanceof
alert(t instanceof bla); //true -- логично
alert(t instanceof t.constructor); //true -- тоже логично, помним что .constructor указывает на  bla
alert(t.constructor === bla); //true -- верно, помним что .constructor указывает на bla
alert(t instanceof test); //false -- верно, никаких связей с test пока не имеем

//мы *полностью* меняем прототип, оригинальный прототип утерян навсегда
bla.prototype = new test();

//этот объект ещё *унаследовал* функционал test
var a = new bla();

//проверяем
alert(t.bla_field + ", " + t.local_field + ", " + t.global_field); //wow!, undefined, undefined  -- верно, мы ничего не наследовали
alert(a.bla_field + ", " + a.local_field + ", " + a.global_field); //wow!, 90, cool

//заметим, что вроде как всё доступно, впрочем позже поймём что само поле .constructor уже не то  что было ;-)
alert(t.constructor.prototype.local_field); //90

//опа, а конструктор то уже не bla, а взят из прототипа от test, следовательно и конструктор  test
alert(a.constructor); //function test() {...
//а t со своим былым прототипом, указывающим на bla... да нет тот blа...
alert(t.constructor); //function bla() {...
alert(a.constructor == t.constructor); //false -- естественно

alert(a instanceof bla); //true -- принадлежность к настоящему конструктору убить нельзя
alert(a instanceof test); //true -- новая принадлежность по прототипу

//внимание, приготовтесь!!!
alert(t instanceof bla); //false -- а какого х.. спросите вы?  
alert(t instanceof t.constructor); //false -- [censored 2] , а что за bla тогда в .constructor лежит? =)
alert(t.constructor === bla); //true
alert(t instanceof test); //false -- связи по прежнему нет

alert(t instanceof Object); //true -- этот долбанный Object имеет ко всем принадлежность

//магия на прототипах, добавили новые поля
test.prototype.vingrad = "some value";
test.prototype.method = function() { alert(this.vingrad); }

var b = new test();
b.method(); //some value
a.method(); //some value -- видим все изменения прототипа
//t.method(); //будет ошибка, прототипа test естественно не видим

Из примера видим, что сменив прототип у функции конструктора, все созданные ранее объекты
объявляются как бы "не при делах" и вроде как уже не принадлежат своему конструктору. Мало того,
поле constructor они сохраняют, но раз функции родителю больше не принадлежат, значит и
собственному конструктору больше не принадлежат. Это не могло быть придумано специально, просто
не подумали и допустили полную смену прототипа.

Выводы:

все вызовы функций в JS это фактически вызов методов, потому в любом месте this доступно
все функции и методы это переменные/поля, содержащие объект-функцию
объявленные в контексте переменные должны работать быстрей, чем в объекте (через this)
создание объекта это создание пустой хеш-таблицы и последующая инициализация её через
конструктор
любую функцию можно вызвать как метод любого объекта

Домашнее задание: написать простейший интерпретатор JS, не оптимизирующий и можно эвалюирующий
AST.
Для продвинутых: реализовать вызов функции с созданием контекста на стеке smile

На "краткие" размышления ушло почти 4 часа, на этом заканчиваю. Потом может распишу мелочи, но
лучше просто задавайте вопросы кому это всё интересно и не ясно.

Добавлено @ 04:22
Млин, это ж обсуждение smile

Все согласные и не согласные с точкой зрения выше прошу отписаться. Если кто сумеет отформатировать с проверкой грамматики текст выше, то поместите пожалуйста на вики. У меня самого точно руки не сразу дойдут до этого.

--------------------

Cheba

Дата 19.2.2007, 14:49 (ссылка)

(нет голосов)

Загрузка ...

pointless one

Профиль
Группа: Vingrad developer
Сообщений: 1777
Регистрация: 27.11.2003
Где: /dev/null

Репутация: 1
Всего: 62

А почему это не оформленно в виде статьи в вики?

--------------------

Как правильно задавать вопросы

Sardar

Дата 19.2.2007, 15:10 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Потому что началось с двух строк, а затем меня понесло smile

Форма изложения не для статьи и сам контент нужно взвесить с дополнениями, вдруг чего упустил.

--------------------

Zeroglif

Дата 19.2.2007, 17:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66