Шта значи кључна реч тхис у ЈаваСцрипт-у? И како га можете практично користити у свом ЈаваСцрипт програму? Ово су нека од уобичајених питања која постављају почетници, па чак и неки искусни ЈаваСцрипт програмери о кључној речи тхис.
Ако сте један од оних програмера који се питају шта је ова кључна реч, онда је овај чланак за вас. Истражите на шта се ово односи у различитим контекстима и упознајте се са неким проблемима како бисте избегли забуну и, наравно, грешке у вашем коду.
Преглед садржаја
„ово“ унутар глобалног опсега
У глобалном контексту, ово ће вратити објекат прозора све док је изван функције. Глобални контекст значи да га не постављате унутар функције.
if(true) {
console.log(this)
}let i = 2
while(i < 10) {
console.log(this)
i++
}
Ако покренете горњи код, добићете објекат прозора.
„ово“ унутрашње функције (методе)
Када се користи унутар функција, ово се односи на објекат за који је функција везана. Изузетак је када ово користите у самосталној функцији, у ком случају она враћа објекат прозора. Хајде да видимо неке примере.
У следећем примеру, функција саиНаме је унутар објекта ме (тј. то је метода). У случајевима као што је овај, ово се односи на објекат који садржи функцију.
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley",
sayName: sayName
}console.log(me.sayName())
ово је објекат ме, тако да је изговор тхис.наме унутар методе саиНаме потпуно исто што и ме.наме.
Други начин размишљања о томе је да ће оно што је на левој страни функције када се позове бити ово. То значи да можете поново користити функцију саиНаме у различитим објектима и то ће се сваки пут односити на потпуно другачији контекст.
Сада, као што је раније поменуто, ово враћа објекат прозора када се користи унутар самосталне функције. То је зато што је самостална функција подразумевано везана за објекат прозора:
function talk() {
return this
}talk()
Позивање талк() је исто као и позивање виндов.талк(), и све што је на левој страни функције аутоматски ће постати ово.
Уз напомену, кључна реч тхис у функцији се понаша другачије у ЈаваСцрипт-овом строгом режиму (враћа недефинисано). Ово такође треба имати на уму када користите УИ библиотеке које користе строги режим (нпр. Реацт).
Коришћење „овога“ са Фунцтион.бинд()
Можда постоје сценарији у којима не можете једноставно додати функцију објекту као методу (као у последњем одељку).
Можда објекат није ваш и извлачите га из библиотеке. Објекат је непроменљив, тако да га не можете само променити. У случајевима као што је овај, и даље можете извршити наредбу функције одвојено од објекта користећи метод Фунцтион.бинд().
У следећем примеру, функција саиНаме није метода на објекту ме, али сте је ипак везали помоћу функције бинд():
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk()
Који год објекат који проследите у бинд() биће коришћен као вредност овог у том позиву функције.
Укратко, можете користити бинд() на било којој функцији и проследити у новом контексту (објект). И тај објекат ће заменити значење овог унутар те функције.
Коришћење „овога“ са Фунцтион.цалл()
Шта ако не желите да вратите потпуно нову функцију, већ само позовите функцију након што је повежете са њеним контекстом? Решење за то је метода цалл():
function sayName() {
return `My name is ${this.name}`
}const me = {
name: "Kingsley"
}
sayName.call(me)
Метода цалл() одмах извршава функцију уместо да враћа другу функцију.
Ако функција захтева параметар, можете га проследити преко цалл() методе. У следећем примеру, језик прослеђујете функцији саиНаме(), тако да можете да је користите за условно враћање различитих порука:
function sayName(lang) {
if (lang === "en") {
return `My name is ${this.name}`
} else if (lang === "it") {
return `Io sono ${this.name}`
}
}const me = {
name: "Kingsley"
}
sayName.call(me, 'en')
sayName.call(me, 'it')
Као што видите, можете једноставно проследити било који параметар који желите функцији као други аргумент методи цалл(). Такође можете проследити онолико параметара колико желите.
Метод аппли() је веома сличан цалл() и бинд(). Једина разлика је у томе што више аргумената прослеђујете тако што ћете их одвојити зарезом помоћу цалл(), док више аргумената прослеђујете унутар низа помоћу аппли().
Укратко, бинд(), цалл() и аппли() вам омогућавају да позивате функције са потпуно другачијим објектом без икакве везе између њих (тј. функција није метода на објекту).
„ово“ унутрашње функције конструктора
Ако позовете функцију са новом кључном речи, она креира овај објекат и враћа га:
function person(name){
this.name = name
}const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name
her.name
him.name
У горњем коду сте креирали три различита објекта из исте функције. Нова кључна реч аутоматски ствара везу између објекта који се креира и кључне речи тхис унутар функције.
„ово“ унутрашње функције повратног позива
Функције повратног позива се разликују од редовних функција. Функције повратног позива су функције које прослеђујете другој функцији као аргумент, тако да се могу извршити одмах након што се главна заврши извршавање.
Ова кључна реч се односи на потпуно другачији контекст када се користи унутар функција повратног позива:
function person(name){
this.name = name
setTimeout(function() {
console.log(this)
}, 1000)
}const me = new person("Kingsley")
Након једне секунде позивања функције конструктора особе и креирања новог објекта ме, евидентираће објекат прозора као вредност овог. Дакле, када се користи у функцији повратног позива, ово се односи на објекат прозора, а не на „конструисани“ објекат.
Постоје два начина да се ово поправи. Први метод користи бинд() да повеже функцију персон са новоконструисаним објектом:
function person(name){
this.name = name
setTimeout(function() {
console.log(this)
}.bind(this), 1000)
}const me = new person("Kingsley")
Уз горњу модификацију, ово у повратном позиву ће указивати на исто тхис као и функција конструктора (ме објекат).
Други начин за решавање овог проблема у функцијама повратног позива је коришћење функција стрелица.
Функције „ово“ унутар стрелице
Функције стрелице се разликују од регуларних функција. Своју функцију повратног позива можете учинити функцијом са стрелицом. Са функцијама стрелице, више вам није потребан бинд() јер се аутоматски везује за новоконструисани објекат:
function person(name){
this.name = name
setTimeout(() => {
console.log(this)
}, 1000)
}const me = new person("Kingsley")
Сазнајте више о ЈаваСцрипт-у
Научили сте све о кључној речи „ова“ и шта она значи у свим различитим контекстима у ЈаваСцрипт-у. Ако сте нови у ЈаваСцрипт-у, имаћете велике користи од учења свих основа ЈаваСцрипт-а и начина на који он функционише.