Что нужно знать об «это» в JavaScript

«это» в глобальной области видимости

В этой области это вернет объект окна, пока он находится вне функции. Глобальный контекст означает, что вы не помещаете его внутри функции.

if(true) { console.log(this) // возвращает объект окна } let i = 2 while(i

Если вы запустите приведенный выше код, у вас будет объект окна.

«это» внутри функции

При использовании в функции это относится к объекту, к которому привязана функция. Исключение составляет случай, когда вы используете это в отдельной функции, которая возвращает окно. Давайте посмотрим на несколько примеров.

В следующем примере функция SayName находится внутри объекта me. В данном случае это относится к объекту, содержащему эту функцию.

functionsayName() { return `Меня зовут ${this.name}` } const me = { name: “Kingsley”,sayName:sayName } console.log(me.sayName()) // Меня зовут Кингсли

Это объект me, поэтому произнесение this.name внутри методаsayName точно такое же, как и me.name.

Другой способ определить это: все, что находится в левой части вызываемой функции, будет this. Это означает, что вы можете повторно использовать функциюsayName в разных объектах, и каждый раз это будет относиться к совершенно другому контексту.

Как мы уже говорили ранее, это возвращает объект окна при использовании в автономной функции. Это связано с тем, что автономная функция по умолчанию привязана к объекту окна.

function talk() { return this } talk() // возвращает объект окна

Вызов talk() аналогичен вызову window.talk(). Все, что находится слева от функции, автоматически становится этим.

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

Используйте «это» с Function.bind()

Бывают случаи, когда вы не можете добавить функцию к объекту как метод.

Возможно, объект не ваш и вы получите его из библиотеки. Этот объект изменчив, поэтому вы не можете его изменить. В таких случаях вы все равно можете запускать отдельные функции из этого объекта с помощью метода Function.bind().

В следующем примере функцияsayName не является методом объекта me, но вы все равно связываете ее с помощью функцииbind():

functionsayName() { return `Меня зовут ${this.name}` } const me = { name: “Kingsley” } const meTalk =sayName.bind(me) meTalk() // Меня зовут Кингсли

Какой бы объект вы ни передали в функцию bind(), он будет использоваться в качестве значения this при вызове этой функции.

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

Используйте «это» с function.call()

Что, если вы не хотите возвращать всю новую функцию, а вызываете ее только после привязки к контексту? Решением здесь является использование метода call():

functionsayName() { return `Меня зовут ${this.name}` } const me = { name: “Кингсли” }sayName.call(me) // Меня зовут Кингсли

Метод call() немедленно запускает эту функцию вместо возврата другой функции.

Если этой функции нужен параметр, вы можете передать его через метод call(). В следующем примере вы передаете язык функцииsayName(), поэтому вы можете использовать его для возврата различных сообщений в соответствии с условием:

functionsayName(lang) { if (lang === “en”) { return `Меня зовут ${this.name}` } else if (lang === “it”) { return `Io sono ${this. name}` } } const me = { name: “Kingsley” }sayName.call(me, ‘en’) // Меня зовут КингслиsayName.call(me, ‘it’) // Io sono Kingsley

Как видите, вы можете передать в эту функцию любой желаемый параметр в качестве второго аргумента метода call(). Вы также можете передать столько параметров, сколько захотите.

Метод apply() аналогичен методам call() иbind(). Единственное отличие здесь заключается в том, что вы передаете несколько аргументов, разделяя их запятыми с помощью call(), а несколько аргументов передаются в массиве с помощью apply().

В двух словах, функцииbind(), call() и apply() позволяют вызывать функцию с совершенно другим объектом без какой-либо связи между этими двумя объектами.

«это» в функции конструктора

Если вы вызываете функцию с ключевым словом key, она создает объект this и возвращает его:

function person(name){ this.name = name } const me = новый человек(“Кингсли”) const her = новый человек(“Сара”) const his = новый человек(“Джейк”) me.name // Кингсли ее. имя // Сара его.имя // Джейк

В приведенном выше коде вы создали 3 разных объекта из одного и того же ха. Ключевое слово new автоматически создает связь между создаваемым объектом и ключевым словом this внутри этой функции.

«это» в функции обратного вызова

Функция обратного вызова отличается от других обычных функций. Это функции, которые вы передаете другой функции в качестве аргумента, поэтому их можно выполнить сразу после завершения выполнения основной функции.

Ключевое слово this относится к совершенно другому контексту при использовании в функции обратного вызова:

function person(name){ this.name = name setTimeout(function() { console.log(this) }, 1000) } const me = new person(“Kingsley”) // возвращает объект окна

Через секунду после вызова конструктора person и создания нового объекта me он запишет объект window как значение this. Следовательно, при использовании в функции обратного вызова this относится к объекту окна, а не к «сконструированному» объекту.

У вас есть два способа решить эту проблему. Первый метод — использовать метод bind() для привязки функции person к вновь созданному объекту:

function person(name){ this.name = name setTimeout(function() { console.log(this) }.bind(this), 1000) } const me = new person(“Kingsley”) // возвращает объект me

При приведенном выше редактировании this в обратном вызове будет указывать на this так же, как и конструктор.

Второй способ решить эту проблему в функции обратного вызова — использовать стрелочные функции.

«это» внутри стрелочных функций

Стрелочные функции отличаются от обычных функций. Вы можете превратить функцию обратного вызова в функцию стрелки. С помощью этой функции вам больше не нужна функция метод Bind(), поскольку она автоматически привязывается к вновь созданному объекту:

function person(name){ this.name = name setTimeout(() => { console.log(this) }, 1000) } const me = new person(“Kingsley”) // возвращает объект me

Вот что вам нужно знать о ключевом слове this и о том, что оно означает в различных контекстах JavaScript. Если вы новичок в программировании на JavaScript, приведенные выше знания вам очень пригодятся.