JavaScript .prototype如何工作？

JavaScript

YOC43564555

2020-03-09

我不喜欢动态编程语言，但是我写了相当一部分JavaScript代码。我从来没有真正了解过这种基于原型的编程，有人知道它是如何工作的吗？

var obj = new Object();
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

我记得很久以前与人们进行过多次讨论（我不确定自己在做什么），但是据我了解，这里没有一个课堂的概念。这只是一个对象，这些对象的实例是原始对象的副本，对吧？

但是，此“ .prototype”属性在JavaScript中的确切目的是什么？它与实例化对象有何关系？

更新：正确的方法

var obj = new Object(); // not a functional object
obj.prototype.test = function() { alert('Hello?'); }; // this is wrong!

function MyObject() {} // a first class functional object
MyObject.prototype.test = function() { alert('OK'); } // OK

这些幻灯片也确实起到了很大作用。

第209篇《JavaScript .prototype如何工作？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共13个回答

Itachi伽罗 2020.03.09

只是您已经有一个对象，Object.new但使用构造函数语法时仍然没有对象。

猪猪十三 2020.03.09

重要的是要理解，对象的原型（可通过Object.getPrototypeOf(obj)或通过不推荐使用的__proto__属性获得）与prototype构造函数的属性之间存在区别。前者是每个实例的属性，后者是构造函数的属性。也就是说，与Object.getPrototypeOf(new Foobar())指代相同的对象Foobar.prototype。

参考：https : //developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

米亚Stafan 2020.03.09

另一个显示__proto__，原型和构造函数关系的方案：

小卤蛋卡卡西 2020.03.09

该原型创建新的对象通过克隆现有对象。因此，实际上，当我们考虑原型时，可以真正地考虑克隆或复制某些内容而不是进行组合。

小哥Stafan 2020.03.09

在理解这类内容时，我总是喜欢类比。在我看来，与原型低音继承相比，“原型继承”相当令人困惑，尽管原型是更简单的范例。实际上，对于原型而言，确实没有继承，因此名称本身就具有误导性，它更像是一种“委托”。

想象一下....

您正在读高中，正在上课，今天有一个测验，但是您没有笔来填写答案。h！

您正坐在可能有笔的朋友Finnius旁边。您问，他环顾四周办公桌没有成功，但他没有说“我没有笔”，而是一个好朋友，他与其他朋友Derp核对了他是否有笔。Derp确实有一支备用笔，并将其传递回Finnius，后者将其交给您以完成测验。Derp已将钢笔委托给Finnius，后者已将钢笔委托给您使用。

这里重要的是，Derp不会把笔给您，因为您与他没有直接关系。

这是原型工作方式的简化示例，其中在数据树中搜索您要寻找的东西。

蛋蛋飞云 2020.03.09

用更好的图片解释基于JavaScript原型的继承的另一种尝试

Jim小小 2020.03.09

让我告诉您我对原型的理解。我不会在这里将继承与其他语言进行比较。我希望人们不再比较语言，而只是理解语言本身。理解原型和原型继承非常简单，下面我将向您展示。

原型就像模型一样，您可以基于该模型创建产品。要理解的关键点是，当您使用另一个对象作为原型创建对象时，原型与产品之间的联系是永恒的。例如：

var model = {x:2};
var product = Object.create(model);
model.y = 5;
product.y
=>5

每个对象都包含一个称为[[prototype]]的内部属性，可以通过该Object.getPrototypeOf()函数进行访问。Object.create(model)创建一个新对象并将其[[prototype]]属性设置为对象模型。因此，当您这样做时Object.getPrototypeOf(product)，将获得对象模型。