Bu anahtar kelime

this anahtar kelimesi, işlevi çağırır. Diğer bir deyişle, işlevine bağlı olarak işlevi olarak mı, yoksa tek başına mı yoksa tek fonksiyonlu olarak mı çağrıldığı kurucu olarak tanımlar.

Bir fonksiyon çağrıldığında, this anahtar kelimesinin bir örneğini bu işlevi içeren nesneye referans olarak kullanmak için sahneleri ve bunların kapsamında tanımlanan özelliklere ve yöntemlere erişebilmelerini sağlar. this ile çalışmak, bildirilen değişkenle çalışmaya bazı yönlerden benzerdir const ile. Sabit değer gibi this kaldırılamaz ve değeri değiştirilemez yeniden atandığında, ancak this anahtar kelimesinin geçtiği nesnenin yöntemleri ve özellikleri değiştirilebilir.

Genel bağlama

this, bir işlevin veya bir nesnenin bağlamının dışında, globalThis özelliği, en fazla JavaScript ortamları için de geçerlidir. Bir 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 modunun dışında this, bağımsız bir öğe içindeki genel nesneyi de ifade eder. işlevi, çünkü üst Window, etkin bir şekilde "sahibi" olan nesnedir işleyeceğiz.

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 öğe içinde undefined değerine sahiptir işlev:

(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ştirilir. Bazen birden çok ekip üyesiyle "varsayılan bağlama" olarak adlandırılan global bağlama bu eski davranıştan kaynaklanıyor.

Dolaylı bağlama

Bir işlev, bir nesnenin yöntemi olarak çağrıldığında, içindeki this örneği yöntem, yöntemi içeren nesneyi ifade eder ve yöntemleri ve özellikleri vardır:

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

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

this değeri, bir fonksiyonun ve tanımlandığından emin olun. Bunun yerine, this değeri için bağlam: mevcut yürütme bağlamını ele alalım. Bu örnekte yürütme bağlamı myObject nesnesi, myMethod yöntemini çağırıyor. Bu nedenle myObject, değerdir. this için. Önceki anlatım bağlamında bu teknik bir gereklilik gibi görünebilir. ancak this ürününün daha ileri düzey kullanımlarında, unutmayın.

Genel olarak, this özelliğini çevresindeki kodda beklenmeyen şekillerde kullanın. yapın. Bu kuralın istisnası ES5'tir Ok işlevleri.

Ok işlevlerindeki this

Ok işlevlerinde: this, sözcüksel olarak kapsayan bir ortam oluşturun. Bunun anlamı, Bir ok işlevindeki this, söz konusu işlevinthis en yakın kapanış:

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 {...}

Yukarıdaki örnekte myObject.myMethod(), myObject öğesini nesne olarak günlüğe kaydeder sahip olan ancak myObject.myArrowFunction(), globalThis değerini döndürür (veya undefined), çünkü ok işlevinin içindeki this örneği kapsamı en geniş kapsamlı kapsama işaret eder.

Aşağıdaki örnekte, myEnclosingMethod nesnesini içeren bir nesnedir. Şunun içindeki this örneği: ok işlevi artık çevredeki this değerini ifade ediyor ortamına aktarmanızı sağlar. Bu, söz konusu ok işlevini içeren yöntemdir. Çünkü myEnclosingMethod içindeki this değeri, sizden sonra myObject anlamına gelir ok işlevini tanımlayın; ok işlevinin içindeki this, aynı zamanda myObject:

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ışmaya yönelik çoğu kullanım alanını işler. Ancak, Bazen belirli bir yürütmeyi temsil etmek için this değeri gerekebilir bağlamına göre oluşturulan bir belgedir. Biraz demodeyse bu bir açıklayıcı, örneği, setTimeout öğesinin geri çağırma işlevinde this ile çalışıyorsa çünkü bu geri çağırma benzersiz bir yürütme bağlamına sahiptir:

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

setTimeout( myObject.myMethod, 100 );
> undefined

setTimeout ile ilgili bu eksiklik, daha önce diğer özellikler, benzer "kayıp" sorunları Daha önce this için sorun giderildi şunun kapsamında this değerine açık bir referans oluşturarak amaçlanan bağlamı kullanın. Zaman zaman this örneklerinin atandığını görebilirsiniz eskide that, self veya _this gibi tanımlayıcıları kullanan bir değişkene kod tabanları kullanır. Bunlar, bir this değer iletildi.

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

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, bu değer katı kural dışında globalThis ile değiştirilir mod:

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

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

Benzer şekilde, bir işlev this için temel değer verecek şekilde çağrılırsa değeri, söz konusu değer temel değerin sarmalayıcı nesnesi yüksek düzey modu dışında:

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

let myNumber = 10;

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

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

"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 kelimesi, 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, çağrıştırır. Bir etkinlik işleyicinin geri çağırma işlevinin içinde, this anlamına gelir. işleyiciyle ilişkili öğeye referans verir:

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

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

Bir kullanıcı önceki snippet'teki button ile etkileşimde bulunduğunda sonuç <button> öğesini içeren öğe nesnesi:

> Button {}

Etkinlik işleyici geri çağırması olarak bir ok işlevi kullanıldığında, this, en yakındaki yürütme bağlamı tarafından tekrar sağlanır. Üstte düzeyinde ayarlanırsa bir etkinlik işleyici geri çağırma işlevindeki this globalThis (veya yüksek düzey modunda undefined):

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

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

Diğer nesnelerde olduğu gibi, call(), bind() veya apply() kullandığınızda bir etkinlik işleyicinin geri çağırma işlevine referans veren yöntemler (this) ifade eder:

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