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
nesnesibrowser
nesnesiundefined
nesnesi