Краткое описание особенностей Javascript.
Использован материал из http://anton.shevchuk.name/jquery-book/
Содержание
Переменные в Javascript
Объявление переменных
Объявляем переменную, используя ключевое слово var.
var name = "Ivan"; var age = 32;
Ограничения на имена переменных:
— имя должно состоять только из букв, цифр, и символов $ и _
— первый символ не должен быть цифрой.
Регистр букв имеет значение:
var company = "Facebook"; // совсем другая «компания» var Company = "Google";
Константы в Javascript
В JavaScript’е нет констант. Но есть договорённость: переменные, набранные в верхнем регистре через подчёркивание, не
изменять.
var USER_STATUS_ACTIVE = 1; var USER_STATUS_BANNED = 2;
Константы стоит использовать, чтобы избежать появления «magic numbers». Сравните:
if(satus==2) // о чём тут речь if(status==USER_STATUS_BANNED) // уже более информативный
Типы данных
В JavaScript не так уж и много типов данных.
number – целое или дробное число
var answer = 42; var pi = 3.1415;
Также существуют следующие специальные значения:
— NaN (not-a-number) – результат числовой операции, которая завершилась ошибкой. Например:
Math.sqrt(-5);
Учтите:
(NaN == NaN) == false; isNaN(NaN) == true;
Infinity – за гранью 1.7976931348623157E+10308 (т.е. больше)
-Infinity – за гранью -1.7976931348623157E+10308 (т.е. меньше)
string – строка
Строка в Javascript заключается в кавычки — одинарные или двойные:
var str = «Hello World!»;
boolean – булево значение (true или false)
var result = true;
null и undefined
null – специальное значение для определения «пустоты»
var result = null;
undefined – ещё одно специальное значение «неопределенности», используется как значение неопределённой переменной. Например — переменная объявлена и существует, но значение ей ещё не присвоено:
// переменная есть, но нет значения
var a;
alert(a); // undefined
if (typeof a == "undefined") {
alert("variable is undefined");
}
// или может совсем не быть переменной
if (window["a"] == undefined) {
alert("variable does not exist");
}
Массивы в Javascript
Массив – это коллекция данных с числовыми индексами. Данные могут быть любого типа.
Простой массив со строками:
var users = ["Ivan", "Petr", "Serg"]
Нумерация массивов начинается с «0». Для получения первого элемента вам потребуется следующий код:
alert(users[0]); // выведет Ivan
Размер массива хранится в свойстве length:
alert(users.length); // выведет 3
В действительности length возвращает индекс последнего элемента массива+1:
var a = []; a[4] = 10; alert(a.length); // выведет 5;
Для перебора массива лучше всего использовать цикл for(;;):
for (var i = 0; i < users.length; i++) {
alert(users[i]); // последовательно выведет Ivan, Petr и Serg
}
Для работы с концом массива следует использовать методы push() и pop():
users.push("Sidorov"); // добавляем элемент в конец массива
var sidorov = users.pop(); // удаляем и возращаем последний элемент
Для работы с началом массива следует использовать методы unshift() и shift():
users.unshift("Sidorov"); // добавляем элемент в начало массива
var sidorov = users.shift(); // удаляем и возращаем первый элемент
Методы shift и unshift работают медленно, т.к. перестраивают весь массив.
Функции
С функциями в JavaScript’е всё просто. Вот элементарный пример:
function hello() {
alert("Hello world");
}
hello(); // 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
Запись выше – это JSON – JavaScript Object Notation.
Для перебора такого хранилища можно использовать цикл for(.. in ..):
for (var prop in user) {
alert(prop + "=" + user[prop]); // выведет name=Ivan и age=32
}
Конструкторы в Javascript
Любая функция в Javascript, вызванная с использованием ключевого слова «new», возвращает нам объект, а сама становится конструктором данного объекта:
function User(name) {
this.name = name;
this.status = USER_STATUS_ACTIVE;
}
var me = new User("Anton");
При использовании «new» поведение функции User() слегка изменится, по сравнению с поведением обычной функции:
1. Данная конструкция создаст новый, пустой объект
2. Ключевое слово this получит ссылку на этот объект25
3. Функция выполнится и возможно изменит объект через this (как в примере выше)
4. Функция вернёт this (по умолчанию)
Результатом выполнения кода будет следующий объект:
me = { name: «Anton», status: 1 };
Область видимости и this
В отличии от других языков, JavaScript свойственны следующие нюансы:
— когда вы объявляете переменную или функцию, то она становится частью window:
var a = 1234;
console.log(window["a"]); // => 1234
function myLog(message) {
console.log(message);
}
window["myLog"](a); // => 1234
— когда искомая переменная не найдена в текущей области видимости, то её поиски будут продолжены в области видимости родительской функции:
var a = 1234;
(function(){
var b = 4321;
(function() {
var c = 1111;
console.log((a+b)/c); // => 5
})();
})();
— чудо-переменная this всегда указывает на текущий объект, вызывающий функцию (по-умолчанию все переменные и функции попадают в window, то this == window):
var a = 1234;
function myLog() {
console.log(this.a); // => 1234
}
— контекст this можно изменить используя функции bind, call, и apply. Всё что касается window относится лишь к браузерам.
Замыкания
Приведу пример кода с пояснениями:
var a = 1234;
var myFunc = function(){
var b = 4321;
var c = 1111;
return function() {
return ((a+b)/c);
};
};
var anotherFunc = myFunc();
// myFunc возвращает анонимную функцию
// с «замкнутыми» значениями c и b
console.log(anotherFunc()); // => 5
Функция, объявленная внутри другой функции, имеет доступ к
переменным родительской функции.
Рекомендуемые статьи по теме:
— «Функции «изнутри», замыкания»
[http://learn.javascript.ru/closures]
— «Использование замыканий»
[http://learn.javascript.ru/using-closures]
— «Closures: Front to Back»
[http://net.tutsplus.com/tutorials/javascript-ajax/closures-front-to-back/]
Русский