Javascript this Anahtar Kelimesi

this kelimesi nesne yönelimli programlamada önemli bir yere sahiptir.

Javascript'te de nesneleri kullanırken sık sık this kullanımına başvururuz.

<script>
var kisi= {
  ad: "Zafer",
  soyad : "Yıldız",
  yas       : 26,
  fullName : isimsoyisim() {
    return this.ad+ " " + this.soyad;
  }
};
</script>

this Nedir ?

Javascript this kelimesi ait olduğu nesneyi ifade eder.

Nerede kullanıldığına bağlı olarak farklı değerler alabilir;

- Bir metot içerisinde kullanıldığı zaman ait olduğu nesneyi temsil eder.

- Tek başına kullanıldığı zaman global bir nesneyi temsil eder.

- Bir fonksiyon içerisinde kullanılırsa global bir nesneyi ifade eder.

- Eğer katı modda bir fonksiyonun içerisinde kullanılırsa undefined yani tanımsız değerini döndürür.

- Bir olayda (tıklama, çift tıklama gibi) olayın gerçekleştiği elementi temsil eder.

Metot İçinde this Kullanımı

Bir nesnenin metodunda this şu şekilde kullanılır. Nesne içinde tanımlanan özelliklere this.ozellikAdi şeklinde ulaşırız.

<script>
isimsoyisim: function() {
  return this.ad+ " " + this.soyad;
}
</script>

Global this Kullanımı

this anahtar kelimesi tek başına kullanıldığında global bir nesneyi temsil eder.

<div id="deneme"></div>
<script>
var x = this;
document.getElementById("deneme").innerHTML = x;
// Çıktı: [object Window]
</script>

Katı modda da this nesnesi window nesnesini temsil eder.

<script>
"use strict";
var x = this;
console.log(x);
//Çıktı : [object Window]
</script>


Fonksiyon İçinde this Kullanımı

Fonksiyon içinde this kullanıldığı zaman varsayılan window nesnesini temsil edecektir.

<p id="demo"></p> 
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
// Çıktı: [object Window]
</script>

Katı Modda Fonksiyon İçinde this Kulanımı

Katı mod fonksiyon içerissinden this'in tek başına kullanımına izin vermez. Bu nedenle this anahtar kelimesi undefined değerini alır.

<p id="deneme"></p>


<script>
"use strict";
document.getElementById("deneme").innerHTML = rastgele();
function rastgele() {
  return this;
}
</script>

Olaylarda (Event) this Kullanımı

Olaylarda this anahtar kelimesi olayın kullanıldığı elementi temsil eder.

<button onclick="this.style.display='none'">Tıkla ve buton yok olsun.</button>

Yukardaki kodu çalıştırdığınız zaman eğer butona tıklarsanız elementin yok olduğunu göreceksiniz.

Nesnelerde this Kullanımı

Nesne içinde this anahtar kelimesi metotlarda kullanılır. etot içindeki özelliklere ve diğer metotlara erişmek için this anahtar kelimesine ihtiyacımız vardır.

<script>
var person = {
  ad: "Zafer",
 soyad:"Yıldız",
  id       : 5566,
  isimsoyisim:function(){
return this.ad+" "+this.soyad
}
 
};
</script>

Explicit Fonksiyon Bağlama

call() ve apply() fonksiyonları önceden tanımlanmış Javascript fonksiyonlarıdır.

Her ikisi de bağımsız değişken olarak başka bir nesneyle bir nesne yöntemini çağırmak için kullanılabilir.

Bunu bir örnek üzerinden anlatmak daha doğru olacaktır.

<script>
var kisi1= {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var kisi2= {
  firstName:"Zafer",
  lastName: "Yıldız",
}
person1.fullName.call(person2);
</script>

Yukardaki kod bloğu şöyle çalışır. kisi1 adında bir nesne oluşturulur. İçinde bir fonksiyon tanımlanır ve this kelimesi ile firstName ve Lastname değerlerini geri döndürür. Ama gördüğünüz gibi kisi1 nesnesi üzerinde firstName ve lastName değerleri bulunmamaktadır. kisi2 nesnesinde ise vardır. Bu yüzden kisi1 nesnesi fullname fonksiyonunu kisi2 nesnesi içerisindeki değerlerden alır. call() bir nevi bağlama işlemi yapmaktadır.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi