Разумевање ЈаваСцрипт кључне речи „ова“.

Шта значи ово кључна реч у ЈаваСцрипт-у значи? И како га можете практично користити у свом ЈаваСцрипт програму? Ово су нека од уобичајених питања о којима се постављају почетници, па чак и неки искусни ЈаваСцрипт програмери ово кључна реч.

Ако сте један од оних програмера који се питају шта је ово кључна реч, онда је овај чланак за вас. Истражите шта ово се односи на различите контексте и упознајте се са неким проблемима како бисте избегли забуну, и наравно, грешке у вашем коду.

"ово" Унутар глобалног опсега

У глобалном контексту, ово ће вратити прозор објекат све док је изван функције. Глобални контекст значи да га не постављате унутар функције.

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

Зове разговор() је исто што и позивање виндов.талк(), а све што се налази на левој страни функције аутоматски ће постати ово.

Уз напомену, ово кључна реч у функцији се понаша другачије у ЈаваСцрипт-ов строги режим (враћа се недефинисан). Ово такође треба имати на уму када користите УИ библиотеке које користе строги режим (нпр. Реацт).

Коришћење "ово" са Фунцтион.бинд()

Можда постоје сценарији у којима не можете једноставно додати функцију објекту као методу (као у последњем одељку).

Можда објекат није ваш и извлачите га из библиотеке. Објекат је непроменљив, тако да га не можете само променити. У случајевима као што је овај, и даље можете извршити наредбу функције одвојено од објекта користећи Фунцтион.бинд() методом.

У следећем примеру, саиНаме функција није метода на ја објекат, али сте га и даље везали помоћу бинд() функција:

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

У који год објекат да пређете бинд() користиће се као вредност ово у том позиву функције.

Укратко, можете користити бинд() на било којој функцији и проследити у новом контексту (објект). И тај објекат ће заменити значење ово унутар те функције.

Коришћење "ово" са Фунцтион.цалл()

Шта ако не желите да вратите потпуно нову функцију, већ само позовите функцију након што је повежете са њеним контекстом? Решење за то је позив() метод:

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

Као што видите, можете једноставно проследити било који параметар који желите функцији као други аргумент позив() методом. Такође можете проследити онолико параметара колико желите.

Тхе применити() метод је веома сличан позив() и бинд(). Једина разлика је у томе што преносите више аргумената тако што ћете их одвојити зарезом са позив(), док преносите више аргумената унутар низа са применити().

Укратко, бинд(), цалл() и аппли() сви вам омогућавају да позивате функције са потпуно другачијим објектом без икакве везе између њих (тј. функција није метода на објекту).

"ово" унутрашње функције конструктора

Ако позовете функцију са а Нова кључну реч, ствара а ово објекат и враћа га:

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

У горњем коду сте креирали три различита објекта из исте функције. Тхе Нова кључна реч аутоматски ствара везу између објекта који се креира и ово кључну реч унутар функције.

"ово" унутрашње функције повратног позива

Функције повратног позива су различите од редовних функција. Функције повратног позива су функције које прослеђујете другој функцији као аргумент, тако да се могу извршити одмах након што се главна заврши извршавање.

Тхе ово кључна реч се односи на потпуно другачији контекст када се користи унутар функција повратног позива:

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

Сазнајте више о ЈаваСцрипт-у

Научили сте све о кључној речи „ова“ и шта она значи у свим различитим контекстима у ЈаваСцрипт-у. Ако сте нови у ЈаваСцрипт-у, имаћете велике користи од учења свих основа ЈаваСцрипт-а и начина на који он функционише.