const person = {
age:25,
tellAge : function() {
console.log(this);
console.log(this.age);
}
}
person.tellAge();

Çı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 içerisinde değil. Bu durumda elimize window objesi gelir.

const person = {
age:25,
tellAge : function()  {
console.log(this);
console.log(this.age);
}.bind(this)
};
person.tellAge();

Çıktı : Window Objesi
Undefined

Yukarıdaki kod bloğunda bind this dediğimizde window objesini içeri vermiş olduk.

const person = {
age:25,
tellAge : () => {
console.log(this);
console.log(this.age);
}
}
person.tellAge();

Çı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ünü ekler ve bind ile bağlar .Yani arrow function bizim için aşağıdaki fonksiyonu ;

tellAge : () => {
console.log(this);
console.log(this.age);
}

Bu fonksiyona ;

tellAge : function() {
console.log(this);
console.log(this.age);
}.bind(this);

çevirir. Böylece this dediğimizde window objesi elimize gelir. Bu karışıklığa sebep olabilir dikkat etmek gerekir.

Bind Daha Iyı Anlamak

class Request {

constructor() {
this.xhr = new XMLHttpRequest();
}

get(url) {
this.xhr.open(“GET”,url);
this.xhr.onload = function() {
console.log(“Xhr Onload İçi : “this);
if(this.xhr.status===200) { // HATALI DURUM
console.log(this.xhr.responseText);
}
}
this.xhr.send();
}
}
const request = new Request();
request.get(“https://……”);

Çı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.

class Request {

constructor() {
this.xhr = new XMLHttpRequest();
}

get(url) {
this.xhr.open(“GET”,url);
const temp = this;
this.xhr.onload = function() {
//console.log(“Xhr Onload İçi : “this);
if(temp.xhr.status===200) {
console.log(this.xhr.responseText);
}

}
this.xhr.send();
}
}
const request = new Request();
request.get(“https://……”);

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.

class Request {

constructor() {
this.xhr = new XMLHttpRequest();
}

get(url) {
this.xhr.open(“GET”,url);

this.xhr.onload = function() {
//console.log(“Xhr Onload İçi : “this);
if(this.status===200) {
console.log(this.responseText);
}
}
this.xhr.send();
}
}
const request = new Request();
request.get(“https://……”);

3) bind ile method içerisine Request objemizi this kullanarak verebiliriz.

class Request {

constructor() {
this.xhr = new XMLHttpRequest();
}

get(url) {
this.xhr.open(“GET”,url);

this.xhr.onload = function() {
console.log(“Xhr Onload İçi : “this);
if(this.xhr.status===200) {
console.log(this.xhr.responseText);
}
}.bind(this);

this.xhr.send();
}
}
const request = new Request();
request.get(“https://……”);

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.

class Request {

constructor() {
this.xhr = new XMLHttpRequest();
}

get(url) {
this.xhr.open(“GET”,url);

this.xhr.onload = () => {
console.log(“Xhr Onload İçi : “this);
if(this.xhr.status===200) {
console.log(this.xhr.responseText);
}
}

this.xhr.send();
}
}
const request = new Request();
request.get(“https://……”);