Javascript 'this' Anahtar Kelimesi Nedir? Nasıl Kullanılır?

This anahtar kelimesi, herhangi bir nesne yönelimli programlama dilinde özel bir yere sahiptir ve Javascript'te zihin bükücü olmuştur. Söylemeye gerek yok, bu nedenle her yerde görüşmecilerin favori konusu oldu.
Öyleyse, bunun ne anlama geldiğine ve farklı bağlamlarda değerinin ne olduğuna bakalım.

This anahtar kelimesi, bunun kullanıldığı işlevin veya kod bloğunun yürütme bağlamını döndürür. Örneğin, aşağıdaki işlemleri global bağlamda (herhangi bir işlevin dışında) 'use strict' moddan bağımsız olarak gerçekleştirirsek, sonuçları şu şekilde olacaktır:

const name = "XYZ";
console.log(window.name); // Prints XYZ
console.log(this === window) // Prints true

İşlev Bağlam (Function Context)

Bu durumda, bunun değeri fonksiyonun nasıl çağrıldığına bağlıdır. 'use strict' modunda olmadığında:

function f() {
  console.log(this === window)
}

f(); // prints true

'use strict' modunda, bir yürütme bağlamı girilirken bu ayarlanmazsa, bu tanımsız kalır:

function f() {
  'use strict';
  console.log(this===undefined);
}

f();  // prints true

Not: Bunu application() veya call() işlevlerini kullanarak ayarlayabilirsiniz.

const x = {val: 'x-val'};
const val = 'global-val';

function f() {
  console.log(this.val);
}

f() // prints 'global-val'
f.call(x) // prints 'x-val'
f.apply(x) // prints 'x-val'

Kesin olmayan kipte, bunun değeri ( call() ve apply()'nın ilk argümanı) bir nesne değilse, onu bir nesneye dönüştürmek için girişimde bulunulur. 'null' veya 'undefined' global nesne olur. 1 veya 'metin' gibi temel öğeler, bu örnekte ilgili oluşturucular, Number ve String kullanılarak nesne haline gelir.

Sınıf İçeriği (Class Context)

Javascript'teki sınıf sadece sözdizimisel olduğundan, bunun davranışı sınıf ve işlev bağlamlarında benzerdir. Temel olarak, bu sadece bir işlevdir.

Bir sınıfın yapıcı işlevi içinde , bu sadece sıradan bir nesnedir. Sınıfın tüm statik olmayan yöntemleri bu nesnenin prototipine eklenir.

Türetilmiş sınıflarda bu bağlama yoktur . super()Türetilmiş sınıftan fonksiyon çağırmak gerekir. Bunun yaptığı, temel sınıfın yapıcısını aramak ve bu nesneyi bu yapıcıdan atamak.

this = new Base()

Not: Türetilmiş sınıflar, bir nesneyi çağırmadan veya döndürmeden geri dönemez, çünkü bu, ReferenceError'asuper() neden olur.

Bağlama yöntemi (Bind method)

ES5, işlevlerde bağlama yöntemini tanıttı . Çağırma f.bind(), f ile aynı gövde ve kapsamda yeni bir işlev oluşturur. Ancak this, bind() işlevine iletilen ilk bağımsız değişkene bağlıdır. Bu, bind() kullanılarak bağlandıktan sonra değiştirilemez.

function f() {
  console.log(this.val);
}

x = f.bind({val: 'new val'});
x(); // prints 'new val'

y = x.bind({val: 'change val'})
y(); // prints 'new val'

const obj = {val: 1, f:f, x: x, y: y};
obj.f(); // prints 1
obj.x(); // prints 'new val'
obj.y(); // prints 'new val'

Ok Fonksiyonları (Arrow functions)

Ok işlevlerinde, bu, çevreleyen bağlamın this değerini korur . Küresel bağlamda, bu küresel nesne anlamına gelir. Fonksiyon bağlamında, yukarıdaki bölümlerde tartıştığımız gibi belirlenecektir. Örneğin:

const obj= {
  x: function() {
    const y = () => this;
    return y;
  }
};

// calling x with obj context and setting its reference to f
const f = obj.x();

// Calling f would normally return window or global object or //undefined in strict mode
console.log(f() === obj) // true

// However, in this case above behaviour will not be true
const f = obj.x; // we are just taking the function

// Calling f from global context
console.log(f()() === obj) // false, this will equal global