Bu anahtar kelime

this anahtar kelimesi, çağrı sırasında işleve bağlı olan nesnenin değerini ifade eder. Yani değeri, işlevin yöntem olarak, bağımsız işlev olarak veya yapıcı olarak çağrılıp çağrılmadığına bağlı olarak değişir.

Bir işlev çağrıldığında, işlevi içeren nesneye referans olarak sahne arkasında this anahtar kelimesinin bir örneği oluşturulur. Bu örnek, işlevle birlikte tanımlanan özelliklere ve yöntemlere kapsamı dahilinde erişim sağlar. this ile çalışmak, bazı açılardan const ile tanımlanan bir değişkenle çalışmaya benzer. Sabitler gibi this kaldırılamaz ve değeri yeniden atanamaz ancak this anahtar kelimesinin içerdiği nesnenin yöntemleri ve özellikleri değiştirilebilir.

Bir işlevin veya nesnenin bağlamı dışında this, çoğu JavaScript ortamındaki global nesneye referans veren globalThis mülkünü ifade eder. Web tarayıcısında çalışan bir komut dosyasında, genel nesne window nesnesidir:

this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}

Node.js'de globalThis, global nesnesidir:

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}

Katı mod dışında this, bağımsız bir işlev içindeki genel nesneyi de ifade eder. Bunun nedeni, bu işlevlerin "sahibi" olan nesnenin üst öğe Window olmasıdır.

function myFunction() {
    console.log( this );
}
myFunction();
> Window {...}

(function() {
    console.log( this );
}());
> Window {...}

Katı mod kullanıldığında this, bağımsız bir işlev içinde undefined değerine sahiptir:

(function() {
    "use strict";
    console.log( this );
}());
> undefined

Katı modun kullanıma sunulmasından önce, this için null veya undefined değeri, global nesneye referansla değiştiriliyordu. Bu eski davranış nedeniyle bazen genel bağlamanın "varsayılan bağlama" olarak adlandırıldığını görebilirsiniz.

Örtülü bağlama

Bir işlev, bir nesnenin yöntemi olarak çağrıldığında, söz konusu yöntem içindeki this örneği, yöntemi içeren nesneyi ifade eder ve bu nesnenin yanındaki yöntemlere ve özelliklere erişim sağlar:

let myObject = {
    myValue: "This is my string.",
    myMethod() {
            console.log( this.myValue );
    }
};

myObject.myMethod();
> "This is my string."

this değerinin, bir işlevin ve kapsayıcı nesnesinin nasıl tanımlandığına bağlı olduğu görülebilir. Bunun yerine, this değerinin bağlamı, geçerli yürütme bağlamıdır. Bu durumda yürütme bağlamı, myObject nesnesinin myMethod yöntemini çağırmasıdır. Dolayısıyla myObject, this için değerdir. Bu, önceki örnekler bağlamında teknik bir ayrıntı gibi görünebilir ancak this'ün daha gelişmiş kullanımlarında göz önünde bulundurulması gereken önemli bir ayrımdır.

Genel olarak this öğesini, çevreleyen kodun belirli bir yapıya sahip olmasını gerektirmeyecek şekilde kullanın. Bu kuralın istisnası ES5 ok işlevleridir.

Ok işlevlerinde this

Ok işlevlerinde this, söz dizimi açısından kapsayıcı bir ortamda bir bağlama çözümlenir. Bu, ok işlevindeki this değerinin, söz konusu işlevin en yakın kapsayıcı bağlamındaki this değerini ifade ettiği anlamına gelir:

let myObject = {
    myMethod() { console.log( this ); },
    myArrowFunction: () => console.log( this ),
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

myObject.myArrowFunction();
> Window {...}

Önceki örnekte myObject.myMethod(), myObject'u bu yöntemin "sahibi" olan nesne olarak günlüğe kaydeder. Ancak myObject.myArrowFunction(), ok işlevi içindeki this örneğinin en kapsayıcı kapsamı kastettiğinden globalThis (veya undefined) değerini döndürür.

Aşağıdaki örnekte myEnclosingMethod, yürütüldüğünde kendisini içeren nesnede bir ok işlevi oluşturur. Ok işlevi içindeki this örneği artık kapsayıcı ortamdaki this değerini (bu ok işlevini içeren yöntem) ifade eder. myEnclosingMethod içindeki this değerinin myObject'yi ifade etmesi nedeniyle, ok işlevini tanımladıktan sonra ok işlevi içindeki this de myObject'yi ifade eder:

let myObject = {
    myMethod() { console.log( this ); },
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

Açık bağlama

Örtülü bağlama, this ile çalışmayla ilgili çoğu kullanım alanını yönetir. Ancak bazen varsayılan bağlam yerine belirli bir yürütme bağlamını temsil etmek için this değerine ihtiyacınız olabilir. Bu geri çağırma işlevinin benzersiz bir yürütme bağlamı olduğundan, setTimeout işlevinin geri çağırma işlevi içinde this ile çalışmayı gösteren açıklayıcı ve biraz eski bir örnek:

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};
myObject.myMethod();
> "This is my string."

setTimeout( myObject.myMethod, 100 );
> undefined

setTimeout'ün bu eksikliği o zamandan beri diğer özelliklerle giderilmiş olsa da setTimeout'ün "kaybedilmesi" ile ilgili benzer sorunlar, amaçlanan bağlam kapsamında setTimeout değerine açık bir referans oluşturarak daha önce giderilmiştir.thisthis Eski kod tabanlarında that, self veya _this gibi tanımlayıcıların kullanıldığı this örneklerini bir değişkene atadığınızı görebilirsiniz. Bunlar, iletilen bir this değeri içeren değişkenler için yaygın tanımlayıcı kurallarıdır.

call(), bind() veya apply() yöntemlerini kullanarak bir işlevi çağırdığınızda this, çağrılan nesneye açıkça referans verir:

let myFunction = function() {
    console.log( this.myValue );
}

let myObject = {
   "myValue" : "This is my string."
 };

myFunction.call( myObject );
> "This is my string."
var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};

setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."

Açık bağlama, dolaylı bağlama tarafından sağlanan this değerini geçersiz kılar.

let myObject = {
    "myValue" : "This string sits alongside myMethod.",
    myMethod() {
        console.log( this.myValue );
    }
};
let myOtherObject = {
    "myValue" : "This is a string in another object entirely.",
};

myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."

Bir işlev, this değerini undefined veya null olarak ayarlayacak şekilde çağrılırsa bu değer, katı mod dışında globalThis ile değiştirilir:

let myFunction = function() {
    console.log( this );
}

myFunction.call( null );
> Window {...}

Benzer şekilde, bir işlev this için ilkel bir değer döndürecek şekilde çağrılırsa bu değer, sıkı mod dışında ilkel değerin sarmalayıcı nesnesi ile değiştirilir:

let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> Number { 10 }

Katı modda, ilkel, null veya undefined değeri olsa bile iletilen this değeri hiçbir şekilde bir nesneye zorlanmaz:

"use strict";
let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

new bağlama

new anahtar kelimesi kullanılarak bir sınıf yapıcı olarak kullanıldığında this, yeni oluşturulan örneği ifade eder:

class MyClass {
    myString;
    constructor() {
        this.myString = "My string.";
    }
    logThis() {
        console.log( this );
    }
}
const thisClass = new MyClass();

thisClass.logThis();
> Object { myString: "My string." }

Benzer şekilde, this kullanılarak çağrılan bir kurucu işlev içindeki this değeri, oluşturulmakta olan nesneyi ifade eder:new

function MyFunction() {
  this.myString = "My string.";
  this.logThis = function() {
    console.log( this );
  }
}
const myObject = new MyFunction();

myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }

Etkinlik işleyici bağlama

Etkinlik işleyicileri bağlamında this değerinin değeri, etkinliği çağıran nesneye referans verir. Bir etkinlik işleyicinin geri çağırma işlevinde, this işleyiciyle ilişkili öğeyi referanslar:

let button = document.querySelector( "button" );

button.addEventListener( "click", function( event ) { console.log( this ); } );

Kullanıcı, önceki snippet'teki button ile etkileşime geçtiğinde sonuç, <button>'u içeren öğe nesnesi olur:

> Button {}

Etkinlik dinleyici geri çağırma işlevi olarak bir ok işlevi kullanıldığında this değerini en yakın kapsayıcı yürütme bağlamı sağlar. Üst düzeyde, bir etkinlik işleyici geri çağırma işlevindeki this, globalThis anlamına gelir:

let button = document.querySelector( "button" );

button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined

Diğer tüm nesnelerde olduğu gibi, bir etkinlik işleyicinin geri arama işlevine referans vermek için call(), bind() veya apply() yöntemlerini kullandığınızda this, nesneye açıkça referans verir:

let button = document.querySelector( "button" );
let myObject = {
    "myValue" : true
};
function handleClick() {
    console.log( this );
}

button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }

Öğrendiklerinizi test etme

Web tarayıcısında çalışan bir komut dosyası için this, bir işlevin dışında veya bir nesnenin bağlamında kullanıldığında hangi genel nesneyi ifade eder?

undefined nesnesi
browser nesnesi
window nesnesi