О HTML, CSS и JavaScript
Функции
С функциями в JavaScript'е всё просто, вот вам элементарный пример:
function hello() { alert("Hello world"); }
Просто, пока не заговорить об анонимных функциях…
Анонимные функции
В JavaScript можно создавать анонимную функцию (т.е. функцию без имени), для этого достаточно слегка изменить предыдущую конструкцию:
function() { alert("Hello world"); }
Так как функция это вполне себе объект, то её можно присвоить переменной, и (или) передать в качестве параметра в другую функцию:
var myAlert = function(name) { alert("Hello " + name); } function helloMike(myFunc) { // тут функция передаётся как параметр myFunc("Mike"); } helloMike(myAlert);
Анонимную функцию можно создать и тут же вызвать с необходимыми параметрами:
(function(name) { alert("Hello " + name); })("Mike");
Это не сложно, скоро вы к ним привыкните, и вам их будет недоставать в других языках.
Объекты
На объекты в JavaScript возложено две роли:
- хранилище данных
- функционал объекта
Первое предназначение можно описать следующим кодом:
var user = { name: "Ivan", age: 32 }; alert(user.name); // Ivan alert(user.age); // 32
Это фактически реализация key-value хранилища, или хэша, или ассоциативного массива, или …, ну вы поняли, названий много, но в JavaScript'е это объект, и запись выше – это JSON – JavaScript Object Notation (хоть и с небольшими оговорками).
Для перебора такого хранилища можно использовать цикл "for(.. in ..)":
for (var prop in user) { alert(prop + "=" + user[prop]); // выведет name=Ivan // затем age=32 }
С объектами, конструкторами и т.д. в JavaScript посложнее будет, хотя для понимания не так уж и много надо, запоминайте: любая функция вызванная с использованием ключевого слова "new" возвращает нам объект, а сама становится конструктором данного объекта:
function User(name) { this.name = name; this.status = USER_STATUS_ACTIVE; } var me = new User("Anton");
Поведение функции "User()" при использовании "new" слегка изменится:
- Данная конструкция создаст новый, пустой объект
- Ключевое слово "this" получит ссылку на этот объект
- Функция выполнится и возможно изменит объект через "this" (как в примере выше)
- Функция вернёт "this" (по умолчанию)
Результатом выполнения кода будет следующий объект:
me = { name: "Anton", status: 1 };
Область видимости и чудо this
Для тех, кто только начинает своё знакомство с JavaScript я расскажу следующие нюансы:
- когда вы объявляете переменную или функцию, то она становится частью "window":
var a = 1234; alert(window["a"]); // => 1234 function myLog(message) { alert(message); // => 1234 } window["myLog"](a);
- когда искомая переменная не найдена в текущей области видимости, то её поиски будут продолжены в области видимости родительской функции:
var a = 1234; (function(){ var b = 4321; (function() { var c = 1111; alert((a+b)/c); // => 5 })(); })();
- чудо-переменная "this" всегда указывает на текущий объект вызывающий функцию (поскольку по умолчанию все переменные и функции попадают в "window", то "this == window"):
var a = 1234; function myLog() { alert(this); // => window alert(this.a); // => 1234 }
- контекст "this" можно изменить используя функции "bind()", "call()", и "apply()"
Всё что касается "window" относится лишь к браузерам, но поскольку книга о jQuery, то иное поведение я и не рассматриваю, но вот так прозрачно намекаю, что оно есть ;)
Замыкания
Изучив замыкания, можно понять много магии в JavaScript’e. Приведу пример кода с пояснениями:
var a = 1234; var myFunc = function(){ var b = 4321; var c = 1111; return function() { return ((a+b)/c); }; }; var anotherFunc = myFunc(); // myFunc возвращает анонимную функцию // с "замкнутыми" значениями c и b alert(anotherFunc()); // => 5
Что же тут происходит: функция, объявленная внутри другой функции, имеет доступ к переменным родительской функции. Повтыкайте в код, пока вас не осенит, о чём я тут толкую.
Рекомендуемые статьи по теме:
- "Функции "изнутри", замыкания" [http://learn.javascript.ru/closures]
- "Использование замыканий" [http://learn.javascript.ru/closures-usage]
- "Closures: Front to Back" [http://net.tutsplus.com/tutorials/javascript-ajax/closures-front-to-back/]
Вводная по JavaScript затянулась, лучше почитайте: http://learn.javascript.ru/