Разница между функцией конструктора на основе прототипа и классом ES6 - PullRequest
Новая
       22

Разница между функцией конструктора на основе прототипа и классом ES6

0 голосов
/ 13 января 2019

Я пытаюсь понять разницу между 3 следующими функциями. Я сделал несколько «выводов» после дня, посвященного MDN и другим источникам, и мне было интересно, может ли кто-нибудь помочь мне подтвердить их. Спасибо :)

BLOCK # 1 (пример функции конструктора на основе прототипа) 

function Person (name){
    this.name = name;
    this.greeting = function(){
      alert(this.name);
      };
    }
  var person = new Person('Bob');

BLOCK # 2 (другой пример функции конструктора на основе прототипа) 

function Person(name) {
      this.name = name;
    }
    Person.prototype.greeting = function() {
      alert(this.name);
    }
  let person = new Person("Bob");

BLOCK # 3 (пример класса ES6 на основе прототипа) 

 class Person {
   constructor(name) {
     this.name = name;
   }
   greeting() {
     alert(this.name);
   }
 }
 let person = new Person("Bob");

Вопросы:

  1. Три функции добавляют имя и приветствие к прототипу объекта Person. Это утверждение правильно?

  2. Код в блоке № 3 использует новое ключевое слово класса ES6 и работает «за кулисами» иначе, чем код в блоке № 1 и блоке № 2. (PS. Я пишу «за кулисами», потому что у меня пока нет четкого представления о том, что происходит под капотом, когда я вызываю функцию, но на данный момент я предполагаю, что я слишком новичок для глубокого погружения).

  3. Код в блоках № 1 и № 2 одинаков и работает «за кадром» одинаково. Разница в коде между ними состоит в том, что в блоке № 1 мы сохраняем переменную name и функцию greeting в одном и том же блоке кода, в то время как в блоке № 2 мы сохраняем функцию greeting отдельно от переменная name (добавление функции greeting к прототипу Person с использованием Person.prototype.greeting)

  4. Используя Person.prototype.greeting = function () {...} в блоке № 2, мы достигаем того же результата, что и this.greeting = function (...) ниже this.name в блоке № 1

Спасибо!

1 Ответ

0 голосов
/ 13 января 2019

Чтобы ответить на вопросы:

  1. Нет, утверждение неверно, ни один код не добавляет «имя» к прототипу, и только блоки кода № 2 и № 3 добавляют приветствие к прототипу.
  2. Вероятно, это слишком глубокое погружение, я не могу проверить, что именно происходит за кулисами, но код, по сути, ведет себя как блок № 2.
  3. Кодовые блоки № 1 и № 2 окончательно не работают одинаково и не достигают одинаковых конечных результатов. Первый блок (и я должен напомнить вам, как я написал, поскольку я действую в предположении, что вы допустили ошибку при копировании и вставке) создаст экземпляр объекта и назначит оба свойства name и функция приветствие для вновь созданного экземпляра, тогда как кодовый блок # 2 назначит свойство name для экземпляра, а функция приветствие для прототипа, так что другая половина вашего вопроса № 3 верна.
  4. Абсолютно нет, для каждого объекта, созданного с использованием блока # 1, вы определяете и создаете новый экземпляр функции приветствия и присоединяете его к вновь созданному объекту, вы вообще не используете наследование прототипа в этом случае.
...