Ключевое слово this в JavaScript

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

Оглавление

Что такое ключевое слово 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]

Оставьте комментарий

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

Прокрутить вверх