Понимание ключевого слова this в JavaScript

Что это этот ключевое слово в JavaScript означает? И как вы можете использовать его практически в своей программе на JavaScript? Это некоторые из частых вопросов, которые задают новички и даже некоторые опытные разработчики JavaScript о этот ключевое слово.

Если вы один из тех разработчиков, которым интересно, что этот ключевое слово - это все, то эта статья для вас. Узнайте, что этот ссылается в разных контекстах и ​​ознакомьтесь с некоторыми ошибками, чтобы избежать путаницы и, конечно же, ошибок в вашем коде.

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

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

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

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

«это» внутренние функции (методы)

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

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

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

этот это мне объект, так сказать это имя внутри сказатьИмя метод точно такой же, как и меня.имя.

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

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

functiontalk() {
returnthis
}
talk() // returns the window object

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

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

Использование «this» с Function.bind()

Могут быть сценарии, в которых вы не можете просто добавить функцию к объекту как метод (как в последнем разделе).

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

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

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

В какой бы объект вы ни вошли связывать() будет использоваться в качестве значения этот в этом вызове функции.

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

Использование «this» с Function.call()

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

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

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

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

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

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

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

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

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

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

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

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

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

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

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

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Через одну секунду после вызова человек функция конструктора и создание нового мне объект, он зарегистрирует объект окна как значение этот. Поэтому при использовании в функции обратного вызова этот относится к объекту окна, а не к «построенному» объекту.

Есть два способа исправить это. Первый метод использует связывать() связать человек функция для вновь созданного объекта:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

С вышеуказанной модификацией этот в обратном вызове будет указывать на то же самое этот как функция-конструктор (теперь мне объект).

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

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

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

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Узнайте больше о JavaScript

Вы узнали все о ключевом слове «this» и о том, что оно означает в различных контекстах JavaScript. Если вы новичок в JavaScript, вам будет очень полезно изучить все основы JavaScript и то, как он работает.