JavaScript: Class.method против Class.prototype.method

В чем разница между следующими двумя декларациями?

Class.method = function () { /* code */ }
Class.prototype.method = function () { /* code using this.values */ }

Можно ли считать первый оператор объявлением статического метода, а второй оператор - объявлением метода экземпляра?

Да, первая функция не имеет отношения к экземпляру объекта этой функции конструктора , вы можете рассматривать ее как «статический метод» .

В JavaScript функции являются объектами первого класса , это означает, что вы можете обращаться с ними как с любым объектом, в этом случае вы просто добавляете свойство к объекту функции .

Вторая функция, поскольку вы расширяете прототип функции конструктора, будет доступна для всех экземпляров объекта, созданных с помощью newключевого слова, и контекст в этой функции ( thisключевое слово) будет ссылаться на фактический экземпляр объекта, где вы его вызываете.

Рассмотрим этот пример:

// constructor function
function MyClass () {
  var privateVariable; // private member only available within the constructor fn

  this.privilegedMethod = function () { // it can access private members
    //..
  };
}

// A 'static method', it's just like a normal function 
// it has no relation with any 'MyClass' object instance
MyClass.staticMethod = function () {};

MyClass.prototype.publicMethod = function () {
  // the 'this' keyword refers to the object instance
  // you can access only 'privileged' and 'public' members
};

var myObj = new MyClass(); // new object instance

myObj.publicMethod();
MyClass.staticMethod();

Когда вы создаете более одного экземпляра MyClass, у вас все равно будет только один экземпляр publicMethod в памяти, но в случае privilegedMethod вы в конечном итоге создадите множество экземпляров, а staticMethod не имеет отношения к экземпляру объекта.

Вот почему прототипы экономят память.

Кроме того, если вы измените свойства родительского объекта, если соответствующее свойство ребенка не было изменено, оно будет обновлено.

Для визуальных учеников, при определении функции без .prototype

ExampleClass = function(){};
ExampleClass.method = function(customString){
             console.log((customString !== undefined)? 
                          customString : 
                          "called from func def.");}
ExampleClass.method(); // >> output: `called from func def.`  

var someInstance = new ExampleClass();
someInstance.method('Called from instance');
    // >> error! `someInstance.method is not a function`  

С тем же кодом, если .prototypeон добавлен,

ExampleClass.prototype.method = function(customString){
             console.log((customString !== undefined)? 
                          customString : 
                          "called from func def.");}
ExampleClass.method();  
      // > error! `ExampleClass.method is not a function.`  

var someInstance = new ExampleClass();
someInstance.method('Called from instance');
                 // > output: `Called from instance`

Чтобы было понятнее,

ExampleClass = function(){};
ExampleClass.directM = function(){}  //M for method
ExampleClass.prototype.protoM = function(){}

var instanceOfExample = new ExampleClass();

ExampleClass.directM();     ✓ works
instanceOfExample.directM();   x Error!

ExampleClass.protoM();     x Error!
instanceOfExample.protoM();  ✓ works

**** Обратите внимание, что в приведенном выше примере someInstance.method () не будет выполняться, так как
ExampleClass.method () вызывает ошибку, и выполнение не может продолжаться.
Но ради иллюстрации и легкого понимания я сохранил эту последовательность. ****

Результаты, полученные из chrome developer console& Нажмите на ссылку jsbin выше, чтобы пройти через код. Переключить прокомментированный раздел с помощью +JS Bin

ctrl/

Да, первый static methodтакже называется class method, а второй - instance method.

Рассмотрим следующие примеры, чтобы понять это более подробно.

В ES5

function Person(firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

Person.isPerson = function(obj) {
   return obj.constructor === Person;
}

Person.prototype.sayHi = function() {
   return "Hi " + this.firstName;
}

В приведенном выше коде isPersonэто статический метод, а sayHiметод экземпляра Person.

Ниже описано, как создать объект из Personконструктора.

var aminu = new Person("Aminu", "Abubakar");

Используя статический метод isPerson.

Person.isPerson(aminu); // will return true

Используя метод экземпляра sayHi.

aminu.sayHi(); // will return "Hi Aminu"

В ES6

class Person {
   constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
   }

   static isPerson(obj) {
      return obj.constructor === Person;
   }

   sayHi() {
      return `Hi ${this.firstName}`;
   }
}

Посмотрите, как staticключевое слово использовалось для объявления статического метода isPerson.

Создать объект Personкласса.

const aminu = new Person("Aminu", "Abubakar");

Используя статический метод isPerson.

Person.isPerson(aminu); // will return true

Используя метод экземпляра sayHi.

aminu.sayHi(); // will return "Hi Aminu"

ПРИМЕЧАНИЕ. Оба примера по сути одинаковы, JavaScript остается бесклассовым языком. Представленный classв ES6 является в первую очередь синтаксическим сахаром по сравнению с существующей моделью наследования на основе прототипов.