Ключевое слово «это» в Javascript

В этой статье мы поговорим о ключевом слове this в JavaScript. «это» — очень важная концепция в JavaScript, которую новичкам может быть трудно понять, как это было для меня, но как только вы поймете, как она работает, она может оказаться очень полезной.

Что это'? В JavaScript «это» оценивается как текущий объект, который может быть глобальным объектом, функцией или объектом, методом которого является функция. Это способ обратиться к текущему контексту, в котором выполняется код.

Как это работает? Значение this зависит от того, как вызывается функция. Есть четыре способа вызова функции в JavaScript, и каждый из них влияет на значение this.

Глобальный контекст — когда функция вызывается в глобальном контексте, «это» относится к глобальному объекту. В веб-браузере глобальным объектом является объект окна.

// Global context
function that() {
console.log(`${this} is equal to global context in ex 1`)
};
that();

2. Контекст метода. Когда функция вызывается как метод объекта, this относится к объекту, методом которого является функция. Другими словами, this устанавливается на объект слева от точки при вызове функции.

В примере кода мы определяем метод для объекта ex2Button, добавляя прослушиватель событий к элементу кнопки с помощью ex2Button.addEventListener().

При нажатии кнопки выполняется функция прослушивания событий, и this внутри функции ссылается на объект ex2Button, вызвавший событие. Это позволит this напрямую обращаться к свойствам объекта ex2Button и управлять ими. Здесь я изменил текст на this.textContent = 'Clicked!'

// Method context
const ex2Button = document.querySelector('#ex2Button');
ex2Button.addEventListener('click', function() {
let newTextContent = this.textContent;
this.textContent = newTextContent === 'Click Me!' ? 'Clicked' : 'Click Me!';
});

3. Контекст конструктора. Когда функция вызывается как конструктор с ключевым словом «новое», «это» относится к вновь созданному объекту. Когда вы создаете новый объект с помощью функции-конструктора, ключевое слово this внутри функции-конструктора всегда относится к новому создаваемому объекту.

Используя this в функции-конструкторе ниже, мы создаем новые экземпляры объекта MyItem. Каждый экземпляр объекта будет иметь собственное свойство item, которое ссылается на новый элемент списка, созданный при создании экземпляра объекта.

// Constructor context
class MyItem {
constructor(text) {
this.item = document.createElement('li');
this.item.textContent = text;
document.querySelector('#myList').appendChild(this.item);
}
}
const ex3Button = document.querySelector('#ex3Button');
ex3Button.addEventListener('click', function() {
const myText = "New list item!";
new MyItem(myText);
});

4. Контекст вызова. Когда функция вызывается методом call, this относится к объекту, который передается в качестве первого аргумента метода.

Когда кнопка нажата, функция introduce (которая на самом деле является методом объекта) вызывается с userTwo в качестве объекта с использованием метода call. Это изменяет объект, на который ссылается this, с userOne на userTwo.

// Call context for example 4
const userOne = {
  name: 'Clinton',
  introduce: function() {
    return (`My name is ${this.name} in example 4.`);
  }
}

const userTwo = {
  name: 'Alan'
}

const user = document.querySelector('.user');
user.textContent = userOne.introduce();

const ex4Button = document.querySelector('#ex4Button');

ex4Button.addEventListener('click', () => {
  user.textContent = userOne.introduce.call(userTwo);  
});

В заключение, ключевое слово this в JavaScript относится к текущему объекту, и его значение зависит от того, как вызывается функция. Понимание этого важно для написания эффективного и безошибочного кода на JavaScript. Я надеюсь, что эта статья помогла вам объяснить понятие «это». Спасибо за чтение!

Ключевое слово «это» в Javascript

Похожие вопросы