Опубликован: 28.02.2016 | Доступ: свободный | Студентов: 1888 / 174 | Длительность: 11:48:00
Лекция 1:

О HTML, CSS и JavaScript

Лекция 1: 12345 || Лекция 2 >
Функции

С функциями в 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" слегка изменится:

  1. Данная конструкция создаст новый, пустой объект
  2. Ключевое слово "this" получит ссылку на этот объект
  3. Функция выполнится и возможно изменит объект через "this" (как в примере выше)
  4. Функция вернёт "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

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

Рекомендуемые статьи по теме:

Вводная по JavaScript затянулась, лучше почитайте: http://learn.javascript.ru/

Лекция 1: 12345 || Лекция 2 >
Наталья Маркова
Наталья Маркова
Ярослав Гаевой
Ярослав Гаевой

10 марта 2016 c 20:13 до 22:39 я сдавал экзамен. Однако, за два месяца статус не изменился: "Задание не проверено"

Когда ожидать проверки?