Немного об использовании this

от автора

Доброго времени суток, господа!

В джаваскрипте существует очень много интересных нюансов, которые едва ли можно встретить в других языках программирования. Рассмотрим самый нужный, на мой взгляд, из них — this.
Данный пост поможет освежить знания по этой теме.
Я не буду долго объяснять теорию, лучше сразу перейдем к коду и подумаем, что же произойдет в результате его выполнения.

This в разных контекстах

var firstObject = { 	value: 0, 	increment: function () { 		this.value++ ; 		console.log(this.value); 	} }; firstObject.increment(); 

Что же мы увидим в консоли?
Единицу, потому что в данном контексте this указывает на firstObject, так как функция increment является методом объекта firstObject.

var secondObject = { 	value: 0 }; secondObject.increment = function () { 	var incrementInternal = function () { 		this.value++ ; 		console.log(this.value); 	} 	incrementInternal(); } secondObject.increment(); 

В данном случае, увы, не произойдет чуда, и value на станет больше на единицу.
IncrementInternal — это функция, которая вызывается в контексте метода increment, и в джаваскрипте это не является достаточным условием для того, чтобы привязать this к объекту secondObject.

HINT:Такое поведение зачастую обходят подобным способом, сохранив ссылку на this:

var secondObject = { 	value: 0 }; secondObject.increment = function () {     var self = this;     var incrementInternal = function () { 		self.value++ ; 		console.log(self.value); 	} 	incrementInternal(); } secondObject.increment(); 

Следующий пример довольно прост

var thirdObject = function (value) { 	this.value = value; 	this.increment = function () { 		this.value++ ; 		console.log(this.value); 	} } var thObj = new thirdObject(0); thObj.increment(); 

Конечно, в консоли опять будет единица, потому что при вызове оператора new this будет указывать на текущий объект.
Знатоки джаваскрипта точно заметили, каким образом можно улучшить код, сделав одно небольшое изменение.

var thirdObject = function (value) { 	this.value = value;	 } thirdObject.prototype.increment = function () {     this.value++ ;     console.log(this.value); } var thObj = new thirdObject(0); thObj.increment(); 

Таким образом можно значительно улучшить производительность, если нужно создать много экземпляров объекта thirdObject, так как метод increment не будет создаваться у каждого нового объкта thirdObject, он будет доступен на уровне прототипа.

Важно помнить, что изменить значение this можно, используя call и apply, поэтому в использовании this кроется определенная опасность. Применяйте особенности джаваскрипта с умом во избежание неприятных ситуаций.

ссылка на оригинал статьи http://habrahabr.ru/post/178265/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *