168 lines
6.0 KiB
Markdown
168 lines
6.0 KiB
Markdown
---
|
|
title: Classes
|
|
localeTitle: الطبقات
|
|
---
|
|
## الطبقات
|
|
|
|
جافا سكريبت لا تملك مفهوم الطبقات بطبيعتها.
|
|
|
|
ولكن يمكننا محاكاة وظائف الطبقة عن طريق الاستفادة من الطبيعة النموذجية لجافا سكريبت.
|
|
|
|
تفترض هذه المقالة أن لديك فهم أساسي [للنماذج الأولية](/src/pages/javascript/prototypes/index.md) .
|
|
|
|
من أجل الوضوح ، دعونا نفترض أننا نريد إنشاء فصل يمكنه القيام بما يلي
|
|
|
|
`var p = new Person('James','Bond'); // create a new instance of Person class
|
|
p.log() // Output: 'I am James Bond' // Accessing a function in the class
|
|
// Using setters and getters
|
|
p.profession = 'spy'
|
|
p.profession // output: James bond is a spy
|
|
`
|
|
|
|
### استخدام الكلمة الرئيسية للفئة
|
|
|
|
كما هو الحال في أي لغة برمجة أخرى ، يمكنك الآن استخدام الكلمة الأساسية `class` لإنشاء فصل دراسي.
|
|
|
|
هذا غير مدعوم في المتصفحات القديمة وتم تقديمه في ECMAScript 2015.
|
|
|
|
`class Person {
|
|
constructor(firstName, lastName) {
|
|
this._firstName = firstName;
|
|
this._lastName = lastName;
|
|
}
|
|
|
|
log() {
|
|
console.log('I am', this._firstName, this._lastName);
|
|
}
|
|
|
|
// setters
|
|
set profession(val) {
|
|
this._profession = val;
|
|
}
|
|
// getters
|
|
get profession() {
|
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
|
}
|
|
|
|
}
|
|
`
|
|
|
|
|
|
|
|
|
|
`class` هي مجرد السكر النحوي على نموذج الوراثة القائم على النموذج الأولي لجافا سكريبت.
|
|
|
|
بشكل عام ، يستخدم المبرمجون الطرق التالية لإنشاء فصل دراسي في JavaScript.
|
|
|
|
### استخدام أساليب مضافة إلى النماذج الأولية:
|
|
|
|
هنا ، تتم إضافة جميع الأساليب إلى النموذج الأولي
|
|
|
|
`function Person(firstName, lastName) {
|
|
this._firstName = firstName;
|
|
this._lastName = lastName;
|
|
}
|
|
|
|
Person.prototype.log = function() {
|
|
console.log('I am', this._firstName, this._lastName);
|
|
}
|
|
|
|
// This line adds getters and setters for the profession object. Note that in general you could just write your own get and set functions like the 'log' method above.
|
|
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
|
|
Object.defineProperty(Person.prototype, 'profession', {
|
|
set: function(val) {
|
|
this._profession = val;
|
|
},
|
|
get: function() {
|
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
|
}
|
|
})
|
|
`
|
|
|
|
يمكنك أيضا كتابة أساليب النموذج الأولي على وظيفة `Person` النحو التالي
|
|
|
|
`Person.prototype = {
|
|
log: function() {
|
|
console.log('I am ', this._firstName, this._lastName);
|
|
}
|
|
set profession(val) {
|
|
this._profession = val;
|
|
}
|
|
|
|
get profession() {
|
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
|
}
|
|
|
|
}
|
|
`
|
|
|
|
### استخدام أساليب مضافة داخليا
|
|
|
|
هنا تضاف الأساليب داخليا بدلا من النموذج الأولي
|
|
|
|
`function Person(firstName, lastName) {
|
|
this._firstName = firstName;
|
|
this._lastName = lastName;
|
|
|
|
this.log = function() {
|
|
console.log('I am ', this._firstName, this._lastName);
|
|
}
|
|
|
|
Object.defineProperty(this, 'profession', {
|
|
set: function(val) {
|
|
this._profession = val;
|
|
},
|
|
get: function() {
|
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
|
}
|
|
})
|
|
}
|
|
`
|
|
|
|
### إخفاء التفاصيل في فصول بالرموز
|
|
|
|
في أغلب الأحيان يجب إخفاء بعض الخصائص والأساليب لمنع الوصول من خارج الوظيفة. مع الفئات ، للحصول على هذه الوظيفة ، إحدى الطرق للقيام بذلك باستخدام الرموز. Symbol هو نوع جديد من جافا سكريبت المدمج ، والذي يمكن استدعاؤه لإعطاء قيمة رمزية جديدة. كل رمز فريد ويمكن استخدامه كمفتاح على الكائن. لذا ، فإن إحدى حالات استخدام الرموز هي أنه يمكنك إضافة شيء إلى كائن قد لا تمتلكه ، وقد لا ترغب في التصادم مع أي مفاتيح أخرى للعنصر ، لذلك ، فإن إنشاء كائن جديد وإضافة خاصية على هذا الكائن باستخدام الرمز هو الأكثر أمانًا . أيضا ، عندما يتم إضافة قيمة الرمز إلى كائن ؛ لا أحد آخر يعرف كيفية الحصول عليه.
|
|
|
|
`class Person {
|
|
constructor(firstName, lastName) {
|
|
this._firstName = firstName;
|
|
this._lastName = lastName;
|
|
}
|
|
|
|
log() {
|
|
console.log('I am', this._firstName, this._lastName);
|
|
}
|
|
|
|
// setters
|
|
set profession(val) {
|
|
this._profession = val;
|
|
}
|
|
// getters
|
|
get profession() {
|
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
|
}
|
|
// With the above code, even though we can access the properties outside the function to change their content what if we don't want that.
|
|
// Symbols come to rescue.
|
|
let s_firstname = new Symbol();
|
|
|
|
class Person {
|
|
constructor(firstName, lastName) {
|
|
this[s_firstName] = firstName;
|
|
this._lastName = lastName;
|
|
}
|
|
|
|
log() {
|
|
console.log('I am', this._firstName, this._lastName);
|
|
}
|
|
|
|
// setters
|
|
set profession(val) {
|
|
this._profession = val;
|
|
}
|
|
// getters
|
|
get profession() {
|
|
console.log(this[s_firstName], this._lastName, 'is a', this._profession);
|
|
}
|
|
`
|
|
|
|
#### معلومات اكثر: |