Понимание области видимости в программировании является ключом к пониманию, как ваши переменные взаимодействуют с остальной код.В некоторых языках, это может быть довольно простым, но JavaScript’ S анонимные функции и функции обработки событий, вместе с парой маленьких причуд, означает, что сфера обращения в приложениях может стать frustrating.

Эта статья обсуждает, как наличие ручки масштаба и, как различные наличие библиотеки предоставляют методы борьбы с ним, и как они сглаживают несколько ударов.We’ будем также смотреть на то, как вы можете вернуться к истокам и сделать некоторые интересные сферы пререканий без библиотека, полезные подход, если you’ пишете код, который должен стоять alone.

Вы Here

Так что же такое “ scope”?Мы могли бы сказать, что он относится к вашему текущему местоположению.Если вы используете некоторые JavaScript like…

var iAmGlobal = 5 * 5;

… то you’ работаете в глобальной области видимости, большой широкий мир, где вы can’ T идти дальше.За то, like…

function doSomething() {
	var inner = 5 * 5;
};

… you’ Re сейчас зажаты в этой функции, работает в сферу его действия.Фраза “ коробках in” уместно, посмотрите на этот код:

var g = "global";
function go() { 
	var l = "local";
}
go();
alert(l); // throws a reference error

You’ увидите, что, когда мы бежим go функции, l переменных, содержащихся в этом function’ сферы с.Она не может быть доступен с более высоким уровнем scope.

Как это Works

Как видимости переменной, JavaScript использует this ключевое слово, чтобы получить ссылку на текущий контекст выполнения.Это довольно страшно термина сводится этом: в любой момент в коде JavaScript, Вы можете спросить “ Help!Где я ” и вернуть ссылку на объект.Эта ссылка для текущего контекста, объект, который “ owns” выполняемой в данный момент code.

Теперь, вы могли бы подумать, учитывая то, что we’ ве только что узнал о размахе, владелец текущего кода будет область, в которой он выполняется.В конце концов, в наличие, даже функции являются объектами и могут быть переданы в переменные.Но нет.Возьмите эту функцию, например:

function go() { console.debug(this); }
go();

Это дает вам ссылку на высшем уровне контекста выполнения, в браузере, that’ S окне браузера itself.

Есть несколько исключений из этого.Например, если мы создаем объект JavaScript, а затем вызвать его метод, то сфера привязан к объекту:

var myObject = {	
	go: function() {
		console.debug(this);
	}	
};
myObject.go(); // console.debugs a reference to myObject

Кроме того, при использовании функции конструктора, вы видите то же поведение:

function MyClass() {
	this.go = function() {
		console.debug(this);
	}
}

var instance1 = new MyClass();
var instance2 = new MyClass();

instance1.go(); // console.debugs a reference to the MyClass instance1
instance2.go(); // console.debugs a reference to the MyClass instance2

Тем не менее, обратите внимание, что в этом случае речь идет отдельный экземпляр объекта, а не определение класса, который контрастирует с предыдущим объектом буквальный пример, в котором мы всегда получите ссылку на тот же object.

С обработчиков событий, все становится немного болеесбивает с толку.Если вы укажете встроенный обработчик события в HTML, то вы в конечном итоге с ней ссылки на глобальный объект окна.Однако, если вы используете JavaScript для подключения Вашего мероприятия, то вы получите ссылку на объект DOM, что поднял его, например, обработчик нажатия на кнопку будет иметь кнопку элемента, как reference.

Обработчики событий являются общей ситуации, в которой вы хотели бы связать функции на другую сферу, многие библиотеки JavaScript обеспечивают функции, которые помогут сделать именно это.Let’ посмотрим на некоторые общие options.

Libraries

Многие разработчики используют JavaScript библиотеки, чтобы избежать необходимости иметь дело с браузером несоответствий и воспользоваться многими ярлыки, которые они предлагают.Сфера обращения является то, что большинство библиотек протянуть руку, так let’ посмотрим на то, что некоторые из крупных игроков offer.

Prototype

Прототип оснащен связывают метод, который позволяет разработчику указать связанный контекст для function.

var products = ['Shoes', 'Sweater', 'Jeans', 'Wig'];

function showCount() {
	for(var i = 0; i < number; i++) {
		document.body.innerHTML += this[i] + '. ';
	}
}

var fn = showCount.bind(products);
fn(2); // outputs Shoes. Sweater. to the document

Он также поддерживает передачу аргументов, которые “ remembered” при вызове функции, и они могут быть использованы для создания функций быстрого доступа, в основном версии функции, которая по умолчанию проходящей в некоторых аргументах:

var showOne = showCount.bind(products, 1);
var showFour = showCount.bind(products, 4);
showOne(); // outputs Shoes.
showFour(); // output Shoes. Sweater. Jeans. Wig.

Смотрите Prototype’ S Function.curry Более подробную информацию о данном аспекте Function.bind.Вторая полезная функция Prototype’ обработка область с bindAsEventListener.Это очень похоже на bind, но гарантирует, что первый аргумент, передаваемый в обработчик события является событие object.

Event.observe(
	$('showCountButton'),
	'click',
	showCountHandler.bindAsEventListener(products, 2)
);

Здесь we’ повторное использование Prototype’ с событием функции настроить приемник событий, когда showCountButton кнопки.We’ повторное прохождение наших products массив в качестве контекста, функция привязана, но в этом случае showCountHandler будет выглядеть примерно так:

function showCountHandler(e, number) {
	for(var i = 0; i < number; i++) {
		document.body.innerHTML += this[i] + '. ';
	}
	Event.stop(e);
}

Итак, мы имеем products массив this, но у нас также есть e Объект события автоматически передается в качестве первого параметра, который можно в дальнейшем использовать, чтобы остановить умолчанию event.

Два прототипа методы для связывания контекста удобно, потому что they’ повторно используется точно таким же образом, так что у вас есть очень простой и последовательный способ укрощения ваших context.

Ext JS

Ext JS будет дальше, достигая чем любой Prototype или MooTools в том, что она обеспечивает полный конца в конец основы для пользовательского интерфейса и создания приложений.Это означает, что она также обеспечивает, соответственно, больше возможностей для контроля области.Чтобы сравнить его с Prototype, let’ посмотрим, как привязать к конкретной ситуации:

var fn = showCount.createDelegate(products, 4 ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				

			  Главная   →  Программирование  → 01.08.2009  by  Newsbot