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.
Genel bağlama
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.this
this
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
nesnesibrowser
nesnesiwindow
nesnesi