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

نعم يوجد اختلاف وهو ان الـ 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

بالفعل، يوجد إختلاف بين الطريقتين، الطريقة الأولى تستخدم لإضافة تابع صنف 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 أطلع على هذه الإجابة هنا: