JavaScript Object Accessors
موصّل جافا سكريبت (Getters and Setters)
قدم ECMAScript 5 (ES5 2009) Getter and Setters.
تتيح لك أدوات الاستلام والمحددات تحديد موصّلات الكائنات (الخصائص المحسوبة).
JavaScript Getter (الحصول على الكلمة الرئيسية)
يستخدم هذا المثال lang
خاصية get
لقيمة language
الخاصية.
مثال
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
واضع جافا سكريبت (الكلمة الرئيسية المحددة)
يستخدم هذا المثال lang
خاصية set
لقيمة language
الخاصية.
مثال
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
وظيفة JavaScript أو Getter؟
ما هو الفرق بين هذين المثالين؟
مثال 1
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();
مثال 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
مثال 1 الوصول إلى fullName كدالة: person.fullName ().
مثال 2 الوصول إلى fullName كخاصية: person.fullName.
يوفر المثال الثاني بناء جملة أبسط.
جودة البيانات
يمكن لـ JavaScript تأمين جودة بيانات أفضل عند استخدام أدوات التوثيق والمحددات.
باستخدام lang
الخاصية ، في هذا المثال ، يتم إرجاع قيمة language
الخاصية بأحرف كبيرة:
مثال
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
باستخدام lang
الخاصية ، في هذا المثال ، يخزن قيمة كبيرة في language
الخاصية:
مثال
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
لماذا استخدام Getters و Setters؟
- يعطي بناء جملة أبسط
- يسمح ببناء الجملة المتساوي للخصائص والطرق
- يمكنه تأمين جودة بيانات أفضل
- إنه مفيد للقيام بالأشياء خلف الكواليس
Object.defineProperty ()
يمكن Object.defineProperty()
أيضًا استخدام الطريقة لإضافة Getters و Setters:
مثال مضاد
// Define object
const obj = {counter : 0};
// Define setters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (value) {this.counter -= value;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;