blocks|key|1621768|text|prototype允许您创建类。如果你不使用prototype，那么它就会变成一个静态的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1621769|下面是一个简短的示例。|1621770|var+obj+=+new+Object();
obj.test+=+function()+{+alert('Hello?');+};|code-block|syntax|javascript|1621771|在上面的例子中，你有静态函数调用测试。该函数只能通过obj.test访问，其中您可以将obj想象为一个类。|1621772|在下面的代码中|1621773|function+obj()
{
}

obj.prototype.test+=+function()+{+alert('Hello?');+};
var+obj2+=+new+obj();
obj2.test();|1621774|obj已经变成了一个可以实例化的类。obj可以存在多个实例，并且它们都有test函数。|1621775|以上是我的理解。我正在把它做成一个社区维基，这样如果我错了，人们可以纠正我。|1621776|entityMap^0|0|9|M|9|0|0|0|0|0|0|10|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1B|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|X|$]]

<code>prototype</code> allows you to make classes. if you do not use <code>prototype</code> then it becomes a static.

Here is a short example.

<pre><code>var obj = new Object();
obj.test = function() { alert('Hello?'); };
</code></pre>

In the above case, you have static funcation call test. This function can be accessed only by obj.test where you can imagine obj to be a class.

where as in the below code

<pre><code>function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();
</code></pre>

The obj has become a class which can now be instantiated. Multiple instances of obj can exist and they all have the <code>test</code> function.

The above is my understanding. I am making it a community wiki, so people can correct me if I am wrong.

blocks|key|1407061|text|Javascript没有通常意义上的继承，但它有原型链。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407062|原型链|1407063|如果在对象中找不到某个对象的成员，它会在原型链中查找该成员。链由其他对象组成。可以使用__proto__变量访问给定实例的原型。每个对象都有一个，因为javascript中的类和实例之间没有区别。|offset|length|style|CODE|1407064|将函数/变量添加到原型的优点是，它只需在内存中出现一次，而不是针对每个实例。|1407065|它对于继承也很有用，因为原型链可以由许多其他对象组成。|1407066|entityMap^0|0|0|17|9|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@$F|S|G|T|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

Javascript doesn't have inheritance in the usual sense, but it has the prototype chain.

<h2>prototype chain</h2>

If a member of an object can't be found in the object it looks for it in the prototype chain. The chain consists of other objects. The prototype of a given instance can be accessed with the <code>__proto__</code> variable. Every object has one, as there is no difference between classes and instances in javascript.

The advantage of adding a function / variable to the prototype is that it has to be in the memory only once, not for every instance.

It's also useful for inheritance, because the prototype chain can consist of many other objects.

blocks|key|1407148|text|当构造函数创建对象时，该对象隐式引用构造函数的“prototype”属性以解析属性引用。构造器的“prototype”属性可以由程序表达式constructor.prototype引用，并且添加到对象原型的属性通过继承由共享原型的所有对象共享。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407149|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

When a constructor creates an object, that object implicitly references the constructor’s “prototype” property for the purpose of resolving property references. The constructor’s “prototype” property can be referenced by the program expression constructor.prototype, and properties added to an object’s prototype are shared, through inheritance, by all objects sharing the prototype.

blocks|key|1621987|text|在实现经典继承的语言中，如Java、C#或C%2B%2B，首先创建一个类--对象的蓝图--然后可以从该类创建新对象，也可以扩展类，定义一个扩充原始类的新类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1621988|在JavaScript中，您首先创建一个对象(没有类的概念)，然后您可以扩充您自己的对象或从它创建新的对象。这并不难，但对于习惯于经典方式的人来说，这有点陌生，很难代谢。|1621989|示例：|1621990|​|1621991|//Define+a+functional+object+to+hold+persons+in+JavaScript
var+Person+=+function(name)+{
++this.name+=+name;
};

//Add+dynamically+to+the+already+defined+object+a+new+getter
Person.prototype.getName+=+function()+{
++return+this.name;
};

//Create+a+new+object+of+type+Person
var+john+=+new+Person("John");

//Try+the+getter
alert(john.getName());

//If+now+I+modify+person,+also+John+gets+the+updates
Person.prototype.sayMyName+=+function()+{
++alert('Hello,+my+name+is+'+%2B+this.getName());
};

//Call+the+new+method+on+john
john.sayMyName();|code-block|syntax|javascript|1621992|1621993|到目前为止，我一直在扩展基对象，现在我创建了另一个对象，然后从Person继承。|1621994|//Create+a+new+object+of+type+Customer+by+defining+its+constructor.+It's+not+
//related+to+Person+for+now.
var+Customer+=+function(name)+{
++++this.name+=+name;
};

//Now+I+link+the+objects+and+to+do+so,+we+link+the+prototype+of+Customer+to+
//a+new+instance+of+Person.+The+prototype+is+the+base+that+will+be+used+to+
//construct+all+new+instances+and+also,+will+modify+dynamically+all+already+
//constructed+objects+because+in+JavaScript+objects+retain+a+pointer+to+the+
//prototype
Customer.prototype+=+new+Person();+++++

//Now+I+can+call+the+methods+of+Person+on+the+Customer,+let's+try,+first+
//I+need+to+create+a+Customer.
var+myCustomer+=+new+Customer('Dream+Inc.');
myCustomer.sayMyName();

//If+I+add+new+methods+to+Person,+they+will+be+added+to+Customer,+but+if+I
//add+new+methods+to+Customer+they+won't+be+added+to+Person.+Example:
Customer.prototype.setAmountDue+=+function(amountDue)+{
++++this.amountDue+=+amountDue;
};
Customer.prototype.getAmountDue+=+function()+{
++++return+this.amountDue;
};

//Let's+try:+++++++
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());|1621995|1621996|var+Person+=+function+(name)+{
++++this.name+=+name;
};
Person.prototype.getName+=+function+()+{
++++return+this.name;
};
var+john+=+new+Person("John");
alert(john.getName());
Person.prototype.sayMyName+=+function+()+{
++++alert('Hello,+my+name+is+'+%2B+this.getName());
};
john.sayMyName();
var+Customer+=+function+(name)+{
++++this.name+=+name;
};
Customer.prototype+=+new+Person();

var+myCustomer+=+new+Customer('Dream+Inc.');
myCustomer.sayMyName();
Customer.prototype.setAmountDue+=+function+(amountDue)+{
++++this.amountDue+=+amountDue;
};
Customer.prototype.getAmountDue+=+function+()+{
++++return+this.amountDue;
};
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());|1621997|1621998|如上所述，我不能在Person上调用setAmountDue()，getAmountDue()。|1621999|//The+following+statement+generates+an+error.
john.setAmountDue(1000);|1622000|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|17|8|@]|9|@]|A|$]]|$1|P|3|Q|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|R|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|U|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1C|8|@]|9|@]|A|$]]|$1|X|3|Y|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|Z|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|10|$]]

In a language implementing classical inheritance like Java, C# or C++ you start by creating a class--a blueprint for your objects--and then you can create new objects from that class or you can extend the class, defining a new class that augments the original class.

In JavaScript you first create an object (there is no concept of class), then you can augment your own object or create new objects from it. It's not difficult, but a little foreign and hard to metabolize for somebody used to the classical way.

Example:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//Define a functional object to hold persons in JavaScript
var Person = function(name) {
 this.name = name;
};

//Add dynamically to the already defined object a new getter
Person.prototype.getName = function() {
 return this.name;
};

//Create a new object of type Person
var john = new Person("John");

//Try the getter
alert(john.getName());

//If now I modify person, also John gets the updates
Person.prototype.sayMyName = function() {
 alert('Hello, my name is ' + this.getName());
};

//Call the new method on john
john.sayMyName();</code></pre>
</div>
</div>


Until now I've been extending the base object, now I create another object and then inheriting from Person.

<pre><code>//Create a new object of type Customer by defining its constructor. It's not 
//related to Person for now.
var Customer = function(name) {
 this.name = name;
};

//Now I link the objects and to do so, we link the prototype of Customer to 
//a new instance of Person. The prototype is the base that will be used to 
//construct all new instances and also, will modify dynamically all already 
//constructed objects because in JavaScript objects retain a pointer to the 
//prototype
Customer.prototype = new Person(); 

//Now I can call the methods of Person on the Customer, let's try, first 
//I need to create a Customer.
var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();

//If I add new methods to Person, they will be added to Customer, but if I
//add new methods to Customer they won't be added to Person. Example:
Customer.prototype.setAmountDue = function(amountDue) {
 this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function() {
 return this.amountDue;
};

//Let's try: 
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());
</code></pre>

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var Person = function (name) {
 this.name = name;
};
Person.prototype.getName = function () {
 return this.name;
};
var john = new Person("John");
alert(john.getName());
Person.prototype.sayMyName = function () {
 alert('Hello, my name is ' + this.getName());
};
john.sayMyName();
var Customer = function (name) {
 this.name = name;
};
Customer.prototype = new Person();

var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();
Customer.prototype.setAmountDue = function (amountDue) {
 this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function () {
 return this.amountDue;
};
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());</code></pre>
</div>
</div>


While as said I can't call setAmountDue(), getAmountDue() on a Person.

<pre><code>//The following statement generates an error.
john.setAmountDue(1000);
</code></pre>

blocks|key|1622056|text|我发现当引用obj_n.prop_X时，将“原型链”解释为递归约定是很有帮助的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1622057|如果obj_n.prop_X不存在，请检查obj_n%2B1.prop_X+where+obj_n%2B1+=+obj_n.[[prototype]]|1622058|如果最终在第k个prototype对象中找到prop_X，则|1622059|obj_1.prop_X+=+obj_1.[[prototype]].[[prototype]]..(k-times)..[[prototype]].prop_X|1622060|您可以在此处找到Javascript对象的属性关系图：|1622061|📷|atomic|1622062|http://jsobjects.org|1622063|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/5183c540303e1d54c8b3b8ff2dc7442f.jpeg|imageAlt|1|LINK|MUTABLE|url|http://jsobjects.org/^0|6|C|0|2|C|L|E|16|T|0|M|6|0|0|29|0|0|0|1|0|0|0|K|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1M|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|Q|3|R|5|6|7|1R|8|@]|D|@$9|1S|A|1T|1|1U]]|E|$]]|$1|S|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z|10|-4]]|11|$5|12|W|13|E|$14|15]]]]

I found it helpful to explain the "prototype chain" as recursive convention when <code>obj_n.prop_X</code> is being referenced:

if <code>obj_n.prop_X</code> doesn't exist, check <code>obj_n+1.prop_X</code> where <code>obj_n+1 = obj_n.[[prototype]]</code>

If the <code>prop_X</code> is finally found in the k-th prototype object then

<code>obj_1.prop_X = obj_1.[[prototype]].[[prototype]]..(k-times)..[[prototype]].prop_X</code>

You can find a graph of the relation of Javascript objects by their properties here:

 <img src="https://i.stack.imgur.com/2tGyY.jpg" alt="js objects graph"> 

<a href="http://jsobjects.org" rel="noreferrer">http://jsobjects.org</a>

blocks|key|1622109|text|用更好的图片解释JavaScript+prototype-based+inheritance的另一种尝试|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1622110|​|1622111|📷|atomic|1622112|1622113|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rus0000/jsinheritance|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fc2af44e0cd470d08028ae1d2f3e91e6.png|imageAlt^0|8|12|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|I|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|S|N|T|C|$U|V|W|-4]]]]

Another attempt to explain <a href="https://github.com/rus0000/jsinheritance" rel="noreferrer">JavaScript prototype-based inheritance</a> with better pictures

<a href="https://github.com/rus0000/jsinheritance" rel="noreferrer"><img src="https://i.stack.imgur.com/6gEKe.png" alt="Simple objects inheritanse"></a>

blocks|key|1622233|text|The+Definitive+Guide+to+Object-Oriented+JavaScript+-一个非常简洁和清晰的视频解释，大约30分钟的提问(原型继承主题从5:45开始，尽管我更喜欢听整个视频)。这个视频的作者还制作了JavaScript对象可视化网站http://www.objectplayground.com/。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1622234|📷|atomic|1622235|1622236|​|1622237|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=PMfcsYzj-9M|1|https://youtu.be/PMfcsYzj-9M?t=344|2|http://www.objectplayground.com/|3|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/724d5f82910a512acc96f4ad37929c34.jpeg|imageAlt|4|https://ask.qcloudimg.com/http-save/yehe-900000/bb00dfa92bf961b0d82dfd35f32273fa.jpeg^0|0|1E|0|2C|4|1|3O|W|2|0|0|1|3|0|0|1|4|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]|$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]]|C|$]]|$1|D|3|E|5|F|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|G|3|E|5|F|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]|T|$5|M|N|O|C|$P|U]]|V|$5|W|N|X|C|$Y|Z|10|-4]]|11|$5|W|N|X|C|$Y|12|10|-4]]]]

<a href="https://www.youtube.com/watch?v=PMfcsYzj-9M">The Definitive Guide to Object-Oriented JavaScript</a> - a very concise and clear ~30min video explanation of the asked question (Prototypal Inheritance topic begins from <a href="https://youtu.be/PMfcsYzj-9M?t=344">5:45</a>, although I'd rather listen to the whole video). The author of this video also made JavaScript object visualizer website <a href="http://www.objectplayground.com/">http://www.objectplayground.com/</a>.<a href="https://i.stack.imgur.com/Vf4qR.jpg"><img src="https://i.stack.imgur.com/Vf4qR.jpg" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/xcRpT.jpg"><img src="https://i.stack.imgur.com/xcRpT.jpg" alt="enter image description here"></a>

blocks|key|1622311|text|只是你已经有了一个带有Object.new的对象，但在使用构造器语法时，你仍然没有对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1622312|entityMap^0|B|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

It's just that you already have an object with <code>Object.new</code> but you still don't have an object when using the constructor syntax.

I'm not that into dynamic programming languages but I've written my fair share of JavaScript code. I never really got my head around this prototype-based programming, does any one know how this works?
<pre><code>var obj = new Object();
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();
</code></pre>
I remember a lot discussion I had with people a while back (I'm not exactly sure what I'm doing) but as I understand it, there's no concept of a class. It's just an object, and instances of those objects are clones of the original, right?
But what is the exact purpose of this &quot;.prototype&quot; property in JavaScript? How does it relate to instantiating objects?
<h3>Update: correct way</h3>
<pre><code>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
</code></pre>
Also these <a href="http://ejohn.org/apps/learn/#64" rel="noreferrer">slides</a> really helped a lot.

How does JavaScript .prototype work?

Java

我对动态编程语言不是很感兴趣，但我已经写了我自己的JavaScript代码。我从来没有真正理解过这种基于原型的编程，有人知道它是如何工作的吗？var obj = new Object();obj.prototype.test = function() { alert('Hello?'); };var obj2 = ne...

问JavaScript .prototype是如何工作的？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript .prototype是如何工作的？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript .prototype是如何工作的？
EN