Что такое прототип?

Когда вы выполняете obj = new Person, в игре участвуют три игрока:

• только что созданный объект obj
• функция-конструктор Person
• прототип, специальный скрытый объект, хранящийся под Person.prototype

Отношения между ними следующие:

obj.__proto__ === Person.prototype

Person.prototype.constructor === Person

Иллюстрация:

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

var person1 = new Person("John","Doe");
var person2 = new Person("Ann","Smith");

Person.prototype.age = 42;

Сказал, что вы создали конструктор для Person, а затем два его экземпляра:

const Person = function(name) {
  this.name = name;
  this.speak = () => console.log('My name is ' + this.name)
};
const john = new Person('John');
const mary = new Person('Mary');

john.speak();
mary.speak();

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

Но Мария не только может говорить. Она умеет петь. Но Джон не может.

        const Person = function(name) {
          this.name = name;
          this.speak = () => console.log('My name is ' + this.name)
        };
        const john = new Person('John');
        const mary = new Person('Mary');

        john.speak();
        mary.speak();
        
        mary.sing = () => console.log('♪♪♪ Lalalalalala ♪♪♪');
        
        mary.sing();
        john.sing(); // John is such a bad singer, that this throws an error !

Что, если потом ты поймешь, что твоим людям нужно не только говорить, но и ходить. Вам нужна ссылка на их общего родителя, чтобы сказать им идти все в одну линию. Это прототип. И Мэри, и Джон имеют общий прототип и глубоко внутри имеют ссылку на этот прототип (это __proto__ для друзей и семьи).

const Person = function(name) {
      this.name = name;
      this.speak = () => console.log('My name is ' + this.name)
    };
    const john = new Person('John');
    const mary = new Person('Mary');

    john.speak();
    mary.speak();
    
    Person.prototype.walk = () => console.log('I am walking alright');
    
    john.walk();
    mary.walk();
    
    // That is the same as:
    john.__proto__.walk()
    mary.__proto__.walk()

Теперь у Джона неудачное падение, и ему трудно ходить.

    const Person = function(name) {
          this.name = name;
          this.speak = () => console.log('My name is ' + this.name)
        };
        const john = new Person('John');
        const mary = new Person('Mary');

        john.speak();
        mary.speak();
        
        Person.prototype.walk = () => console.log('I am walking alright');
        
        // John's infamous accident
        john.walk = () => console.log('My leg hurts so bad...');
        
        john.walk();
        mary.walk();
        
        

Экземпляр имеет собственное свойство, мы его используем.
Его нет, мы смотрим в его __proto__ и используем, если оно существует.

Надеюсь это поможет!

РЕДАКТИРОВАТЬ: Мой друг @teemu добавил к моему ответу: у каждого встроенного объекта есть свой прототип.

На очень простом языке каждая функция представляет собой объект особого типа в javascript, и каждая функция имеет свой собственный контейнер объекта «прототип». Таким образом, каждая функция-конструктор будет иметь свой собственный объект-прототип, который будет использоваться совместно со всеми объектами в __proto__, созданными с использованием этого. Посмотрим на примере:

// constructor function:
    var Person = function(name, age){
      this.name = name;
      this.age = age
    }

var tony = new Person('tony', 21);
var bruce = new Person('bruce', 22);

так как мы обсуждали,

Person.prototype должно совпадать с tony.__proto__ и bruce.__proto__

примечание: вы также можете заменить Person на встроенный массив, объект или строку.

чтобы убедиться в этом, мы можем сделать это:

Person.prototype == tony.__proto__;  //true
Person.prototype == bruce.__proto__; //true
bruce.__proto__ == tony.__proto__;  //true

Следующее, что мы собираемся сделать, добавим одно свойство в bruce.__proto__:

bruce.__proto__.isSuperHero = true;

то же самое происходит, когда вы добавляете свойства в prototype.

но это отразится повсюду;

console.log(tony.__proto__.isSuperHero )  // true
console.log(Person.prototype.isSuperHero)   //true

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

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

Во-первых, прототип — это просто объект. Почти каждый объект в JS (за исключением, например, случая, когда вы используете Object.create(null)) имеет некоторый прототип, и прототипы могут быть объединены в цепочку.

Пример: когда вы создаете массив с помощью литерала [], ваш экземпляр массива подключается к объекту (также экземпляр массива между прочим), определяя свойства массива, такие как map и т. д., который сам подключается к другому прототипу (экземпляру объекта), определяя свойства таких объектов, как toString. Эти свойства обычно являются функциями. Теперь, когда вы получаете доступ к одному из свойств вашего объекта, например [].hasOwnProperty, движок просматривает цепочку прототипов, чтобы найти его. Он начинается с вашего экземпляра [], не находит его, переходит к прототипу (массиву), также безуспешно, поэтому переходит к последнему прототипу (экземпляру объекта), где он, наконец, найден.

Как видите, цепочка прототипов всегда где-то заканчивается, поэтому, если вы попытаетесь получить прототип на последнем прототипе в цепочке, вы получите null.

Теперь вернемся к функциям-конструкторам. Первое, что нужно отметить, это то, что это обычные функции — фактическим «создателем» экземпляра является ключевое слово new. Теперь у каждой функции есть свойство prototype, которое говорит вам следующее: каждый объект, созданный с помощью этой функции, будет связан прототипом со всем, что находится в свойстве prototype функции. По умолчанию каждая функция содержит экземпляр Object в этом свойстве, а это означает, что каждый объект, который вы создаете из этой функции, будет связан с прототипом этого экземпляра и, следовательно, «наследует» такие свойства, как toString.

В этом примере вы можете увидеть связь между свойством prototype функции и прототипом экземпляра.

function A() {}
var a = new A();
a.__proto__ == A.prototype; // is true

Наконец, свойство constructor в свойстве prototype функции сообщает вам, какая функция будет использоваться для создания новых экземпляров при использовании функции с ключевым словом new. Этот глоток сводится к:

function A() {}
A == A.prototype.constructor; // is true

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

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