Bu anahtar kelime

this anahtar kelimesi, işlev çağrısı sırasında işleve bağlı olan nesnenin değerini belirtir. Diğer bir deyişle, değer, bir işlevin yöntem, bağımsız fonksiyon veya kurucu olarak çağrılmasına bağlı olarak farklılık gösterir.

Bir işlev çağrıldığında, işlevi içeren nesneye referans olarak arka planda this anahtar kelimesinin bir örneğini oluşturur. Böylece, bu işlevin kapsamı dahilinde bu anahtar kelimeyle birlikte tanımlanan özelliklere ve yöntemlere erişim sağlar. this ile çalışmak, bazı yönlerden const ile tanımlanan bir değişkenle çalışmaya benzer. Sabit değerler 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.

Genel bağlama

Bir işlevin veya bir nesnenin bağlamının dışında kalan this, çoğu JavaScript ortamında global nesneye başvuru olan globalThis özelliğini belirtir. Web tarayıcısında çalışan bir komut dosyası bağlamında global 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] {
...
}

Yüksek düzey modun dışında, this bağımsız bir işlevin içindeki genel nesneye de işaret eder. Çünkü üst Window, bu işlevlere etkili şekilde "sahip olan" nesnedir.

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

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

Yüksek düzey modu kullanılırken this bağımsız bir işlev içinde undefined değerine sahiptir:

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

Yüksek düzey modu kullanıma sunulmadan önce, this için bir null veya undefined değeri global nesneye bir referansla değiştiriliyordu. Bu eski davranış nedeniyle bazen genel bağlamaya "varsayılan bağlama" adı verilir.

Örtülü bağlama

Bir işlev, bir nesnenin yöntemi olarak çağrıldığında, bu yöntemin içindeki this örneği, yöntemi içeren nesneye atıfta bulunarak yan yana bulunan 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ğeri, bir işlevin ve onu çevreleyen nesnenin nasıl tanımlandığına bağlı gibi görünebilir. Bunun yerine, this değerinin bağlamı, mevcut yürütme bağlamıdır. Bu durumda, yürütme bağlamı myObject nesnesinin myMethod yöntemini çağırdığıdır. Bu nedenle, this için myObject değeridir. Bu, önceki örnekler bağlamında bir teknik gibi görünebilir, ancak this daha ileri düzey kullanımları için unutulmaması gereken önemli bir ayrımdır.

Genel olarak this, çevresindeki kodun belirli bir yapıya sahip olmasını beklemeyen şekillerde kullanın. Bu kuralın istisnası, ES5 Ok işlevleridir.

Ok işlevlerinde this

Ok işlevlerinde this, sözlüğe sahip bir ortamda bir bağlamaya çözümlenir. Yani bir ok işlevindeki this, işlevin en yakın bağlamındaki this değerini belirtir:

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 söz konusu yöntemin "sahibi" olan nesne olarak günlüğe kaydedilir ancak ok işlevi içindeki this örneği bunun yerine en yüksek kapsayıcı kapsama başvurduğundan myObject.myArrowFunction() globalThis (veya undefined) değerini döndürür.

Aşağıdaki örnekte myEnclosingMethod, yürütüldüğünde onu içeren nesne üzerinde bir ok işlevi oluşturur. Ok işlevi içindeki this örneği, artık çevreleyen ortam içindeki this değerine işaret eder. Bu, söz konusu ok işlevini içeren yöntemdir. myEnclosingMethod içindeki this değeri myObject anlamına gelir. Bu nedenle, ok işlevini tanımlamanızın ardından ok işlevindeki this, myObject anlamına da gelir:

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

Dolaylı bağlama, this ile çalışmaya ilişkin çoğu kullanım alanını yönetir. Ancak bazen varsayılan bağlamı değil, belirli bir yürütme bağlamını temsil etmesi için this değerine ihtiyaç duyabilirsiniz. Biraz güncel olmayan bir örnek, bu geri çağırma benzersiz yürütme bağlamına sahip olduğundan setTimeout öğesinin geri çağırma işlevi içinde this ile çalışmaktadır:

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

setTimeout( myObject.myMethod, 100 );
> undefined

setTimeout ürününün bu özel eksikliği diğer özellikler tarafından ele alınmış olsa da, this "kaybetmeyle" ilgili benzer sorunlar hedeflenen bağlam kapsamında this değerine açık bir şekilde atıfta bulunularak ele alınmıştı. Zaman zaman eski kod tabanlarında that, self veya _this gibi tanımlayıcıları kullanarak bir değişkene this örneğinin atandığını görebilirsiniz. Bunlar, başarılı 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, örtülü 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 öğesine temel değer verecek şekilde çağrılırsa bu değer, katı modun dışında temel değerin sarmalayıcı nesnesiyle değiştirilir:

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

let myNumber = 10;

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

Yüksek düzey modunda, iletilen this değeri temel, null veya undefined değeri olsa bile hiçbir şekilde nesneye zorlanmaz:

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

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

new bağlama

Bir class, new anahtar kelimesini kullanan bir kurucu 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, new kullanılarak çağrılan bir kurucu işlevin içindeki this değeri, oluşturulan nesneyi ifade eder:

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şleyiciler bağlamında this değeri, kendisini çağıran nesneye başvuruda bulunur. Bir etkinlik işleyicinin geri çağırma işlevinin içinde olması, this ürününün işleyiciyle ilişkilendirilen öğeye başvuruda bulunduğu anlamına gelir:

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

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

Bir kullanıcı, önceki snippet'te yer alan button ile etkileşime geçtiğinde sonuç, <button> öğesinin kendisini içeren öğe nesnesi olur:

> Button {}

Etkinlik işleyici geri çağırma olarak bir ok işlevi kullanıldığında, this değeri tekrar en yakın yürütme bağlamı tarafından sağlanır. En üst düzeyde, bir etkinlik işleyici geri çağırma işlevi içindeki this değeri globalThis (veya katı kurallı modda undefined) olur:

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

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

Diğer nesnelerde olduğu gibi, bir etkinlik işleyicinin geri çağırma işlevine başvuruda bulunmak için call(), bind() veya apply() yöntemlerini kullandığınızda this nesneye açık bir şekilde başvurur:

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

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

Öğrendiklerinizi sınayın

Web tarayıcısında çalışan bir komut dosyası için this bir işlevin veya bir nesnenin bağlamının dışında kullanıldığında referans verdiği global nesne nedir?

window nesnesi

browser nesnesi

undefined nesnesi