Разбиране на ключовата дума на 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

Обаждане говоря() е същото като обаждане window.talk()и всичко, което е от лявата страна на функцията, автоматично ще стане това.

От друга страна, това ключова дума във функцията се държи различно в Строгият режим на JavaScript (връща се недефиниран). Това също е нещо, което трябва да имате предвид, когато използвате UI библиотеки, които използват строг режим (напр. React).

Използване на "this" с Function.bind()

Възможно е да има сценарии, при които не можете просто да добавите функцията към обект като метод (както в последния раздел).

Може би обектът не е ваш и го изтегляте от библиотека. Обектът е неизменен, така че не можете просто да го промените. В случаи като този все още можете да изпълните оператора на функцията отделно от обекта, като използвате Function.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

The обадете се() метод незабавно изпълнява функцията, вместо да връща друга функция.

Ако функцията изисква параметър, можете да го предадете чрез обадете се() метод. В следващия пример вие предавате езика на sayName() функция, така че можете да я използвате за условно връщане на различни съобщения:

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

Както можете да видите, можете просто да предадете всеки параметър, който искате, на функцията като втори аргумент на обадете се() метод. Можете също така да подадете толкова параметри, колкото искате.

The Приложи() методът е много подобен на обадете се() и свързване (). Единствената разлика е, че предавате множество аргументи, като ги разделяте със запетая с обадете се(), докато предавате множество аргументи в масив с Приложи().

В обобщение, bind(), call() и apply() всички ви позволяват да извиквате функции с напълно различен обект, без да имате каквато и да е връзка между двете (т.е. функцията не е метод на обекта).

"this" Вътрешни функции на конструктора

Ако извикате функция с a нов ключова дума, тя създава a това обект и го връща:

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

В горния код създадохте три различни обекта от една и съща функция. The нов ключовата дума автоматично създава обвързване между обекта, който се създава, и това ключова дума във функцията.

"this" вътрешни функции за обратно извикване

Функциите за обратно извикване са различни от обикновените функции. Функциите за обратно извикване са функции, които предавате на друга функция като аргумент, така че те могат да бъдат изпълнени веднага след като основната приключи изпълнението.

The това ключовата дума се отнася до напълно различен контекст, когато се използва във функции за обратно извикване:

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

С горната модификация, това в обратното извикване ще сочи към същото това като функцията конструктор (the аз обект).

Вторият начин за решаване на проблема с това във функциите за обратно извикване е чрез използване на функции със стрелки.

"това" Вътрешни функции със стрелки

Функциите със стрелки са различни от обикновените функции. Можете да направите функцията за обратно извикване функция със стрелка. С функциите на стрелките вече нямате нужда свързване () защото автоматично се свързва с новосъздадения обект:

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

Научете повече за JavaScript

Научихте всичко за ключовата дума „this“ и какво означава тя във всички различни контексти в JavaScript. Ако не сте запознати с JavaScript, ще ви е много полезно да научите всички основи на JavaScript и как работи.