JavaScript get ve set kullanımı

ECMAScript 5 (2009) Getter ve Setters'ı tanıttı. JavaScript'te erişimci özellikleri, bir nesnenin değerini alan veya ayarlayan tekniklerdir. Bunun için şu iki özellik kullanıyoruz:


Getters ve Setterlerin Kullanımı


Alıcı ve Ayarlayıcı olarak adlandırılan yöntemler, erişimci özelliklerini temsil eder. Get ve Set ile belirtilir ve aşağıda gösterildiği gibi bir nesne değişmezinin içinde ayarlanır:

let obj = {

  get propName() {

    // getter, obj.propName kimliği alındığında yürütülen kod

  set propName(value) {

    // setter, obj.propName = değeri ayarlanırken yürütülen kod
  }
};

JavaScript Getter (Anahtar Kelime)


Bu örnek, lang mülkün get değeri için language değerini almak için aşağıdaki gibi bir özellik kullanılır.


// Create an object:
var person = {
  firstName: "Ahmet",
  lastName : "Mert",
  language : "Tr",
  get lang() {
    return this.language;
  }
};

// Bir alıcı kullanarak nesnedeki verileri görüntüler:
document.getElementById("demo").innerHTML = person.lang;

ÇIKTI:

Tr

JavaScript Ayarlayıcı (Küme Anahtar Kelimesi)


Bu örnek, lang özelliğinin languagedeğerini set(ayarlamak) için bir özelliği kullanır.


var person = {
  firstName: "Ahmet",
  lastName : "Mert",
  language : " ",
  set lang(value) {
    this.language = value;
  }
};
// Lang özelliğine değer ata

person.lang = "Tr";

document.getElementById("demo").innerHTML = person.language;

ÇIKTI:

Tr

JavaScript Get ve Set, Fonksiyonmu?


Bu iki örnek arasındaki farklar nelerdir?

ÖRNEK 1: Aşağıdaki gibi bir örnek var:


var person = {
  firstName: "Ahmet",
  lastName : "Mert",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();

ÇIKTI:

Ahmet Mert

ÖRNEK 2: Aşağıdaki gibi bir örnek var:


ar person = {
  firstName: "Ahmet",
  lastName : "Mert",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

ÇIKTI:

Ahmet Mert

Örnek 1 fullName'e bir fonksiyon olarak erişim : person.fullName().

Örnek 2 fullName'e bir özellik olarak erişim : person.fullName.

JavaScript, Alıcıları ve Ayarlayıcıları kullanırken daha iyi veri kalitesi sağlayabilir.

Neden Getters ve Setters Kullanılıyor?


Object.defineProperty()


Object.defineProperty(): Bir nesneye yeni bir özellik ekler veya varolan bir özelliği değiştirir.

Sözdizimi:

Object.defineProperty(obj, prop, descriptor);

obj: Yeni bir özellik eklemek veya var olanı değiştirmek istediğiniz nesne.

prop: Özelliğin adını içeren bir dize.

descriptor: Bir tanımlayıcı nesne. Özellikler nitelik adlarına karşılık tanıtıcı:

Örnek:


var user = {};

Object.defineProperty(user, "age", {

  writable: false,
  value: 25
});
 
alert(user.age);   // 25

//Değeri dışardan değiştirmek istiyoruz izin vermiyor.

user.age = 10;

alert(user.age);   // 25

Her zamanki gibi oluşturulan bir özellik olağandışı özelliklere sahip değildir. Üzerine yazılabilir, silinebilir ve for..in döngüde veriler görülebilir silinemeyen bir özellik oluşturalım:


var obj = {
	val1: 10, 
}

// DefineProperty aracılığıyla bir özellik oluştur
Object.defineProperty(obj, 'val2', {
	value: 10,
	
});

alert(obj.val1) //10
alert(obj.val2) //10

delete obj.val1
delete obj.val2

alert(obj.val1) //undefined
alert(obj.val2) //10

Bu örnekte, val1 özelliği olağan şekilde oluşturulmuş ve Dışarıdan silindikten sonra silinmiştir. Ancak val2'nin Dışarıdan silinmesine izin verilmez.

For..in ile görünmeyen bir özellik oluşturalım:


var obj = {
	val1: 10, 
	name: 'user',
}

Object.defineProperty(obj, 'val2', {
	value: 20,
	number: false //For..in Döngüde görülmez.
});

for (var key in obj) {
	document.write('obj.' + key + ': ' + obj[key] + '');
}
document.write('<hr>obj.val2: ' + obj.val2); 

ÇIKTI:

obj.val1: 10
obj.name: user
------------------
obj.val2: 20	

Aşağıda ki örnekte, genişlik ve çevre özelliklerine sahip bir kare nesnesi oluşturacağız. Bu durumda, çevre değeri açıkça belirtilmeyecek, genişlik temelinde belirlenecektir:


var square = {
	size: 5,
}
Object.defineProperty(square, 'p', {
	get: function() {
		return this.size * 4;
	},
	set: function(p) 
	{
		this.size = p / 4;
	}
});

alert(square.size) //5
alert(square.p) //20

square.size = 10;

alert(square.size) //10
alert(square.p) //40

square.p = 100

alert(square.size) //25
alert(square.p) //100

Bu örnekte, değeri her zaman size * 4 olan 'p' özelliği oluşturuldu. Başlangıçta size=5 ve p=20 idi. Sonra sadece 'size' değiştirdik, ama 'p' de değişti. Bu nedenle, belirli bir işleve göre bir değer döndüren ve ayarlayabilen özellikler oluşturabilirsiniz.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

2203

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
  • CSS YATAY MENÜ YAPIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.