giriiş

JavaScript'in eğlenceli dünyasına girmeye ve "this" anahtar kelimesinin gizli gücünü öğrenmeye hazır mısınız? Eylemlerinin nedenlerini ortaya çıkaracağınız ve kodunuzun tüm gücünü fark edeceğiniz ilginç "bu" diyarında inanılmaz bir yolculuğa hazırlanın. Etkileyici örnekler ve berrak açıklamalarla bu kılavuz, sizi "bunun" çeşitli bağları arasında heyecan verici bir yolculuğa çıkaracak. Bu yolculuk sona erdiğinde, önünüze çıkan her türlü kodlama zorluğunun üstesinden gelecek donanıma sahip olacaksınız ve sağlam ve ölçeklenebilir sistemler oluşturmak için gereken özgüvene sahip olacaksınız. O halde daha fazla uzatmadan, kod botlarınızı hızlandırın ve “this” anahtar kelimesinin keşfedilmemiş bölgelerinde bir yolculuğa çıkalım!

JavaScript'teki "this" anahtar sözcüğü, geçerli işlevin yöntemi olduğu nesneyi ifade eder. Dinamik olarak kapsamlı bir değişkendir, yani kapsamı, çalışma zamanı sırasında işlev çağrısının içeriğine bağlı olarak değişir. "Bu", JavaScript'te anahtar ve sıklıkla yanlış anlaşılan bir kavramdır çünkü anlamı, kullanıldığı bağlama göre büyük ölçüde değişebilir.

"Bu"nun bağları

"This" anahtar sözcüğünün JavaScript'te dört ana bağlaması vardır: varsayılan bağlama, örtülü bağlama, açık bağlama ve yeni bağlama. Bu bağlamaları anlamak, "bu" anahtar kelimesinin JavaScript'te etkin bir şekilde kullanılması için önemlidir, çünkü her biri "bunun" belirli bir bağlamda nasıl kullanılması gerektiğini belirtir.

1. Varsayılan Bağlama

"This" terimi, JavaScript'te bir işlevin dışında veya genel kapsamda kullanıldığında, varsayılan olarak bağlanır. Bu örnekte "bu", bir tarayıcıda "pencere" veya Node.js'de "global" olan global nesneyi ifade eder.

İşte eylemdeki varsayılan bağlamanın bir örneği:

İlk console.log deyiminde görüldüğü gibi yukarıdaki örnekteki “this” anahtar kelimesi herhangi bir fonksiyonun dışında kullanıldığında global nesneyi ifade eder. İkinci console.log cümlesi, logThis işlevi içinde kullanıldığında global nesneye de atıfta bulunduğunu gösterir.

Katı modda, global nesnenin tanımsız olduğunu ve global kapsamda "this" değerinin olmadığını hatırlamak çok önemlidir. Aşağıda gösterildiği gibi, kodunuzun başına veya bir işlevin içine "usestrict" ekleyerek katı modu etkinleştirebilirsiniz.

2. Örtük Bağlama

Bu bağlamadaki "this" anahtar sözcüğü, işlevin özelliği olduğu nesneyi ifade eder. "bu", bir işlev bir nesnenin yöntemi olarak kullanıldığında nesneyi belirtir. İşlevin bir özelliği olduğu nesne, "bunun" değerini belirler.

Örneğin,

" Selam " işlevi, yukarıdaki örnekteki " person " nesnesinin bir niteliğidir . " person " nesnesinin name özelliğine, bunun değerini greet yöntemi içinde person nesnesine ayarlayan person.greet()'i çağırarak erişebiliriz . Örtülü bağlama bu durumda görülebilir. Örtülü bağlama bununla gösterilmektedir.

Başka bir örneğe bakalım:

Bu örnekte, " eğitmen " nesnesi, bir özellik olarak ayarlanmış " sayName " işlevine sahiptir ve eğitmen.say() çağrıldığında, " eğitmen " nesnesi, " sayName " işlevinde " this " değeri olarak ayarlanmıştır. . Bu örtük bağlamanın başka bir örneğidir.

3. Açık Bağlama

Kodda bir işlevin nasıl ve nerede çağrıldığına bakılmaksızın, açık bir bağlama yöntemi kullanarak bir çağrı için " this " değerini açıkça ayarlayabilirsiniz.

JavaScript'te üç açık bağlama yöntemi vardır: " çağrı ", " uygula " ve " bağla ".

“ call ” yöntemini kullanarak bir fonksiyonu çağırabilir ve ayrıca o fonksiyon çağrısı için “ this ” değerini ayarlayabilirsiniz . “ this ” için ayarlamak istediğiniz değer, çağrı yönteminin ilk argümanıdır ve diğer argümanlar, işleve ayrı ayrı gönderilir.

Örneğin:

Yukarıdaki örnekte " sayName " işlevini çağırmak için " call " yöntemi kullanılmıştır ve " this " değeri eğitmen nesnesine ayarlanmıştır.

Tek tek bağımsız değişkenler yerine bir dizi bağımsız değişkeni kabul etmesi dışında, " uygulama " yöntemi de " call " yöntemine benzer .

Bir örneğe bakalım:

Yukarıdaki örnekte, işlevi çağırmak ve " this " değerini " trainer " nesnesine ayarlamak için " Apply " yöntemi kullanılmıştır . İşlevin argümanları bir dizi olarak iletilir.sayName

" bind " yöntemi, "bind"e iletilen ilk bağımsız değişkeni "this" değeri olarak kullanarak yeni bir işlev oluşturur. Bağlamak için verilen argüman, daha sonra yeni fonksiyon çağrıldığında orijinal fonksiyon içindeki “this” değeri olarak ayarlanır.

İşte aşağıda bir örnek:

Yukarıdaki örnekte, " bunu " " eğitmen " nesnesine ayarlayarak yeni bir işlev " trainerSayName " oluşturmak için " bind " yöntemi kullanıldı . Daha sonra “ trainerSayName ” fonksiyonu çağrıldığında, “ sayName ” fonksiyonu içindeki “ this ” değeri , sanki “ call ” veya “ Apply ” kullanmışız gibi, “ eğitmen ” nesnesine ayarlandı .

4. Yeni Bağlama

Bir fonksiyon “ new ” işleci ile çağrıldığında “ this ” anahtar sözcüğünün yeni oluşturulmuş bir nesneye bağlanma işlemine “ new ” bağlama denir .

“ new ” operatörü ile bir fonksiyon çağrıldığında yeni bir nesne oluşturulur ve fonksiyon içindeki “ this ” anahtar sözcüğü bu yeni oluşturulan nesneye ayarlanır. Ek olarak, yeni oluşturulan nesnenin prototipi, işlevin prototip özelliğine ayarlanır.

Örneğin:

Yukarıdaki örnekte, “ Person ” işlevini çağırmak için “ new ” operatörü kullanılarak yeni bir nesne yaratılmıştır . Nesneye " name " ve " selamlama " özellikleri eklenir ve " Person " işlevi içindeki " this " anahtar sözcüğü yeni oluşturulan nesneye ayarlanır.

Bir işlev “new” operatörü kullanılarak çağrıldığında, yeni oluşturulan nesnenin “return” ifadesine gerek kalmadan döndürüldüğünü akılda tutmak çok önemlidir. Bir "return" ifadesi kullanılırsa ve bir nesne döndürürse, yeni oluşturulan nesne yerine o nesne döndürülür. Bir "return" ifadesi kullanılırsa ve nesne olmayan bir değer döndürürse, yeni oluşturulan nesne yine de döndürülür.

Ok İşlevi ve “bu”

JavaScript'in ok işlevleri, anonim işlevler (adsız işlevler) yazmak için bir kısayol sağlar. "This" anahtar kelimesini bağlama biçimleri, onları geleneksel işlev ifadelerinden ayırır.

Geleneksel işlev ifadelerindeki "this" değeri, işlevin nasıl çağrıldığına bağlıdır. Daha önce açıklandığı gibi, "call", "apply" veya "bind" komutları kullanılarak açıkça ayarlanabilir veya işlevi içeren nesneye bağlı olarak dolaylı olarak ayarlanabilir.

Bununla birlikte, ok işlevlerinde, "bunun" değerini nasıl çağrıldığı değil, oluşturulduğu bağlam belirler. Bu, bir ok işlevi başka bir işlevin içinde değilse, ok işlevinin içindeki “this” anahtar sözcüğünün her zaman dış işlevin veya global nesnenin “this” değerine atıfta bulunacağı anlamına gelir.

Basitçe söylemek gerekirse, ok işlevlerinin kendi "bu" değeri yoktur; bunun yerine, kapsayıcı kapsamdan "bu" değeri devralırlar.

Örneğin:

Dış işlevin "bu" anahtar sözcüğünü ifade eden başka bir ok işlevi örneği:

Yukarıdaki örnekte, bu örnekteki " selamlama " işlevi, " Kişi " işlevinin içindeki bir ok işlevi olarak tanımlanmıştır . Ok işlevindeki " this " değeri, " selamlama " işlevi çağrıldığında yeni oluşturulan " elie " nesnesine atanan " Kişi " işlevinin " this " değerine karşılık geliyordu.

"Çağrı", "uygula" veya "bağla" kullanımının ok işlevlerindeki "bu" bağlamayı değiştiremeyeceğini belirtmekte fayda var. İşlevi çağırmak için kullanılan yöntem ne olursa olsun, bir ok işlevi içindeki "bu" değer aynı kalır. Bu, ok işlevlerini özellikle "bunun" değerinin beklenmedik bir şekilde değiştiği geri aramalar ve olay işleyicileri için faydalı kılar.

Çözüm

Sonuç olarak, JavaScript'in "bu" anahtar kelimesini öğrenmek, gerçek bir JavaScript uzmanı olmak için çok önemli bir adımdır. Bu temel ancak çoğu zaman kafa karıştırıcı kavram, kodunuzu oluşturabilir veya bozabilir ve dilin tüm kapasitesini kullanmanın anahtarıdır. “This” in dört temel bağlaması olan varsayılan bağlama, örtük bağlama, açık bağlama ve yeni bağlama hakkında kapsamlı bir anlayışa sahipseniz, yalnızca daha verimli değil, aynı zamanda daha zarif ve dinamik kod yazabileceksiniz. . Projeleriniz ve gereksinimleriniz değiştikçe büyüyebilen ve gelişebilen esnek, uyarlanabilir ve ölçeklenebilir kod geliştirme yeteneği, yolunuza çıkan her zorluğun üstesinden gelmenizi sağlayacaktır. Öyleyse, "bu" anahtar kelimesini benimseyin, ustalaşın ve gerçek bir JavaScript ninjası olun!