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:

• get : özellik değerini almak için bir Alıcı yöntemini karakterize etmek için kullanılır.
• set : özellik değerini ayarlamak için bir Ayarlayıcı yöntemini karakterize etmek için kullanılır.

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:

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:

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:

Ö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:

Ö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?

• Daha basit sözdizimi sağlar.
• Ayrıca, özellikler ve yöntemler için eşit sözdizimine izin verir.
• Ve daha iyi veri kalitesini güvence altına alabilir.
• Bu nedenle, sahne arkası şeyler yapmak için kullanışlıdır.

Object.defineProperty()

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

Sözdizimi:

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.