简单使用.prototype，幕后发生了什么？

Question

我一直在阅读最近刚开始介绍prototype的javascript书。我也在查看.prototype和__proto__上的其他一些stackoverflow问题，他们都有一些例子对我来说有点太高级了，而且我无法理解它们。现在这本书以一种非常令人困惑的方式解释了这一点，所以我想我在这里要求对它的基本理解。这是我刚刚编写的一些代码

function Person(firstname,lastname){
    this.firstname = firstname;
    this.lastname = lastname;
}

Person.prototype.getFullName = function(){
    return this.firstname + " " + this.lastname;
}
var john = new Person('John','Doe');
console.log(john);

现在，我的混乱出现了。根据我的理解，幕后每个function都有一个prototype，但在我们使用关键字new之前，我们并没有真正参与其中。

我能理解或从我的书中推断出.prototype这里允许我们向Person函数添加方法。

冷却。因此，如果我console.log(john.getFullName());，我们会John Doe。太好了！就像怀疑一样。但是，如果console.log(john)它指向Person函数并显示firstname: 'John'和lastname: Doe，我该怎么做？

我们刚刚添加Person.prototype.getFullName的方法发生了什么变化？当我们记录John时，为什么不显示？

Answer 1

如果您在控制台中展开__proto__下拉列表，则会显示。因为您已将该功能添加到原型中，即显示它的位置。

Answer 2

Javascript中的对象通过“原型继承”工作，其中每个对象具有常规属性firstname，lastname，但也链接到用作“原型”的常规对象（在{{1中指定）属性）。当您执行__proto__时，链接过程会自动完成：通过指定var john = new Person(...)，它知道当您创建Person的实例时，它应该链接到Person.prototype

执行Person.prototype时，它只会直接在john对象中显示属性。

但是，当你执行console.log(john)时，Javascript的继承模型知道如果它在john.getFullName()对象中找不到getFullName，它将在john中递归查找它直到它找到它。因此，它将使用__proto__中的getFullName函数，因为它在创建Person.prototype时与该对象相关联。

Answer 3

原型用于javascript中的继承。可以这样想：每个对象（除了一个）都有一个原型。没有的那个位于链的顶部，是继承层次结构的末尾。该链中的每个对象都获得其上方的所有函数和属性。这是通过原型完成的。当你向对象原型添加一个函数或另一个变量时，正如我所理解的那样，该对象的每个实例都将接收它自己的副本。关于java脚本的事情是，有大约6种不同的方法来创建一个对象 - new关键字完全是语法糖 - 每个创建一个对象。你的书应该在某一点上说甚至功能都是对象。

Javascript并不那么令人困惑。它功能强大，设计不同。它的一周参考系统使其稳健，但也容易因程序员错误而出错。