добавления прототипа в определении класса в JavaScript

Question

читает What techniques can be used to define a class in JavaScript, and what are their trade-offs? на StackOverflow я понимаю, что я могу определить класс с помощью

Способ 1:

function Person(name, gender){ 
    this.name = name; 
    this.gender = gender; 
} 

и добавлять функции в прототипе, чтобы избежать члена функции воссозданы каждый раз при его создании. как

Person.prototype.speak = function(){ 
    alert("my name is" + this.name); 
} 

и создавать свои экземпляры через

var person = new Person("Bob", "M"); 

Я думаю, что создание того же объекта можно с вне новое ключевое слово, как

Способ 2:

var Person = function (name, gender) { 

    return {name:name, gender:gender}; 

} 

person = Person("Bob", "M"); 

Второй метод делает то же самое по первому? Также, если да, то как бы я объединил функции с помощью прототипа (как мы видим в разговоре 1-го уровня) во втором подходе?

Answer 1

Как объяснил Шон Виейра, первый метод не совпадает со вторым методом. В первом методе экземпляр наследует от Person.prototype. Во втором методе экземпляр наследует непосредственно от Object.prototype.

Метод 1:

 null 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
| Object.prototype | 
+------------------+ 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
| Person.prototype | 
+------------------+ 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
|  person  | 
+------------------+ 

Метод 2:

 null 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
| Object.prototype | 
+------------------+ 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
|  person  | 
+------------------+ 

---

Интересно, что выше диаграммы показывают, что объекты наследуют от других объектов в JavaScript, а не от конструкторов. Следовательно, при создании new Person экземпляр наследуется от Person.prototype, а не от Person.

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

var person = { 
    create: function (name, gender) { 
     var person = Object.create(this); 
     person.gender = gender; 
     person.name = name; 
     return person; 
    }, 
    speak: function() { 
     alert("My name is " + this.name + "."); 
    } 
}; 

В приведенном выше примере person эквивалентно Person.prototype. Теперь вы можете создать экземпляр person следующим образом:

var bob = person.create("Bob", "M"); 

Прототип цепи bob будет выглядеть следующим образом:

 null 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
| Object.prototype | 
+------------------+ 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
|  person  | 
+------------------+ 
     ^
     | 
     | __proto__ 
     | 
+------------------+ 
|  bob  | 
+------------------+ 

Так почему вы должны создавать объекты, как это вместо этого?

1. Он выглядит чище. Все инкапсулируется в одном объектном литерале.
2. Легче понять, что объекты наследуются от объектов. Никаких конструкторов не требуется.
3. Чтобы создать экземпляр, вам не нужно использовать new. Это solves a lot от problems.

Для получения дополнительной информации об этом шаблоне прочитайте мой пост в блоге на "Why Prototypal Inheritance Matters".

Answer 2

Ваши примеры достигают того же, что касается доступа к свойствам, но они не идентичны, поскольку первый метод имеет базовый прототип Object. Ответ на ваш второй вопрос:

function Person(name, gender){ 
    return { 
    name: name, 
    gender: gender, 
    speak: function(){ 
     alert("my name is" + this.name); 
    } 
    }; 
} 

Здесь прототипа прототипа нет. Функция выпекается в литерал объекта. Единственное значение, которое при помощи буквальным вместо прототипа было бы создать закрытие, так что вы можете иметь частные переменные, например:

function Person(name, gender){ 
    return { 
    speak: function(){ 
     alert("my name is" + name); 
    } 
    }; 
} 

Answer 3

Нет, Метод 2 = 1. Способ второй метод создает новый анонимный объект! с прототипом, который указывает на Object.prototype, а первый создает новый объект с прототипом, который указывает на Person.prototype.

В псевдо-коде:

// Method #1 
function Person(name, gender) { 
    // The magic JS does *for us* (but *only* when invoked with `new`) 
    var this = {}; 
    // __proto__ is the *internal* prototype reference 
    // It's not required to be accessible unless you're in an ES6 environment. 
    this.__proto__ = Person.prototype; 

    // Person.prototype is also created by JS for us 
    // and provided with a reference (among other things) 
    // to this function as prototype.constructor. 

    // Our stuff 
    this.name = name; 
    this.gender = gender; 

    // More JS magic 
    return this; 
} 

// Method #2 
function Person(name, gender) { 
    // Just our stuff - no magic JS goodness here 
    return { 
     name: name, gender: gender 
    }; 
} 

Answer 4

Возможно, этот ответ может объяснить немного больше о конструкторах функций, наследование, частные переменные и преобладающих методов: Prototypical inheritance - writing up

Другие ответы уже на Ваш вопрос; создание объекта как литерала объекта {prop:val,method:function(){}} и создание объекта с использованием функций-конструкторов: var MyObject=function(){this.prop=val};MyObject.prototype.method=function(){};