- •Об авторе
- •О книге
- •Условия распространения
- •Оглавление
- •0% О HTML, CSS и JavaScript
- •Семантическая вёрстка
- •Валидный HTML
- •CSS-правила и селекторы
- •CSS. Погружение
- •О форматирование
- •Именование классов и идентификаторов
- •О цветах
- •Блочные и строчные элементы
- •О размерах блочных элементов
- •Плавающие элементы
- •Позиционирование
- •Разделяй и властвуй
- •Немного о JavaScript
- •О форматировании
- •Основы JavaScript
- •Переменные
- •Константы
- •Типы данных
- •Массивы
- •Функции
- •Анонимные функции
- •Объекты
- •Область видимости и чудо this
- •Замыкания
- •10% Подключаем, находим, готовим
- •Будь готов
- •Селекторы
- •Поиск по атрибутам
- •Поиск по дочерним элементам
- •Sizzle
- •Оптимизируем выборки
- •Примеры оптимизаций
- •20% Атрибуты элементов и CSS
- •30% События
- •Учимся рулить
- •Пространство имен
- •«Живые» события
- •Оптимизация
- •Touch события
- •40% Анимация
- •Step-by-step
- •В очередь…©
- •Отключение
- •50% Манипуляции с DOM
- •60% Работа с формами
- •70% AJAX
- •Обработчики AJAX событий
- •JSONP
- •Лечим JavaScript зависимость
- •Прокачиваем AJAX
- •Префильтры
- •Конверторы
- •Транспорт
- •80% Объект Deferred и побратимы
- •Callbacks
- •90% Пишем свой плагин
- •jQuery плагин
- •JavaScript и даже не jQuery
- •jQuery, но еще не плагин
- •Таки jQuery плагин
- •Работаем с коллекциями объектов
- •Публичные методы
- •О обработчиках событий
- •Data
- •События data
- •Animate
- •Easing
- •Sizzle
- •100% Последняя глава
- •Дополнение
- •jQuery-inlog
- •jQuery UI
- •Интерактивность
- •Виджеты
- •Утилиты
- •Эффекты
- •Темы
- •Пишем свой виджет
- •jQuery Tools
- •UI Tools
- •Form Tools
- •Toolbox
- •jQuery Mobile
- •Еще плагины
- •История изменений
- •Благодарности
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
}
25
—контекст 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 console.log(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/
26