Часто у начинающих программистов при написании кода JS возникают ошибки из-за неправильного использования ключевого слова this. Применение данного ключевого слова в JS обладает некоторыми особенностями по сравнению с другими языками. Значение this определяется в зависимости от того, в каком контексте применяется.
Содержание
- Как использовать this?
- В глобальном контексте
- В контексте функции
- В конструкторе
- Call/Apply
- В методе объекта
- В обработчике событий
Как использовать this?
Рассмотрим что же стоит за this в JS:
- в глобальном контексте (т.е. вне функций) – ссылается на глобальный объект,
- в контексте функции – ссылается на глобальный объект, в строгом режиме (“use strict mode”) значение this не определено (undefined),
- в конструкторе – если функция вызывается как конструктор объекта ( с помощью new), this ссылается на создаваемый новый объект,
- при вызове функции с помощью методов call(object, parameters)/apply(object, parameters) – this ссылается на передаваемый объект object, что позволяет задать значение this,
- в методе объекта – принимает значение объекта, к которому применен метод,
- в обработчике событий – ссылается на элемент, событие которого обрабатывается.
В глобальном контексте
В браузере глобальным является объект window:
// вернет true
console.log(this === window);
|
1 2 |
// вернет true console.log(this === window); |
В контексте функции
Также как и в предыдущем контексте ссылается на глобальный объект, в нашем случае window:
function func1(){
return this;
}
// вернет true
console.log(func1() === window)
|
1 2 3 4 5 |
function func1(){ return this; } // вернет true console.log(func1() === window) |
В конструкторе
Связан с создаваемым объектом:
function Constructor(arg){
this.name = arg;
}
a = new Constructor("example");
// вернет объект
console.log(a)
|
1 2 3 4 5 6 |
function Constructor(arg){ this.name = arg; } a = new Constructor("example"); // вернет объект console.log(a) |
Call/Apply
Ссылается на передаваемый в параметрах объект:
function func2(c,d){
return this.a+this.b+c+d;
}
//передаваемый объект на который будет ссылаться this в функции
var obj = {'a':1,'b':2}
func2.call(obj,3,4)
// вернет 10
console.log(func2.call(obj,3,4))
|
1 2 3 4 5 6 7 8 |
function func2(c,d){ return this.a+this.b+c+d; } //передаваемый объект на который будет ссылаться this в функции var obj = {'a':1,'b':2} func2.call(obj,3,4) // вернет 10 console.log(func2.call(obj,3,4)) |
В методе объекта
This указывает на объект, к которому применен метод:
var obj = {
number: '7',
func3: function() {
return this.number;
}
};
//return '7'
console.log(obj.func3());
|
1 2 3 4 5 6 7 8 |
var obj = { number: '7', func3: function() { return this.number; } }; //return '7' console.log(obj.func3()); |
В обработчике событий
Указывает на элемент, по которому отработало событие:
function clicks() {
//change background to green color
this.style.backgroundColor = 'green'
}
element = document.getElementById('btn');
console.log(element)
element.addEventListener('click', clicks, false);
|
1 2 3 4 5 6 7 8 |
function clicks() { //change background to green color this.style.backgroundColor = 'green' } element = document.getElementById('btn'); console.log(element) element.addEventListener('click', clicks, false); |
){kind=small}
