Javascript 6 | This Keyword And Bind
this javascript’teki en çok kafa karıştıran keyword’lerden biridir. this neleri refer eder bol örnekle incelemeye çalışalım.
Object İçerisindeki Methoddaki This
Örnek olarak bir objectin içerisinde method var diyelim. Ve bu method içerisinde ise this kullanılmış ise bu this methodun sahibi olan objecti refer eder.
Örn:
Örneğimizde this person objectine refer eder. this.firstName dediğimizde person içerisindeki firstName değeri elimize gelir.
Çıktı : person.fullName — John Doe
This — Alone
This yalnız kullanıldıysa yani bir method bir object vb. içerisinde değil ise
this global objecti(window objesini) refer eder. Strict mode’una alsak bile
hala global objecti gösterir.
Örneğimizdeki x değişkeni window objesini göstermektedir.
This — In Function
Javascript de default olarak methoda this bind edilir. Bu örnekte de this window objesidir. Ve bu yüzden methoda this bind edilmiştir. Method içerisinde this yazdırdığımızda elimize window objesi gelecektir.
This — In Function(Strict Mode)
Javascript strict mode’da default binding’e izin vermez. Doğal olarak methoda herhangi bir şey bind edilmediği için this undefineddır.
This — Event Handlers
Event handler içerisindeki this eventi içerisine alan html elementini refer eder.
<button onclick=”this.style.display=’none’”>Click to Remove Me!</button>
NOT :
function Foo() {
this.bla = 1; // global nesnenin özelliğini değiştirir
}
Foo();
JavaScript’te this ‘in çalışma şeklinden dolayı this ‘in değeri global nesne olacaktır. Yani global olarak bir bla değişkeni tanımlanmış ise bla değişkenin değerini değiştirmiş olur.
new Foo() diyerek kullanırsak foo nesnesinin içerisindeki bla yı kullanmış oluruz.
Şimdi ise daha fazla örnek inceleyerek devam edelim.
Çıktı :
Person Objesi
25
Buradaki this person objemizin ta kendisi.
Ancak person içerisinde herhangi bir method içerisine this’i koymadan yazdırırsak bize window objesini verir.
Çünkü bizim objemizin herhangi bir functionının içerisinde değil. Bu durumda elimize window objesi gelir.
Çıktı :
Window Objesi
Undefined
Yukarıdaki kod bloğunda bind this dediğimizde window objesini içeri vermiş olduk.
Çıktı :
Window Objesi
Undefined
Buradan çıkardığımız sonuç : Arrow function’larda aynen yukarıdaki örnek gibi çalışıyor. Arrow olan function’a function keyword’unu ekler ve bind ile bağlar .Yani arrow function bizim için aşağıdaki fonksiyonu ;
Bu fonksiyona ;
çevirir. Böylece this dediğimizde window objesi elimize gelir. Bu karışıklığa sebep olabilir dikkat etmek gerekir.
Bind Daha Iyi Anlamak
Çıktı :
Xhr Onload İçi : XMLHttpRequest objesi
Error : status of undefined
Burada get() methodu içerisinde this dediğimizde Request sınıfının bir fonksiyonu içerisinde çağırdığımız için elimize Request objesi geliyor.
Daha sonra this.xhr.onload() methodu içerisinde this dediğimizde ise XHR objesinin içerisindeki bir method içerisinde this yaptığımız için XHR objesi elimize geliyor ve patlıyoruz.
Aslında XMLHttpRequest de bir sınıf ve biz onun içerisindeki bir methodu çağırıp o method içerisinde this yazınca XMLHttpRequest objesi geliyor elimize. Buradaki callback’i de gözden kaçırmamak gerek.
Peki bu sorunu nasıl düzeltebiliriz ?
1) İlk başta Request objesi olan this ‘i bir değişkene atayıp daha sonra XHR onload() methodu içerisinde onu kullanabiliriz.
2) Hata atan yerde this → xhr objesini gösterdiği için this.xhr() yerine this yazarak direk xhr objesi üzerinden status’e ulaşabiliriz.
3) bind() ile method içerisine Request objemizi this() kullanarak verebiliriz.
4) Yada 3 te yaptığımız işlemin aynısını yani o bind işlemini arrow function
yaptığı için arrow function kullanırsakta sorunumuz çözülür.
This — React Component Example
Çıktı :
Render’ın içerisinde this’i yazdırdığımızda bize app objesini verir. Ancak function’lar bağlı değildir. Yani handleClick functionın içerisinde thisi yazdırırsak bize null değeri gelir. Bunun içerisine de app objesini vermek için bind ,call veya apply işlemini kullanırız.
Yani aslında react ekranlarımızda methodlarımızı bind ile bağlamamızın sebebi budur. React’de functionlarımız herhangi bir scope’ bağlı olmadıkları için bu sorun ortaya çıkıyor.
Makalelerimin tamamına erişmek isteyen arkadaşlar için hepsinin linkinin bulunduğu bir tutorial hazırladım. Aşağıdaki linkte paylaşıyorum.
https://medium.com/@omercelikceng/javascript-makalelerimin-tamam%C4%B1-45a71ac3b386
