Разница между методом класса и методом className.prototype в JS - PullRequest
1 голос
/ 19 апреля 2019

Мне интересно, в чем разница между установкой методов через тело класса и привязкой прототипа в JS.(если есть)

В настоящее время я работаю над примером Eloquent JavaScript, и я был удивлен, когда автор сначала создал класс с кучей методов внутри его тела, а затем создал другой метод с className.prototype.methodName = function(){}

class Cat {
    constructor() {
    }

    method1() {
      console.log("m1");
    }
}

Cat.protoype.method2 = function() {
  console.log("m2");
}

Ответы [ 2 ]

3 голосов
/ 19 апреля 2019

Наиболее очевидное различие заключается в следующем:

Вы можете мутировать прототип каждого класса вторым методом (включая нативный), в то время как первый синтаксис работает только для объявления ваших собственных классов (но с другой стороны).он поддерживает чистоту и структурированность).

Существуют и другие различия, которые вы можете игнорировать в большинстве случаев:

1) Методы класса не перечисляются при установкесвойство напрямую делает его перечисляемым .

Это было бы более эквивалентно синтаксису класса:

  Object.defineProperty(Cat.protoype, "method2", {
     value() {
       console.log("m2");
      },
      enumerable: false, // it's the default value, this is just for clarity
      writable: true,
      configurable: true,
  });

2) super доступно только в методах, добавленных во время объявления(как в объектах, так и в классах) самого объекта / класса.

3) Функция .name в первом случае является «test», а во втором - «anonymous».Это можно изменить, сделав функцию неанонимной, например, function method2() { ... }

0 голосов
/ 19 апреля 2019

Надеюсь, это поможет: «Изменения в объекте-прототипе Object видятся всеми объектами через цепочку прототипов, если только свойства и методы, подверженные этим изменениям, не переопределяются далее по цепочке прототипов. Это обеспечивает очень мощный, хотя и потенциально опасный механизм переопределить или расширить поведение объекта. "

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

...