Ключевое слово this
является своеобразным и сбивает с толку многих разработчиков.
Этот урок также доступен на YouTube:
Таким образом, ключевое слово this
представляет контекст вызова. И что я имею в виду? Это означает, что вызывающий контекст — это объект, который вызывает функцию. Давайте рассмотрим несколько примеров. Обещаю, после прочтения этой статьи все станет ясно.
Примеры
Сценарий 1: ключевое слово this
в методе объекта.
const car = { colour: "red", brand: "abc", drive: function(){ console.log(this); } }
car.drive(); // expect the car object.
Наш объект car
имеет метод drive
. Все, что он делает, это распечатывает this
.
Теперь мы вызываем функцию drive
из car
. Это означает, что наш контекст вызова — car
. Другими словами, ключевое слово this
при запуске drive()
будет ссылаться на car
.
Сценарий 2: ключевое слово this
в обычном вызове функции.
Как насчет вызова функции без контекста?
function heya(){ console.log(this); // expect the 'window' object }
heya();
Здесь мы вызываем heya()
самостоятельно. Если это произойдет, по умолчанию JavaScript установит контекст как глобальный контекст, т.е. объект window
. Итак, this
будет глобальным объектом window
.
Сценарий 3: ключевое слово this
во внутренней функции.
Давайте немного изменим наш автомобильный объект.
const car = {
colour: "red",
brand: "abc",
drive: function(){
function inner(){
console.log(this);
}
inner();
}
}
car.drive(); // expect the 'window' object
Теперь вам может быть интересно, почему мы видим объект «окно»?? Как и в сценарии 2, мы вызываем функцию inner()
самостоятельно. Следовательно, JavaScript устанавливает контекст как глобальный контекст, и мы видим this
как глобальный объект window
.
Сценарий 4: Извлечение метода объекта
const car = {
colour: "red",
brand: "abc",
drive: function(){
console.log(this);
}
}
const boom = car.drive;
boom(); // expect the 'window' object
Ок, успокойся. Теперь в этом сценарии мы переназначаем свойство привода новой переменной boom
. Затем мы вызываем boom
самостоятельно. Как и в сценариях 2 и 3, JavaScript установит контекст как глобальный. Поэтому мы видим объект window
.
В итоге:
Вот несколько быстрых советов, как быстро узнать, к чему относится ключевое слово this
:
- Спросите себя, что вызывает функцию.
- Если функция вызывается объектом, то ключевое слово
this
будет ссылаться на объект. - Если мы вызовем функцию отдельно, JavaScript установит контекст как глобальный контекст, который в браузере является объектом
window
.
Связующий контекст.
Иногда может быть полезно вручную определить контекст вызова функции. JavaScript позволяет нам сделать это, используя метод bind()
для функции. Вот пример:
const fruit = { name: "apple", colour: "red", }
const heya = function(){ console.log(this); }
const bound = heya.bind(fruit);
bound(); // expect 'fruit' object
Метод bind вернет нам модифицированную версию исходной функции, в которой контекст был вручную установлен на некоторое предопределенное значение. Здесь мы привязываем контекст heya
к fruit
. Таким образом, когда мы запускаем bound()
, ключевое слово this
будет ссылаться на fruit
.
Нет ограничений на то, что мы можем привязать к функции. Мы можем связать любой тип данных, string
, number
, array
, object
или boolean
.
// ...
const bound2 = heya.bind("abc");
bound2(); // expect the string "abc"