Это очень простая объектная модель на основе прототипа, которая будет рассматриваться в качестве примера при объяснении без комментариев:

function Person(name){
    this.name = name;
}
Person.prototype.getName = function(){
    console.log(this.name);
}
var person = new Person("George");

Есть несколько важных моментов, которые мы должны рассмотреть прежде чем перейти к концепции прототипа.

1- Как на самом деле работают функции JavaScript:

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

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

Итак, на этом шаге ключевые слова functions , objects и this - это все, что у нас есть.

Первым вопросом было бы , как ключевое слово this могло бы быть полезным без использования ключевого слова new . ​​

Итак, чтобы ответить на этот вопрос, скажем, у нас есть пустой объект и две функции, такие как:

var person = {};
function Person(name){  this.name = name;  }

function getName(){
    console.log(this.name);
}

и теперь без использования ключевого слова new , как мы могли бы использовать эти функции. Таким образом, у JavaScript есть 3 различных способа сделать это:

a. первый способ - просто вызвать функцию как обычную функцию:

Person("George");
getName();//would print the "George" in the console

в данном случае это будет текущий объект контекста, который обычно является глобальным объектом window в браузере или GLOBAL ] в Node.js. Это означает, что у нас будет window.name в браузере или GLOBAL.name в Node.js со значением «George».

[+1178] б. Мы можем прикрепить их к объекту, так как его свойства

- Самый простой способ сделать это - изменить пустой объект person, например:

person.Person = Person;
person.getName = getName;

таким образом мы можем назвать их как:

person.Person("George");
person.getName();// -->"George"

и теперь объект person имеет вид:

Object {Person: function, getName: function, name: "George"}

- Другой способ прикрепить свойство к объекту - использовать prototype этого объекта, который можно найти в любом объекте JavaScript с именем __proto__, и я попытался объяснить его немного в итоговой части. , Таким образом, мы могли бы получить аналогичный результат, выполнив:

person.__proto__.Person = Person;
person.__proto__.getName = getName;

Но таким образом, что мы на самом деле делаем, это модифицируем Object.prototype, потому что всякий раз, когда мы создаем объект JavaScript с использованием литералов ( { ... }), он создается на основе Object.prototype, что означает, что он присоединяется к вновь созданному объекту как атрибут с именем __proto__ , поэтому, если мы изменим его, как мы это сделали на нашем предыдущий фрагмент кода, все объекты JavaScript будут изменены, не очень хорошая практика. Итак, что может быть лучшей практикой сейчас:

person.__proto__ = {
    Person: Person,
    getName: getName
};

и теперь другие объекты в мире, но это все еще не кажется хорошей практикой. Таким образом, у нас есть еще одно решение, но чтобы использовать это решение, мы должны вернуться к той строке кода, где объект person был создан (var person = {};), а затем изменить его следующим образом:

var propertiesObject = {
    Person: Person,
    getName: getName
};
var person = Object.create(propertiesObject);

что это делает создает новый JavaScript Object и присоединяет propertiesObject к атрибуту __proto__. Итак, чтобы убедиться, что вы можете сделать:

console.log(person.__proto__===propertiesObject); //true

Но хитрый момент здесь заключается в том, что у вас есть доступ ко всем свойствам, определенным в __proto__ на первом уровне объекта person (см. Итоговую часть более подробно).

, как вы видите, используя любой из этих двух способов, this будет точно указывать на объект person.

[+1179] с. У JavaScript есть другой способ предоставить функцию с помощью this, которая использует вызов или apply для вызова функции.

Метод apply () вызывает функцию с заданным значением this и аргументами, представленными в виде массива (или подобного массиву объекта).

и

Метод call () вызывает функцию с заданным значением и аргументами, предоставляемыми индивидуально.

таким образом, который является моим любимым, мы можем легко назвать наши функции, такие как:

Person.call(person, "George");

или

//apply is more useful when params count is not fixed
Person.apply(person, ["George"]);

getName.call(person);   
getName.apply(person);

эти 3 метода являются важными начальными шагами для определения из функциональности .prototype.

2- Как работает ключевое слово new?

это второй шаг для понимания функциональности .prototype. Это то, что я использую для имитации процесса:

function Person(name){  this.name = name;  }
my_person_prototype = { getName: function(){ console.log(this.name); } };

в этой части я попытаюсь предпринять все шаги, которые предпринимает JavaScript, без использования ключевого слова new и prototype, когда вы используете ключевое слово new. поэтому, когда мы делаем new Person("George"), функция Person служит конструктором. Вот что делает JavaScript, один за другим:

a. во-первых, он создает пустой объект, в основном пустой хэш, например:

var newObject = {};

b. следующий шаг, который делает JavaScript, - это присоединить все объекты-прототипы к вновь созданному объекту

, у нас здесь my_person_prototype аналогично объекту-прототипу.

for(var key in my_person_prototype){
    newObject[key] = my_person_prototype[key];
}

Это не тот способ, которым JavaScript на самом деле присоединяет свойства, которые определены в прототипе. Фактический путь связан с концепцией цепи прототипов.

а. & Амп; б. Вместо этих двух шагов вы можете получить точно такой же результат, выполнив:

var newObject = Object.create(my_person_prototype);
//here you can check out the __proto__ attribute
console.log(newObject.__proto__ === my_person_prototype); //true
//and also check if you have access to your desired properties
console.log(typeof newObject.getName);//"function"

и теперь мы можем вызвать функцию getName в нашем my_person_prototype:

newObject.getName();

c. затем он передает этот объект конструктору,

, мы можем сделать это с нашим примером, например:

Person.call(newObject, "George");

или

Person.apply(newObject, ["George"]);

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

Теперь конечный результат перед имитацией других шагов: Object {name: "George"}

Резюме:

В основном, когда вы используете new в функции, вы вызываете ее, и эта функция служит конструктором, поэтому, когда вы говорите:

new FunctionName()

JavaScript внутренне создает объект, пустой хеш, а затем передает этот объект конструктор, тогда конструктор может делать все, что он хочет, потому что этот внутри этого конструктора является объектом, который был только что создан, и затем он дает вам этот объект, конечно, если вы не использовали оператор return в вашем функции или если вы поместили return undefined; в конце вашего тела функции.

Поэтому, когда JavaScript отправляется на поиск свойства объекта, первое, что он делает, - это поиск этого объекта. И затем есть секретное свойство [[prototype]] , которое у нас обычно есть, например, __proto__ , и это свойство - то, на что JavaScript смотрит дальше. И когда он просматривает __proto__ , поскольку он снова является другим объектом JavaScript, он имеет свой собственный атрибут __proto__ , он поднимается и поднимается, пока не доберется до точка, в которой следующий __proto__ равен нулю. Точка - единственный объект в JavaScript, для которого его атрибут __proto__ имеет значение NULL, это Object.prototype объект:

console.log(Object.prototype.__proto__===null);//true

, и именно так наследование работает в JavaScript.

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