اذهب إلى المحتوى
  • 0

ما الفرق بين Class.hello و Class.prototype.hello في البرمجة الكائنية OOP في JavaScript؟

Emad Saif

السؤال

يمكن إضافة توابع إلى أي صنف من خلال الطرق التالية:

class User {}

User.sayHi = function () { /* ... */ }
User.prototype.sayHi = function () { /* ... */ }

هل يوجد أي إختلاف بين تلك الطرق أم أنها مجرد إختصار للأكواد؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

نعم يوجد اختلاف وهو ان الـ method الأولى هي static methods 

User.sayHi = function () { /* ... */ }

فتعطي الوظيفة للـ class المسمى User فقط  

 User.sayHi();  // will work fine 

بينما لن تورث هذه الـ method للأبناء المستنسخين من الـ class المسمى User 

const omar = new User();
omar.sayHi; // Uncaught TypeError: omar.sayHi is not a function

وعلى الصعيد الاخر الـ method الثانية :

User.prototype.sayHi = function () { /* ... */ }


تعطي الظيفة للأبناء المستنسخين من الـ class المسمى User فقط ولن تستطيع الوصول له من خلال الكود التالي 

 User.sayHi(); // Uncaught TypeError: User.sayHi is not a function

ولكن  يمكن الوصول له من خلال الكود التالي 

const omar = new User();
omar.sayHi; // will work fine

 

بعد قول هذا يجب ان تعلم ايضاً انه بإمكانك تعيين الـ static methods بطريقة اخرى وهي إضافة كلمة static قبل اسم ال method : 

class User{
	constructor(name) {
		this.name = name;
	}
	static 	sayHi() {
		console.log("hi")		
	}
  	sayHaha(){
      console.log("haha")		
    }
}
User.sayHi(); // hi
User.sayHaha(); // Uncaught TypeError: User.sayHaha is not a function

const omar = new User()
omar.sayHi(); // Uncaught TypeError: omar.sayHi is not a function
omar.sayHaha(); // haha

 

عادةً نستخدم ال static methods لعمل وظائق تتعلق بال class بشكل عام. ونورد المثال التالي : 

إذا اردنا أن نعمل طريقتين لتوليد article من الكلاس المسمى Article.

  • الاولى باستدعائه واعطاء المتغييرات (title, date).
  • والثانية بتوليد article فارغ و date الخاص به هو اليوم.

وبالتالي سنحتاج ان نعرف الـ class المسمى Article ونعطيه static method ولتكن createTodays : 

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static createTodays() {
    // class  أي انها تشير للـ this = Article لاحظ ان الـ 
    //لن تعمل هنا this.title بمعى ان 
        return new this("Today's digest", new Date());
  }
}

let article = Article.createTodays();

alert( article.title ); // Today's digest

لاحظ ان ال this داخل الـ static method تشير لل class وليس للأبناء المنتسخين.

وهنا تذكر ان : 

let article = new Article;
article.createTodays(); // Uncaught TypeError: article.createTodays is not a function

 

تم التعديل في بواسطة عمر قره محمد
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

بالفعل، يوجد إختلاف بين الطريقتين، الطريقة الأولى تستخدم لإضافة تابع صنف class method بينما الطريقة الثانية تستخدم لإضافة تابع نسخة (تابع مثيل) instance method.

class User {}

User.classMethod = function () { /* ... */ }
User.prototype.instanceMethod = function () { /* ... */ }

const user1 = new User();

user1.classMethod();	// TypeError: user1.classMethod is not a function
User.classMethod();	// correct

user1.instanceMethod();	// correct

طريقة classMethod في المثال السابق تقوم بإضافة تابع إلى الصنف نفسه وليس إلى الكائنات التي يتم إنشائها من هذا الصنف (user1)، ويمكن تخيلها أنا عبارة عن تابع ساكن static method ، وكان يتم إستعمال هذه الطريقة في ES5 وما قبله من إصدارات، بينما في ES6 تم إضافة الكلمة المفتاحية static لإضافة توابع ساكنة Static Methods إلى الصنف مباشرة:

class User {
	static classMethod () { /* التوابع الساكنة لا يمكنها إستخدام this */ }
	instanceMethod () { /* يمكن إستخدام this هنا للتعبير عن الكائن object */ }
}

const user1 = new User();

user1.classMethod();	// TypeError: user1.classMethod is not a function
User.classMethod();	// correct

user1.instanceMethod();	// correct

لمعرفة المزيد عن التوابع الساكنة Static Method والفرق بينها وبين التوابع العادية instance Method أطلع على هذه الإجابة هنا:

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...