Привет всем! В этой статье мы поговорим о ключевом слове this в JavaScript. Раньше я немного плавал в этой теме, поэтому постараюсь объяснить ее вам, чтобы вы могли понять, как this используется и в каких ситуациях может пригодиться. Поехали!
Оглавление
- Что такое ключевое слово this
- Вызов this сам по себе
- Как вызвать this в методе объекта
- Как вызвать this в функции
- Как использовать this в слушателе событий
- Методы this (call, apply и bind)
Что такое ключевое слово this?
Итак, давайте начнем с определения того, что собой представляет ключевое слово this. В JavaScript ключевое слово this всегда ссылается на объект. Но дело в том, что объект, на который оно ссылается, будет меняться в зависимости от того, как и где вызывается this.
Ключевое слово this можно использовать по-разному. Мы рассмотрим наиболее распространенные случаи и то, как this ведет себя в каждом из них.
Важное замечание: this в JavaScript не является переменной — это ключевое слово, поэтому его значение не может быть изменено или переназначено.
Вызов this сам по себе
Если мы вызываем this отдельно, то есть не внутри функции, объекта или чего-либо еще, оно будет ссылаться на глобальный объект window.
Если вы напечатаете его как console.log('this alone', this);, вы получите в консоли следующее: [object Window].
Или вот это, если развернете:
Как вызвать this в методе объекта
this можно вызвать внутри метода объекта, как в следующем примере:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
getThis : function() {
return this;
}
};
console.log('this in object method', person.getThis());
Мы увидим, что this больше не ссылается на сам объект:
И учитывая это, мы можем использовать this для доступа к другим свойствам и методам из того же объекта:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
getFullName : function() {
return this.name + ' ' + this.lastName;
}
};
console.log('this in object method', person.getFullName());
Как вызвать this в функции
Мы можем вызвать this в функции, как в следующем примере:
function test() {
console.log('this in a function', this);
}
test()
Теперь this снова будет ссылаться на общий объект window, и мы получим в консоли следующее: [object Window].
Замечание о стрелочных функциях
В стрелочных функциях JavaScript задает this лексически. То есть стрелочная функция не создает свой собственный контекст выполнения, а наследует this от внешней функции, в которой она определена.
В большинстве случаев это означает, что this также будет ссылаться и на объект window:
const show = () => this
console.log('arrow function this', show())
Это важно, потому что если мы, например, попытаемся реализовать стрелочную функцию в качестве метода объекта, мы не сможем получить доступ к объекту при помощи ключевого слова this:
const person = {
name: 'Pedro',
surname: 'Sanchez',
sayName: () => this.name + ' ' + this.surname
}
console.log(person.sayName());
Замечание о строгом режиме
При использовании строгого режима вызов this внутри функции вернет undefined.
"use strict";
function show() {
console.log(this);
}
show();
Если вы не знаете, что такое строгий режим, обратитесь к документации MDN:
Режим strict (строгий режим), введённый в ECMAScript 5, позволяет использовать более строгий вариант JavaScript. Это не просто подмножество языка: в нем сознательно используется семантика, отличающаяся от обычно принятой.
Строгий режим принёс ряд изменений в обычную семантику JavaScript.
Во-первых, строгий режим заменяет исключениями некоторые ошибки, которые интерпретатор JavaScript ранее молча пропускал.
Во-вторых, строгий режим исправляет ошибки, которые мешали движкам JavaScript выполнять оптимизацию — в некоторых случаях код в строгом режиме может быть оптимизирован для более быстрого выполнения, чем код в обычном режиме.
В-третьих, строгий режим запрещает использовать некоторые элементы синтаксиса, которые, вероятно, в следующих версиях ECMAScript получат особый смысл.
Как использовать this в слушателе событий
При использовании в слушателе событий this будет ссылаться на элемент DOM, который вызвал событие.
document.getElementById('testBtn').addEventListener('click', function() {
console.log('this in a event', this);
})
В нашем случае мы добавили слушатель событий к элементу кнопки: <button id="testBtn">TEST</button>
Кликнув по кнопке, в консоли мы получим следующее:
Методы this (call, apply и bind)
JavaScript предоставляет три нативных метода, с помощью которых можно управлять поведением ключевого слова this. Это методы call, apply и bind. Давайте посмотрим, как они работают.
Как использовать метод call
С помощью call мы можем вызвать метод, передав в качестве аргумента объект-владелец. Говоря проще, мы можем вызвать метод, указав, к какому объекту будет относиться ключевое слово this.
Рассмотрим пример:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function() {
return this.name + " " + this.surname;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.call(person2));
У нас есть два объекта person. Каждый из них имеет свойства name и surname, а объект person1 имеет метод sayName.
Мы вызываем метод sayName объекта person1 следующим образом: person1.sayName.call(person2).
Этим мы указываем, что при выполнении метода sayName ключевое слово this будет ссылаться не на объект, «владеющий» методом (person1), а на объект, который мы передали в качестве параметра (person2). Как следствие, в консоли мы получаем следующее:
Помните, что если данный метод принимает аргументы, то при вызове его с помощью call мы можем передать и их:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function(city, country) {
return this.name + " " + this.surname + ", " + city + ", " + country;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.call(person2, "DF", "Mexico"));
Как использовать метод apply
Метод apply работает очень похоже на call. Единственное различие между ними заключается в том, что call принимает параметры в виде списка, разделенного двоеточиями (как в предыдущем примере), а apply — в виде массива.
Таким образом, если мы хотим повторить тот же пример с применением метода apply, мы должны сделать это следующим образом:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function(city, country) {
return this.name + " " + this.surname + ", " + city + ", " + country;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.apply(person2, ["DF", "Mexico"]));
Как использовать метод bind
Как и call и apply, метод bind указывает объект, на который будет ссылаться ключевое слово this при выполнении данного метода.
Отличие метода bind в том, что он возвращает новую функцию, не выполняя ее. В то время как при использовании call и apply функция выполняется сразу, при использовании bind мы должны выполнить ее отдельно.
Рассмотрим это на примере:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function() {
return this.name + " " + this.surname
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
const sayPerson2Name = person1.sayName.bind(person2)
console.log(sayPerson2Name())
Подведение итогов
Как всегда, я надеюсь, что вам понравилась статья и вы узнали что-то новое. Прочитав эту статью, вы познакомились с ключевым словом this в JavaScript и его поведением в разных ситуациях.
Перевод статьи «How to Use the «this» Keyword in JavaScript».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]