JavaScript "bu" Anahtar Kelimesini Anlamak

Ne yapar Bu JavaScript'teki anahtar kelime ne anlama geliyor? Ve bunu JavaScript programınızda pratik olarak nasıl kullanabilirsiniz? Bunlar, yeni başlayanların ve hatta bazı deneyimli JavaScript geliştiricilerinin JavaScript hakkında sorduğu yaygın sorulardan bazılarıdır. Bu anahtar kelime.

Ne olduğunu merak eden geliştiricilerden biriyseniz Bu anahtar kelime tamamen bununla ilgiliyse, bu makale tam size göre. Neyi keşfedin Bu Farklı bağlamlarda atıfta bulunun ve kafa karışıklığını ve tabii ki kodunuzdaki hataları önlemek için bazı önemli noktalara aşina olun.

Küresel Kapsamda "bu"

Küresel bağlamda, Bu geri dönecek pencere bir fonksiyonun dışında olduğu sürece nesne. Global bağlam, onu bir işlevin içine yerleştirmediğiniz anlamına gelir.

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

Yukarıdaki kodu çalıştırırsanız pencere nesnesini alırsınız.

"this" İç İşlevler (Yöntemler)

Fonksiyonların içinde kullanıldığında, Bu işlevin bağlı olduğu nesneyi ifade eder. Bunun istisnası, kullandığınız zamandır. Bu bağımsız bir işlevde, bu durumda şunu döndürür: pencere nesne. Hadi bazı örneklere bakalım.

Aşağıdaki örnekte, sayName fonksiyon içeride Ben nesne (yani bu bir yöntemdir). Bu gibi durumlarda, Bu işlevi içeren nesneyi ifade eder.

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

Bu bu Ben nesne, öyle diyor bu isim içinde sayName yöntem tamamen aynı ben.isim.

Bunu düşünmenin başka bir yolu da, çağrıldığında fonksiyonun sol tarafında ne varsa onun olacağıdır. Bu. Bu, yeniden kullanabileceğiniz anlamına gelir sayName farklı nesnelerde işlev görür ve Bu her seferinde tamamen farklı bir bağlama atıfta bulunacaktır.

Şimdi, daha önce de belirtildiği gibi, Bu şunu döndürür: pencere bağımsız bir işlev içinde kullanıldığında nesne. Bunun nedeni, bağımsız bir işlevin pencere varsayılan olarak nesne:

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

Arama konuşmak() aramakla aynı şey window.talk()ve fonksiyonun sol tarafındaki her şey otomatik olarak şu hale gelecektir: Bu.

Bir yan not olarak, Bu fonksiyondaki anahtar kelime farklı davranıyor JavaScript'in katı modu (geri döner Tanımsız). Bu aynı zamanda katı modu kullanan kullanıcı arayüzü kitaplıklarını (örn. React) kullanırken aklınızda bulundurmanız gereken bir şeydir.

"This" işlevini Function.bind() ile kullanma

İşlevi bir nesneye yalnızca yöntem olarak ekleyemeyeceğiniz senaryolar olabilir (son bölümde olduğu gibi).

Belki de nesne size ait değildir ve siz onu bir kütüphaneden çekiyorsunuzdur. Nesne değişmezdir, dolayısıyla onu değiştiremezsiniz. Bu gibi durumlarda, fonksiyon ifadesini yine de nesneden ayrı olarak çalıştırabilirsiniz. Function.bind() yöntem.

Aşağıdaki örnekte, sayName işlev bir yöntem değil Ben nesne, ancak yine de onu kullanarak bağladınız bağlama() işlev:

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

Hangi nesneye girerseniz girin bağlama() değeri olarak kullanılacaktır Bu bu işlev çağrısında.

Özet olarak kullanabilirsiniz bağlama() herhangi bir işleve aktarın ve yeni bir bağlama (bir nesneye) aktarın. Ve bu nesne şunun anlamının üzerine yazacaktır: Bu bu fonksiyonun içinde.

"This" işlevini Function.call() ile kullanmak

Tamamen yeni bir işlev döndürmek istemiyorsanız, bunun yerine işlevi bağlamına bağladıktan sonra çağırmak istiyorsanız ne olur? Bunun çözümü ise Arama() yöntem:

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

Arama() yöntem başka bir işlev döndürmek yerine işlevi hemen çalıştırır.

İşlev bir parametre gerektiriyorsa, bunu aracılığıyla iletebilirsiniz. Arama() yöntem. Aşağıdaki örnekte, dili sayName() işlevi, farklı mesajları koşullu olarak döndürmek için kullanabilirsiniz:

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

Gördüğünüz gibi, fonksiyona istediğiniz herhangi bir parametreyi ikinci argüman olarak iletebilirsiniz. Arama() yöntem. Ayrıca istediğiniz kadar parametre iletebilirsiniz.

uygula() yöntem şuna çok benziyor Arama() Ve bağlama(). Tek fark, birden fazla argümanı virgülle ayırarak aktarmanızdır. Arama(), oysa bir dizi içinde birden fazla argüman iletirsiniz uygula().

Özetle, Bind(), Call() ve Apply() hepsi, ikisi arasında herhangi bir ilişki olmaksızın, tamamen farklı bir nesneyle işlevleri çağırmanıza izin verir (yani, işlev, nesne üzerinde bir yöntem değildir).

"this" Yapıcı İşlevlerinin İçinde

Eğer bir işlevi çağırırsanız yeni anahtar kelime, bir oluşturur Bu nesneyi döndürür ve onu döndürür:

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

Yukarıdaki kodda aynı fonksiyondan üç farklı nesne yarattınız. yeni anahtar kelime, oluşturulan nesne ile nesne arasında otomatik olarak bir bağlantı oluşturur. Bu fonksiyonun içindeki anahtar kelime.

"bu" Geri Arama İşlevlerinin İçinde

Geri arama işlevleri şunlardır: normal işlevlerden farklı. Geri çağırma işlevleri, argüman olarak başka bir işleve ilettiğiniz işlevlerdir, böylece ana işlevin yürütülmesi bittikten hemen sonra yürütülebilirler.

Bu anahtar kelime geri çağırma işlevleri içinde kullanıldığında tamamen farklı bir bağlamı ifade eder:

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

Çağrı yaptıktan bir saniye sonra kişi yapıcı işlevi ve yeni bir oluşturma Ben nesne, pencere nesnesini değeri olarak günlüğe kaydeder Bu. Yani bir geri arama işlevinde kullanıldığında, Bu "yapılandırılmış" nesneyi değil, pencere nesnesini ifade eder.

Bunu düzeltmenin iki yolu var. İlk yöntem kullanılıyor bağlama() bağlamak kişi yeni oluşturulan nesneye işlev:

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

Yukarıdaki değişiklikle, Bu geri aramada aynı şeyi gösterecek Bu yapıcı işlevi olarak ( Ben nesne).

Sorunu çözmenin ikinci yolu Bu geri arama işlevlerinde ok işlevlerini kullanmaktır.

"bu" İç Ok İşlevleri

Ok işlevleri normal işlevlerden farklıdır. Geri arama işlevinizi bir ok işlevi haline getirebilirsiniz. Ok fonksiyonlarıyla artık ihtiyacınız yok bağlama() çünkü yeni oluşturulan nesneye otomatik olarak bağlanır:

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

JavaScript Hakkında Daha Fazla Bilgi Edinin

"This" anahtar kelimesi ve bunun JavaScript'teki tüm farklı bağlamlarda ne anlama geldiği hakkında her şeyi öğrendiniz. JavaScript'te yeniyseniz, JavaScript'in tüm temellerini ve nasıl çalıştığını öğrenmek size büyük fayda sağlayacaktır.