blocks|key|2789128|text|简单英语中的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2789129|构造器和原型？|blockquote|2789130|2789131|2789132|构造函数创建对象并为其分配原型。原型是具有各种属性的对象，对象可以通过原型链继承这些属性。与往常一样，示例可以帮助您：|2789133|function+Foo()+{
}
Foo.prototype.answer+=+42;

var+f+=+new+Foo();
console.log(f.answer);+//+"42"|code-block|syntax|javascript|2789134|Foo是一个构造函数。使用new+Foo时，Foo.prototype所指向的对象将成为所创建对象的原型。当你执行f.answer时，因为f没有自己的名为answer的属性，所以JavaScript引擎查看f的原型是否有一个。因为有，它使用了原型中的值，我们在控制台中看到"42“。这就是如何解析属性:通过查看一个对象，看看它是否有一个给定名称的属性，如果没有，就转到它的原型，看看它是否有这个属性，如果没有，就转到它的原型，依此类推。|offset|length|style|CODE|2789135|请注意，上面的结果是，在使用原型创建对象之后，将属性添加到原型中工作得很好；您可以通过对象使用这些新属性：|2789136|function+Foo()+{
}
Foo.prototype.answer+=+42;

var+f+=+new+Foo();
console.log(f.question);+//+"undefined",+neither+`f`,+nor+`Foo.prototype`,+nor
+++++++++++++++++++++++++//+`Object.prototype`+has+a+`question`+property

Foo.prototype.question+=+"Life,+the+Universe,+and+Everything";
console.log(f.question);+//+"Life,+the+Universe,+and+Everything"|2789137|从ES5开始，构造函数不再是将原型分配给对象的唯一方法。现在，您也可以通过Object.create完成此操作。上面的大致相当于下面的代码：|2789138|var+fooProto+=+{
++++answer:+42
};
var+f+=+Object.create(fooProto);
console.log(f.answer);+//+"42"|2789139|2789140|使用原型和构造器背后的目的是什么？|2789141|2789142|2789143|在对象之间共享特征。原型的属性可以是函数或数据，使用该原型的对象可以访问和重用这两者。|2789144|请在下面回复您的评论：|2789145|2789146|我理解关于共享特征的部分，但是我能得到更多的细节吗？|2789147|2789148|2789149|好吧，考虑一个Circle构造函数：|2789150|function+Circle(radius)+{
++++this.r+=+radius;
}
Circle.prototype.radius+=+function()+{
++++return+this.r;
};
Circle.prototype.diameter+=+function()+{
++++return+this.r+*+2;
};
Circle.prototype.circumference+=+function()+{
++++return+2+*+Math.PI+*+this.r;
};
Circle.prototype.area+=+function()+{
++++return+Math.PI+*+this.r+*+this.r;
};|2789151|所有由Circle构造的对象都将Circle.prototype作为其原型，因此它们都具有方便的diameter、circumference等。阿尔。函数。|2789152|var+c1+=+new+Circle(3);
console.log(c1.area());++++++++++//+28.274333882308138
console.log(c1.circumference());+//+18.84955592153876

var+c2+=+new+Circle(5);
console.log(c2.area());++++++++++//+78.53981633974483
console.log(c2.circumference());+//+31.41592653589793|2789153|它们以一种内存高效的方式共享这些属性:每个实例都没有自己的属性副本(这意味着在每个obejct中保留每个属性的名称和值)；相反，它们只有一个对它们共享的原型的引用，原型中包含这些属性。|2789154|entityMap^0|0|0|0|0|0|0|0|3|D|7|M|D|1L|8|1X|1|25|6|2V|1|0|0|0|11|D|0|0|0|0|0|0|0|0|0|0|0|0|7|6|0|0|3|6|G|G|1C|8|1L|D|0|0|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1S|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|1V|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1W|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|1X|8|@$P|1Y|Q|1Z|R|S]|$P|20|Q|21|R|S]|$P|22|Q|23|R|S]|$P|24|Q|25|R|S]|$P|26|Q|27|R|S]|$P|28|Q|29|R|S]|$P|2A|Q|2B|R|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|2C|8|@]|9|@]|A|$]]|$1|V|3|W|5|K|7|2D|8|@]|9|@]|A|$L|M]]|$1|X|3|Y|5|6|7|2E|8|@$P|2F|Q|2G|R|S]]|9|@]|A|$]]|$1|Z|3|10|5|K|7|2H|8|@]|9|@]|A|$L|M]]|$1|11|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|12|3|13|5|D|7|2J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2M|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|D|7|2P|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2S|8|@$P|2T|Q|2U|R|S]]|9|@]|A|$]]|$1|1H|3|1I|5|K|7|2V|8|@]|9|@]|A|$L|M]]|$1|1J|3|1K|5|6|7|2W|8|@$P|2X|Q|2Y|R|S]|$P|2Z|Q|30|R|S]|$P|31|Q|32|R|S]|$P|33|Q|34|R|S]]|9|@]|A|$]]|$1|1L|3|1M|5|K|7|35|8|@]|9|@]|A|$L|M]]|$1|1N|3|1O|5|6|7|36|8|@]|9|@]|A|$]]|$1|1P|3|-4|5|6|7|37|8|@]|9|@]|A|$]]]|1Q|$]]

<blockquote>
 Constructor and protoypes in plain English?
</blockquote>

Constructor functions create objects and assign prototypes to them. A prototype is an object with various properties that an object can inherit through the prototype chain. As always, examples help:

<pre><code>function Foo() {
}
Foo.prototype.answer = 42;

var f = new Foo();
console.log(f.answer); // "42"
</code></pre>

<code>Foo</code> is a constructor function. When you use <code>new Foo</code>, the object that <code>Foo.prototype</code> points to will become the prototype of the object that gets created. When you do <code>f.answer</code>, since <code>f</code> doesn't have its own property with the name <code>answer</code>, the JavaScript engine looks at <code>f</code>'s prototype to see if it has one. Since it does, it uses the value from the prototype and we see "42" in the console. This is how properties are resolved: By looking at an object seeing if it has a property with the given name, and if not, going to its prototype to see if it has the property, and if not going to its prototype, and so on.

Note that a consequence of the above is that adding properties to a prototype after an object has been created using that prototype works just fine; you can use those new properties via the object:

<pre><code>function Foo() {
}
Foo.prototype.answer = 42;

var f = new Foo();
console.log(f.question); // "undefined", neither `f`, nor `Foo.prototype`, nor
 // `Object.prototype` has a `question` property

Foo.prototype.question = "Life, the Universe, and Everything";
console.log(f.question); // "Life, the Universe, and Everything"
</code></pre>

As of ES5, constructor functions are no longer the only way you can assign prototypes to objects. Now you can also do it via <code>Object.create</code>. The above is roughly equivalent to this:

<pre><code>var fooProto = {
 answer: 42
};
var f = Object.create(fooProto);
console.log(f.answer); // "42"
</code></pre>

<blockquote>
 What is the purpose behind using Prototypes and constructors?
</blockquote>

To share characteristics between objects. The properties of a prototype can be functions or data, both of which the objects using that prototype have access to and can reuse.

Re your comment below:

<blockquote>
 I understood the part about sharing characteristics, but could I get some more detailing in to it
</blockquote>

Well, consider a <code>Circle</code> constructor:

<pre><code>function Circle(radius) {
 this.r = radius;
}
Circle.prototype.radius = function() {
 return this.r;
};
Circle.prototype.diameter = function() {
 return this.r * 2;
};
Circle.prototype.circumference = function() {
 return 2 * Math.PI * this.r;
};
Circle.prototype.area = function() {
 return Math.PI * this.r * this.r;
};
</code></pre>

All objects constructed by <code>Circle</code> will get <code>Circle.prototype</code> as their prototype, and so they all have the handy <code>diameter</code>, <code>circumference</code>, et. al. functions.

<pre><code>var c1 = new Circle(3);
console.log(c1.area()); // 28.274333882308138
console.log(c1.circumference()); // 18.84955592153876

var c2 = new Circle(5);
console.log(c2.area()); // 78.53981633974483
console.log(c2.circumference()); // 31.41592653589793
</code></pre>

They share those properties in a memory-efficient way: Each instance doesn't have its own copy of those properties (which would mean keeping each property name and its value in each obejct); instead, they just have a reference to their prototype, which they share, which has those properties.

blocks|key|181412|text|类提供了用于构建对象的模板(类似于模板)。在大多数语言中，模板是由菱形制成的，所以你不能改变它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181413|在基于原型的语言中，就像跟踪现有对象的轮廓来创建新对象一样。如果您随后决定，“我需要在这个雪人对象上有一个更大的嘴巴”，您可以在用作原型的对象上使嘴巴更大，并且从修改后的雪人对象创建的任何对象都将具有更大的嘴巴。如果然后使用一个旧的雪人对象作为原型，则从它创建的雪人对象将具有原始的、较小的嘴巴。|181414|构造函数是用于在给定类或原型对象(取决于语言)的情况下创建新对象的代码。|181415|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

A class provides a template (like a stencil) for building objects. In most languages, the stencil is made of diamond, so you can't alter it.

In a prototype-based language, it is like you were tracing the outline of an existing object to make the new object. If you then decide, "I need a larger mouth on this snowman object", you make the mouth larger on the object you are using as a prototype and any objects created from this modified snowman object will have the larger mouth. If you then use one of the old snowmen objects as your prototype, the snowmen objects created from it will have the original, smaller mouth.

A constructor is code for creating a new object given the class or the prototype object (depending on language).

blocks|key|177392|text|Prototype通常是定义函数或默认值的地方。如果我定义了一个person对象和一个Person的方法getName，那么我可以肯定地说getName对Jon、Mike和Betty实例做了同样的事情(它将返回this.name)。因为函数getName对Person的每个实例都执行相同的操作，所以您不希望在Person构造函数主体中定义它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|177393|function+Person(name){
++this.name+=+name;+//+This+refers+to+the+current+instance
++this.getName+=+function(){
++++return+this.name;
++}
}
var+Paul+=+new+Person("Paul");//+Paul+has+its+own+getName+function
var+Ben+=+new+Person("Ben");//+Ben+has+its+own+getName+function
...|code-block|syntax|javascript|177394|在上面的代码中，Person被称为构造函数，您可以通过调用constrictor：var+someone=new+Person来创建Person的新实例。现在someone是person的一个实例。你可以在上面的代码中看到，每个实例都有自己的getName，如果对象有很多函数，而你正在创建很多实例，那么每次你创建一个实例和内存时，启动这些函数就是在浪费CPU时间(因为每个实例都有一堆函数和其他实例做同样的事情)。|177395|对于上面创建的对象Paul和Ben，语句Paul.hasOwnProperty('getName')将为真。|177396|如果将getName放在Person.prototype上，那么所有Person实例实际上只有一个getName函数。一个新的Person实例将通过Person.prototype拥有getName，但是getName并不是每次我创建Person时都会初始化。当我创建100个Person实例，然后更改Person.prototype.getName时，所有这些创建的实例都将使用更改后的getName函数。|177397|还有一个需要考虑的继承问题(JavaScript没有类)。您可以将Person的所有这些共享方法复制到(例如)+Employee的原型中。因为getName是Person.prototype上的一个函数，Emloyee继承了它，所以您可以直接调用employeeInstance.getName()。如果Employee需要在getName中做一些额外的工作，您可以覆盖Person函数，但仍然调用它(参见下面的代码)|177398|Employee.prototype.getName=function(){
++return+Person.getName.call(this)+%2B+"+"+%2B+this.jobTitle;
}|177399|有关构造函数、继承和重写函数的更多信息，请参阅check+out+this+answer。|177400|如果您不理解这些单词，我建议您阅读Java+tutorial。它解释了为什么要这样做。虽然Java在技术上使用类，但它将解释什么是继承和覆盖，以及为什么要使用它。|177401|OOP很难用一篇文章来解释，但上面的教程将会涵盖其中的一些内容。JavaScript不是JavaScript，不支持私有成员、类型检查和接口。另一方面，当您想要更改对象的实例时，JavaScript要灵活得多。|177402|当你检验模式时，OOP的真正威力就会显现出来。你可以在谷歌上搜索它，因为互联网上有无数的文章。|177403|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711|1|http://docs.oracle.com/javase/tutorial/java/index.html^0|1G|7|1X|7|2X|9|3C|7|0|0|15|M|27|7|0|K|U|0|0|3F|Q|0|0|N|L|0|0|H|D|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1U|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|S|3|T|5|H|7|1Y|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|1Z|8|@]|D|@$9|20|A|21|1|22]]|E|$]]|$1|W|3|X|5|6|7|23|8|@]|D|@$9|24|A|25|1|26]]|E|$]]|$1|Y|3|Z|5|6|7|27|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|28|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|29|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]]]

Prototype is where you usually define functions or default values. If I define a person object and a method <code>getName</code> of Person then I can safely say that <code>getName</code> does the same for Jon, Mike and Betty instances (it'll return <code>this.name</code>). Because the function <code>getName</code> does the same for every instance of Person, you don't want it to be defined in the Person constructor body:

<pre><code>function Person(name){
 this.name = name; // This refers to the current instance
 this.getName = function(){
 return this.name;
 }
}
var Paul = new Person("Paul");// Paul has its own getName function
var Ben = new Person("Ben");// Ben has its own getName function
...
</code></pre>

In the code above Person is called the constructor, you can create new instances of Person by calling the constrictor: <code>var someone=new Person</code>. Now <code>someone</code> is an instance of person.
You see in the code above that every instance has its own getName, if the object has many functions and you're creating many instances you will be wasting CPU time by initiating the functions every time you create an instance and memory (because every instance has a bunch of functions that do the same thing as every other instances).

For the above created objects, Paul and Ben, the statement <code>Paul.hasOwnProperty('getName')</code> will be true.

If you put getName on Person.prototype then there will actually be only one getName function for all Person instances. A new Person instance will have getName through Person.prototype, but getName isn't initialized every time I create a Person. When I create a hundred Person instances and then change Person.prototype.getName all these created instances will use the changed getName function.

Then there is inheritance you want to think about (JavaScript doesn't have classes). You can take all those shared methods of Person and copy them to the prototype of (for example) Employee. Because getName is a funciton on Person.prototype and Emloyee inherits it you can call directly <code>employeeInstance.getName()</code>. If Employee needs some extra work in getName you can override the Person function but still call it (see code below)

<pre><code>Employee.prototype.getName=function(){
 return Person.getName.call(this) + " " + this.jobTitle;
}
</code></pre>

For more information about constructor functions, inheritance and overriding functions <a href="https://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711">check out this answer</a>.

If you don't understand these words I suggest reading the <a href="http://docs.oracle.com/javase/tutorial/java/index.html" rel="nofollow noreferrer">Java tutorial</a>. It explains why to do this. Although Java technically uses classes, it'll explain what inheritance and overriding is and why to use it.

OOP is kind of hard to explain in one post, but the tutorial above will cover some of it. Java is not JavaScript and things like private members, type checking and interfaces are not supported in JavaScript. On the other hand JavaScript is a lot more flexible when you want to change instances of an object.

The real power of OOP will reveal itself when you check out patterns. You can google for it as there are countless articles on the Internet.

blocks|key|179554|text|首先，我建议你看看以这个人(克罗克福德)为特色的this+playlist。它可能很旧，但它确实很好地解释了JavaScript的“逻辑”，并且您的问题在第三个视频中得到了特别的回答。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|179555|我将通过描述如何在其他传统的面向对象编程语言中描述对象来开始回答这个问题，因为我还想针对您在问题开始时发布的Crockford注释。|179556|为了理解构造函数，你首先必须对对象有一个很好的理解。在传统的OOP语言中，对象是描述对象状态的变量(称为属性或字段)以及描述其行为的函数(称为方法)的集合。在这些(非JavaScript)语言中，这些对象的“蓝图”称为类。|179557|因此，如果我在Java中创建一个Human类，一个非常简单的描述将如下所示：|179558|class+Human+{
++++String+name;
++++int+weight;+//+kg
++++int+height;+//+cm

++++void+eat(int+foodWeight)+{
++++++++this.weight+%2B=+foodWeight;
++++}

++++Human(int+weight,+int+height,+int+name)+{
++++++++this.weight+=+weight;+
++++++++this.height+=+height;
++++++++this.name+++=+name;
++++}
}|code-block|syntax|javascript|179559|然后，我将使用上面的“蓝图”创建一个对象，如下所示：|style|BOLD|179560|Human+Joe+=+new+Human(90,+180,+"Joe");|179561|现在，我们说Joe+是+Human的一个实例，它的体重是90公斤，身高是180厘米。|CODE|179562|在上面的类中，您注意到我有一个Human()函数，该函数用于创建对象并在创建对象时定义其状态。这基本上就是构造函数所做的事情。|179563|那么JavaScript有什么不同呢？|179564|为了在创建时吸引大众(正如您将在我发布的视频系列中听到的那样)，JavaScript引入了一些类似Java语言的语法。根据Crockford的说法，这给程序员提供了一种想法，因为他们已经了解/学习了一些Java，所以他们可以只学习一些新命令，然后继续用JavaScript编程，而在现实中，两者之间的差异远远大于它们的相似之处。|179565|在JavaScript中，为了以一种看起来像Java类的方式创建对象，您可以使用如下的函数语法：|179566|var+Human+=+function(name,+height,+weight)+{
++++this.name+++=+name;
++++this.height+=+height;
++++this.weight+=+weight;

++++this.eat++++=+function(foodWeight)+{
++++++++this.weight+%2B=+foodWeight;
++++};
};|179567|然后，如果您想要像我们上面那样定义Joe，您可以执行以下操作：|179568|var+Joe+=+new+Human("Joe",+180,+90);|179569|您可以看到Java和JavaScript语法之间的相似之处。因此，回答您的第一个问题:+JavaScript构造函数是在使用new调用时创建并返回由this指向的隐式创建的对象的函数。|179570|那么原型在哪里呢？在JavaScript中，函数本身也是JS对象，并且它们有一个名为prototype的属性。因此，我们上面创建的Human()构造函数有一个名为prototype的属性，该属性引用一个对象，该对象的属性和方法由Joe以及Human的所有其他实例继承，并且可以对该对象进行扩展，以创建将由所有这些实例继承的属性。|179571|例如，著名的toString方法就是Function.prototype中的方法之一。你可以定义|179572|Human.prototype.toString+=+function()+{
++++return+this.name+%2B+"+is+"+%2B+this.height+%2B+"+cm+tall+and+weighs+"+%2B+this.weight+%2B+"+kg";
}|179573|然后，如果您调用Joe.toString()，或者当您执行诸如alert(Joe)之类的自动调用toString()的操作时，返回的值将是"Joe身高190厘米，体重80公斤“。|179574|关于OOP和JavaScript的更多细节可以在您的问题的上下文中讨论，但我认为我的答案已经足够长了！我希望这能回答你的问题。|179575|entityMap|0|LINK|mutability|MUTABLE|url|http://www.youtube.com/playlist?list=PL5586336C26BDB324^0|O|D|0|0|0|0|0|0|I|2|0|0|6|3|C|5|A|1|0|F|7|0|0|0|0|0|H|3|0|0|1Q|3|22|4|0|16|9|1T|7|29|9|36|3|3B|5|0|6|8|I|I|0|0|8|E|V|A|1C|A|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|D|3|E|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|20|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|21|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|22|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|23|8|@$A|24|B|25|Q|R]]|9|@]|C|$]]|$1|S|3|T|5|L|7|26|8|@]|9|@]|C|$M|N]]|$1|U|3|V|5|6|7|27|8|@$A|28|B|29|Q|W]|$A|2A|B|2B|Q|W]|$A|2C|B|2D|Q|R]]|9|@]|C|$]]|$1|X|3|Y|5|6|7|2E|8|@$A|2F|B|2G|Q|W]]|9|@]|C|$]]|$1|Z|3|10|5|6|7|2H|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|2I|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|2J|8|@]|9|@]|C|$]]|$1|15|3|16|5|L|7|2K|8|@]|9|@]|C|$M|N]]|$1|17|3|18|5|6|7|2L|8|@$A|2M|B|2N|Q|W]]|9|@]|C|$]]|$1|19|3|1A|5|L|7|2O|8|@]|9|@]|C|$M|N]]|$1|1B|3|1C|5|6|7|2P|8|@$A|2Q|B|2R|Q|W]|$A|2S|B|2T|Q|W]]|9|@]|C|$]]|$1|1D|3|1E|5|6|7|2U|8|@$A|2V|B|2W|Q|W]|$A|2X|B|2Y|Q|W]|$A|2Z|B|30|Q|W]|$A|31|B|32|Q|W]|$A|33|B|34|Q|W]]|9|@]|C|$]]|$1|1F|3|1G|5|6|7|35|8|@$A|36|B|37|Q|W]|$A|38|B|39|Q|W]]|9|@]|C|$]]|$1|1H|3|1I|5|L|7|3A|8|@]|9|@]|C|$M|N]]|$1|1J|3|1K|5|6|7|3B|8|@$A|3C|B|3D|Q|W]|$A|3E|B|3F|Q|W]|$A|3G|B|3H|Q|W]]|9|@]|C|$]]|$1|1L|3|1M|5|6|7|3I|8|@]|9|@]|C|$]]|$1|1N|3|-4|5|6|7|3J|8|@]|9|@]|C|$]]]|1O|$1P|$5|1Q|1R|1S|C|$1T|1U]]]]

First of all, I suggest you take a look at <a href="http://www.youtube.com/playlist?list=PL5586336C26BDB324" rel="noreferrer">this playlist</a> featuring the man himself (Crockford). It might be old, but it really explains JavaScript "logic" very well, and your question is particularly answered in the third video.

I'm going to begin answering this question by describing how objects are depicted in other traditional Object-Oriented Programming languages, because I want to also target the Crockford comment you have posted in the start of the question. 

In order to understand Constructors, you first have to have a good understanding of Objects. In traditional OOP languages, an Object is a collection of variables (called properties or fields) that describe the object's state, as well as functions (called methods) that describe it's behaviour. In those (non-JavaScript) languages, the "blueprint" of those objects is called a Class.

So, if I create a Human class in Java, a very simplistic depiction would look like this:

<pre><code>class Human {
 String name;
 int weight; // kg
 int height; // cm

 void eat(int foodWeight) {
 this.weight += foodWeight;
 }

 Human(int weight, int height, int name) {
 this.weight = weight; 
 this.height = height;
 this.name = name;
 }
}
</code></pre>

And then, I would create an Object using the above "blueprint" like so:

<pre><code>Human Joe = new Human(90, 180, "Joe");
</code></pre>

And now, we say <code>Joe</code> is an instance of <code>Human</code>, whose weight is 90 kg and height is 180 cm.

In the class above, you noticed I had a function <code>Human()</code> that was used to create the object and define it's state as it was created. This is essentially what a Constructor does.

So what's different about JavaScript?

In order to appeal to the masses at the time of it's creation (as you will hear in the video series I posted), JavaScript incorporated some Java-like syntax. What this has done, according to Crockford, is giving programmers the idea that, because they already know/learned some Java, then they can just learn a few new commands and then go ahead and program in JavaScript, while in reality, the differences between the two far outweigh their similarities.

In JavaScript, in order to create an object in a way that it looks like a Java class, you would use the function syntax like so:

<pre><code>var Human = function(name, height, weight) {
 this.name = name;
 this.height = height;
 this.weight = weight;

 this.eat = function(foodWeight) {
 this.weight += foodWeight;
 };
};
</code></pre>

And then, if you want to define <code>Joe</code> as we did above, you would do the following:

<pre><code>var Joe = new Human("Joe", 180, 90);
</code></pre>

You can see the similarities between the Java and JavaScript syntaxes shown. So, to answer your first question: JavaScript Constructors are functions that, when called with <code>new</code>, create and return an implicitly created object, pointed to by <code>this</code>.

So where does the Prototype come in? Well, In JavaScript, functions are also JS objects themselves, and they have a property called <code>prototype</code>. So, the <code>Human()</code> constructor we created above has a property called <code>prototype</code>, and this property refers to an object whose properties and methods are inherited by <code>Joe</code>, as well as all other instances of <code>Human</code>, and this object can be extended in order to create properties that will be inherited by all of those instances.

For example, one of the methods in <code>Function.prototype</code> is the famous <code>toString</code> method. You could define

<pre><code>Human.prototype.toString = function() {
 return this.name + " is " + this.height + " cm tall and weighs " + this.weight + " kg";
}
</code></pre>

then, if you call <code>Joe.toString()</code> or when you do something like <code>alert(Joe)</code> that automatically calls <code>toString()</code>, the value returned would be "Joe is 190 cm tall and weighs 80 kg". 

There are many more details about OOP and JavaScript that could be covered in the context of your question, but I think my answer is long enough! I hope this answers your question.

blocks|key|178902|text|其他答案已经很好地回答了您的问题，但我还想添加prototype的另一个方面:继承。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|178903|正如其他答案所示，附加到myObject.prototype的任何属性或方法都在实例之间共享：|178904|var+Car+=+function(color)+{
++++this.color+=+color;
};+
Car.prototype.openDoor+=+function()+{
++++alert("Door+is+open!");
}|code-block|syntax|javascript|178905|现在，您可以在每个实例上调用honk方法：|178906|var+car1+=+new+Car('red');
var+car2+=+new+Car('blue');
car1.openDoor();
car2.openDoor();|178907|我们可以在Car函数中包含openDoor，即|178908|var+Car+=+function(color)+{
++++this.color+=+color;
++++this.openDoor+=+function()+{+alert("Door+is+open!");+}
};+|178909|但是，这将为每个Car实例添加一个openDoor方法，这是非常浪费的，特别是当它对所有实例执行完全相同的操作时。通过将其添加到原型中，我们可以将其与所有实例共享。|178910|到目前为止还不错，但是当您将另一个对象分配给原型时，prototype的力量才真正显现出来：|178911|var+Vehicle+=+function(color)+{
++++this.color+=+color;
};+
Vehicle.prototype.honk+=+function()+{
++++alert("Honk+Honk!+I+am+"+%2B+this.color);
}

var+Car+=+function(color,+maxPassengers){+
++++this.color+=+color;
++++this.maxPassengers+=+maxPassengers;
}+
Car.prototype+=+new+Vehicle();++
Car.prototype.constructor+=+Car;
Car.prototype.openDoor+=+function(){+
++++alert("Door+is+open!+I+have+space+for+"+%2B+this.maxPassengers);
}|178912|因为我们将Car.prototype赋值给Vehicle构造函数，所以我们实际上已经将Car链接到Vehicle，因此继承了它的所有属性和方法。实际上，我们inherit了Vehicle的所有特性。|178913|entityMap^0|N|9|0|C|I|0|0|E|4|0|0|5|3|D|8|0|0|8|3|H|8|0|Q|9|0|0|5|D|L|7|17|3|1D|7|26|7|2E|7|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|J|7|1T|8|@]|D|@]|E|$K|L]]|$1|10|3|11|5|6|7|1U|8|@$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]|$9|21|A|22|B|C]|$9|23|A|24|B|C]|$9|25|A|26|B|C]]|D|@]|E|$]]|$1|12|3|-4|5|6|7|27|8|@]|D|@]|E|$]]]|13|$]]

The other answers already answer your question pretty well, but I want to add one more aspect of <code>prototype</code>s to the mix: Inheritance

As the other answers already show, any properties or methods attached to <code>myObject.prototype</code> are shared between the instances:

<pre><code>var Car = function(color) {
 this.color = color;
}; 
Car.prototype.openDoor = function() {
 alert("Door is open!");
}
</code></pre>

Now, you can call the <code>honk</code> method on each instance:

<pre><code>var car1 = new Car('red');
var car2 = new Car('blue');
car1.openDoor();
car2.openDoor();
</code></pre>

We could include <code>openDoor</code> inside the <code>Car</code> function, i.e.

<pre><code>var Car = function(color) {
 this.color = color;
 this.openDoor = function() { alert("Door is open!"); }
}; 
</code></pre>

However, this would add an <code>openDoor</code> method to each instance of <code>Car</code>, which is very wasteful, especially if it does exactly the same thing for all instances. By adding it to the prototype instead, we share it with all instances.

So far so good, but the power of <code>prototype</code>s really shows when you assign another object to the prototype:

<pre><code>var Vehicle = function(color) {
 this.color = color;
}; 
Vehicle.prototype.honk = function() {
 alert("Honk Honk! I am " + this.color);
}

var Car = function(color, maxPassengers){ 
 this.color = color;
 this.maxPassengers = maxPassengers;
} 
Car.prototype = new Vehicle(); 
Car.prototype.constructor = Car;
Car.prototype.openDoor = function(){ 
 alert("Door is open! I have space for " + this.maxPassengers);
}
</code></pre>

Since we are assigning <code>Car.prototype</code> to the <code>Vehicle</code> constructor, we essentially have chained <code>Car</code> to <code>Vehicle</code> and therefore inherited all of its properties and methods. In effect, we <code>inherit</code> all of <code>Vehicle</code>s features.

blocks|key|3001762|text|简单英语中的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001763|构造器和原型？|blockquote|3001764|3001765|3001766|顾名思义，它创建一些新的东西(一个对象)，它创建的所有东西都遵循一个模板，即原型。|3001767|在JavaScript中，任何函数都可以用作构造函数，只需以不同于普通函数调用的方式调用它们即可；例如：|3001768|function+Foo()
{
}

Foo();+//+normal+function+call,+returns+nothing
var+f+=+new+Foo();+//+constructor+call,+returns+a+new+Foo+object

alert(f+instanceof+Foo)+//+"true"|code-block|syntax|javascript|3001769|如前所述，原型就像一个模板；您可以在运行时更改原型，更改会影响从该原型继承的所有对象。任何对象的原型都可以通过其构造函数的.prototype属性来访问。例如：|offset|length|style|CODE|3001770|var+f+=+new+Foo();
Foo.prototype.bar+=+'baz';

alert(f.bar)+//+"baz"|3001771|3001772|使用Prototype的需要是什么？我想了解使用原型和构造器背后的目的？我的意思是，它们是否提供了更多的灵活性。|3001773|3001774|3001775|原型用于使用方法和属性定义共享行为和/或数据，类似于您对面向类的语言的期望。它们还可以相互继承，创建一个从原型一直到Object的原型链；甚至函数实际上也是Function对象。|3001776|如果没有原型，您将不得不在构造函数中完成所有工作：|3001777|function+Foo()
{
++++//+add+methods+and+data
++++this.bar+=+'baz';
}|3001778|在上面的示例中，您可能看不到直接的好处，但有一些好处：|3001779|3001780|内存；向每个对象实例添加方法比通过原型链提供方法消耗更多的内存。无需遍历原型链的优势通常由objects.|ordered-list-item|3001781|Hierarchy；实例化所用的时间来拉平。当您的项目变得更大时，您最终将需要创建某种对象层次结构，如果没有原型，这将更加繁琐。|3001782|3001783|但是，如果您希望创建特权方法，则需要在构造函数本身中附加这些方法；不可能在原型中执行此操作；例如：|3001784|function+Foo()
{
++++var+bar+=+'baz';

++++//+privileged+method
++++this.bar+=+function()+{
++++++++return+bar;
++++}
}
var+f+=+new+Foo();
alert(f.bar());+//+"baz"|3001785|3001786|我问这个是因为我在过去的6个月里一直在使用这个语言，从来没有遇到过使用原型和构造函数的情况。|3001787|3001788|3001789|如果您使用过new+Option(...)或new+XYZ()+anywhere，则使用了构造函数；如果您在任何时候使用过.hasOwnProperty()或.toString()，则应该使用prototype链:)|3001790|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object^0|0|0|0|0|0|0|0|1P|A|0|0|0|0|0|0|1M|6|26|8|1M|6|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|6|F|M|9|1P|H|27|B|0^^$0|@$1|2|3|4|5|6|7|20|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|21|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|24|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|25|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|26|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|27|8|@$R|28|S|29|T|U]]|9|@]|A|$]]|$1|V|3|W|5|M|7|2A|8|@]|9|@]|A|$N|O]]|$1|X|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|2C|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2F|8|@$R|2G|S|2H|T|U]|$R|2I|S|2J|T|U]]|9|@$R|2K|S|2L|1|2M]]|A|$]]|$1|14|3|15|5|6|7|2N|8|@]|9|@]|A|$]]|$1|16|3|17|5|M|7|2O|8|@]|9|@]|A|$N|O]]|$1|18|3|19|5|6|7|2P|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|1D|7|2R|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|1D|7|2S|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|2T|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|M|7|2V|8|@]|9|@]|A|$N|O]]|$1|1L|3|-4|5|6|7|2W|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|D|7|2X|8|@]|9|@]|A|$]]|$1|1O|3|-4|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1P|3|-4|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|30|8|@$R|31|S|32|T|U]|$R|33|S|34|T|U]|$R|35|S|36|T|U]|$R|37|S|38|T|U]]|9|@]|A|$]]|$1|1S|3|-4|5|6|7|39|8|@]|9|@]|A|$]]]|1T|$1U|$5|1V|1W|1X|A|$1Y|1Z]]]]

<blockquote>
 Constructor and prototypes in plain English?
</blockquote>

As the name "constructor" suggests, it creates something new (an object) and everything it creates follows a template, the prototype.

In JavaScript, any function can be used as a constructor, simply by calling them differently from a normal function call; for example:

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

Foo(); // normal function call, returns nothing
var f = new Foo(); // constructor call, returns a new Foo object

alert(f instanceof Foo) // "true"
</code></pre>

As mentioned earlier, the prototype is like a template; you can change the prototype during runtime and changes affect all objects that inherit from that prototype. The prototype of any object can be accessed via its constructor's <code>.prototype</code> property. For example:

<pre><code>var f = new Foo();
Foo.prototype.bar = 'baz';

alert(f.bar) // "baz"
</code></pre>

<blockquote>
 What is the need of using Prototype? I want to understand the purpose behind using Prototypes and constructors? I mean do they provide more flexibility.
</blockquote>

Prototypes are used to define shared behaviour and/or data using methods and properties, similar to what you might expect from a class oriented language. They can also inherit from each other, creating a chain of prototypes all the way up to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" rel="nofollow"><code>Object</code></a>; even functions are actually <code>Function</code> objects.

Without a prototype, you would have to do all the work inside your constructor:

<pre><code>function Foo()
{
 // add methods and data
 this.bar = 'baz';
}
</code></pre>

In the above example you may not see the direct benefit, but there are some:

<ol>
<li>Memory; adding methods to each object instance consumes more memory than having them made available via the prototype chain. The advantage of not having to traverse the prototype chain is usually levelled by the time taken for instantiation of your objects.</li>
<li>Hierarchy; when your project gets bigger you will eventually need to create some kind of object hierarchy, without prototypes this is more cumbersome.</li>
</ol>

However, if you wish to create privileged method, you need to attach those in the constructor itself; it's not possible to do this from the prototype; for example:

<pre><code>function Foo()
{
 var bar = 'baz';

 // privileged method
 this.bar = function() {
 return bar;
 }
}
var f = new Foo();
alert(f.bar()); // "baz"
</code></pre>

<blockquote>
 I am asking this as I have been using this language for past 6 months and never had a situation where I used prototypes and constructor.
</blockquote>

If you have used <code>new Option(...)</code> or <code>new XYZ()</code> anywhere, you have used a constructor; if you have used <code>.hasOwnProperty()</code> or <code>.toString()</code> at any point, you would have used the prototype chain :)

blocks|key|3001858|text|嗯，好吧，一些简单的东西让你入门，而不是太多的技术问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001859|请考虑以下内容：|3001860|function+Person(){
++++this.name+=+'';
++++this.lastname+=+'';
++++this.age+=+'';

++++this.speak+=+function(msg){
++++++++alert(msg);
++++}
}|code-block|syntax|javascript|3001861|正如你已经知道的，这是一个简单的对象，有它自己独特的属性和方法/函数，你会同意每个人都有唯一的名字，姓氏和年龄。|3001862|到目前为止一切都很好。但是99.999%25(假设100%25)的人可以说话...所以它们有一个共同的能力，或者称之为一个方法或一个函数。|3001863|换句话说，“说话能力”并不是独一无二的，而是人与人之间的共性。因此，为了减少内存消耗和其他各种技术问题，您可以像这样实现“So”：|3001864|Person.prototype.speak+=+function(msg){
++++alert(msg);
}|3001865|我们现在所做的是，每当你创建一个person对象(+var+someone+=+new+Person()；)时，他/她将拥有3个独特的属性和1个“公共”能力(method-function)。|3001866|简而言之，这更有效率。|3001867|还要考虑这一点：|3001868|function+Person(){
++++this.name+=+'';
++++this.lastname+=+'';
++++this.age+=+'';
++++this.category+=+'human';
}|3001869|VS|3001870|function+Person(){
++++this.name+=+'';
++++this.lastname+=+'';
++++this.age+=+'';
}

Person.prototype.category+=+'human';+//+common+among+all+people+same+as+speak+was.|3001871|在你的控制台上尝试一些东西，在粘贴最后一个Person函数和它的原型声明之后，执行以下操作。|3001872|var+a+=+new+Person();
var+b+=+new+Person();|3001873|然后：|3001874|键入a和/或b并按enter，然后尝试这两个“命令”并重新检查您的对象。|3001875|a.category+=+'whatever';
Person.prototype.category+=+'whatever';|3001876|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1H|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1J|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1O|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|F|7|1Q|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|15|5|F|7|1S|8|@]|9|@]|A|$G|H]]|$1|16|3|17|5|6|7|1T|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|1U|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|F|7|1V|8|@]|9|@]|A|$G|H]]|$1|1C|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|1D|$]]

Hmm well something simple to get you started and not into too many technical stuff.

Consider this:

<pre><code>function Person(){
 this.name = '';
 this.lastname = '';
 this.age = '';

 this.speak = function(msg){
 alert(msg);
 }
}
</code></pre>

As you will already know this is a simple object with its own unique properties and methods / functions
You would agree that each person has a unique name, lastname and an age.

All good so far... But 99.999%(Assume 100%) people can speak... so they have a common ability or
call it a method or a function.

In other words the "Speak ability" is not something unique rather than something common among people.
So for the sake of memory consumption and other various technical stuff you could implement "speak" like this:

<pre><code>Person.prototype.speak = function(msg){
 alert(msg);
}
</code></pre>

What we' ve done now is that whenever you create a person object ( var someone = new Person(); )
he/she will have 3 unique properties and 1 "common" ability (method-function).

In short terms this is more efficient.

Also consider this:

<pre><code>function Person(){
 this.name = '';
 this.lastname = '';
 this.age = '';
 this.category = 'human';
}
</code></pre>

VS

<pre><code>function Person(){
 this.name = '';
 this.lastname = '';
 this.age = '';
}

Person.prototype.category = 'human'; // common among all people same as speak was.
</code></pre>

And something to try on your console,
after pasting this last Person function and it's prototype declaration, do this.

<pre><code>var a = new Person();
var b = new Person();
</code></pre>

then:

type a and / or b and press enter
then try these 2 "commands" and recheck your objects.

<pre><code>a.category = 'whatever';
Person.prototype.category = 'whatever';
</code></pre>

blocks|key|2789512|text|到目前为止你显然使用了什么|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2789513|由于到目前为止您还没有使用过构造函数(和原型)，这意味着您或多或少已经编写了procedural+JavaScript+code，从头到尾看起来像一系列串行执行的代码。如果您想重用某些代码行，可以将它们放在一个函数中，并在适当的时候调用它。|offset|length|2789514|只要页面上没有太多代码，并且不需要任何模块可重用性，也就是对象，这就没问题。因为代码库越大，维护起来就越困难。模块化很有帮助，因为它遵循divide+and+conquer原则。|2789515|构造函数和原型|2789516|这就是构造器和原型发挥作用的地方。如果使用new关键字正确执行，JavaScript中的每个函数都可以成为构造函数。基本上，使用构造函数和原型，你可以用面向对象的方式实现你的代码，你可以定义合适的对象原型，并使用继承、封装和多态性等OOP+fundamentals。|style|CODE|2789517|这对我有什么好处？|2789518|与过程化编程相比，OOP的主要优势是短期和长期的可维护性。|2789519|好的，那么让我们创建一个对象，看看prototype在哪里起作用|2789520|让我们创建一个Rectangle对象|2789521|var+Rectangle+=+function(width,+height)+{
++++this.width+=+width;
++++this.height+=+height;
};

var+instance+=+new+Rectangle(4,+8);
console.log(instance.width);+//+4
console.log(instance.height);+//+8|code-block|syntax|javascript|2789522|这将创建一个指定尺寸的矩形。让我们向这个类flip添加一个翻转矩形的特殊方法。我们可以通过两种不同的方式来实现：|2789523|2789524|将其定义为构造函数中的实例方法：|ordered-list-item|2789525|2789526|var+Rectangle+=+function(width，height)+{+this.width+=+width；this.height+=+height；this.flip+=+function()+{+var+temp+=+this.width；this.width+=+this.height；this.height+=+temp；}；|2789527|在矩形类型上定义它，或者更好地说prototype|unordered-list-item|BOLD|2789528|2789529|var矩形=函数(宽度，高度){+this.width+=宽度；this.height+=高度；}；Rectangle.prototype.flip+=函数(){+var+temp+=+this.width；this.width+=+this.height；this.height+=+temp；};|2789530|但是，我们定义的flip方法用法是相同的：|2789531|var+instance+=+new+Rectangle(4,+8);
instance.flip();
console.log(instance.width);+//+8
console.log(instance.height);+//+4|2789532|但还是有区别的。在情况#1中，当我们创建一个实例方法时，我们创建的每个对象都将拥有该方法的一个单独的副本，但是如果我们使用#2，所有的对象实例将相同的方法。|2789533|因此，使用原型级方法将节省内存资源，并且以后对此方法的任何运行时修改都将反映在所有实例(已经实例化和将来的实例)上。|2789534|但还有更多|2789535|没有人说我们不能同时以两种方式创建相同的方法:实例和原型。|2789536|var+Rectangle+=+function(width,+height)+{
++++this.width+=+width;
++++this.height+=+height;
++++this.flip+=+function()+{
++++++++var+temp+=+this.width;
++++++++this.width+=+this.height+*+2;
++++++++this.width+=+temp+/+2;
++++};
};

Rectangle.prototype.flip+=+function()+{
++++var+temp+=+this.width;
++++this.width+=+this.height;
++++this.width+=+temp;
};|2789537|在这种情况下，我们的实例方法翻转和拉伸我们的矩形，同时保持其面积不变。Prototype方法只是翻转它。|2789538|var+instance+=+new+Rectangle(4,+8);
console.log(instance.width);+//+4
console.log(instance.height);+//+8

instance.flip();
console.log(instance.width);+//+16+=+8+*+2
console.log(instance.height);+//+2+=+4+/+2

delete+instance.flip;
instance.flip();
console.log(instance.width);+//+2
console.log(instance.height);+//+16|2789539|在本例中，我们创建了两个flip方法。实例方法优先于原型方法，因此我们可以在特定的对象实例上redefine/rewrite默认的原型功能。|2789540|在调用一个实例方法之后，我们删除它并调用flip。因为实例方法不再存在，所以原型方法被执行，因此矩形只被翻转而不改变尺寸。|2789541|在现实生活中，我为什么要在哪里使用它？|2789542|真的，因为当你的页面有200行代码时，以后扩展和维护它可能会变得越来越有挑战性。将其更改为OOP会有所帮助。但是，当您开始使用它时，您将以任何一种方式使用它，因为当页面的代码增长时，您不必重构任何东西，并且也将与应用程序的其余部分保持一致。|2789543|现实生活中的例子|2789544|您可以想象Stack+Overflow已经定义了一个类Question，它具有问题的所有属性(id、标题、详细信息、标记数组、统计信息、评论等)。以及与问题相关的所有方法(向上投票、向下投票、编辑、删除、评论、回答等)。|2789545|堆栈溢出首页只会请求一个问题对象的JSON数组，并使用一些使用这些属性的超文本标记语言模板列出它们。然后，用户对问题所做的任何操作都将反映为调用其方法之一。|2789546|因此，一切都很好地包含，只有所需的功能，而没有任何其他与页面的其他部分(广告，导航，登录工具栏等)相关的杂乱。这意味着每当与问题相关的功能出现bug时，开发人员只需检查与Question+prototype相关的代码。它们不会被任何其他与页面相关的代码分散注意力。|2789547|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Procedural_programming|1|http://en.wikipedia.org/wiki/Divide_and_rule|2|http://en.wikipedia.org/wiki/Object-oriented_programming#Fundamental_features_and_concepts|3|http://en.wikipedia.org/wiki/JSON^0|0|12|Q|0|0|1W|I|1|0|0|L|3|38|G|2|0|0|0|0|7|9|0|0|L|4|0|0|0|0|0|G|9|0|0|0|8|4|0|0|0|0|0|0|0|0|0|C|4|1A|G|0|K|4|0|0|0|0|R|8|0|H|4|3|0|2D|8|0^^$0|@$1|2|3|4|5|6|7|2S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2T|8|@]|9|@$D|2U|E|2V|1|2W]]|A|$]]|$1|F|3|G|5|6|7|2X|8|@]|9|@$D|2Y|E|2Z|1|30]]|A|$]]|$1|H|3|I|5|6|7|31|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|32|8|@$D|33|E|34|L|M]]|9|@$D|35|E|36|1|37]]|A|$]]|$1|N|3|O|5|6|7|38|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|39|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|3A|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|3B|8|@$D|3C|E|3D|L|M]]|9|@]|A|$]]|$1|V|3|W|5|X|7|3E|8|@]|9|@]|A|$Y|Z]]|$1|10|3|11|5|6|7|3F|8|@$D|3G|E|3H|L|M]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|3I|8|@]|9|@]|A|$]]|$1|13|3|14|5|15|7|3J|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|3K|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|3L|8|@]|9|@]|A|$]]|$1|19|3|1A|5|1B|7|3M|8|@$D|3N|E|3O|L|1C]]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|3P|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|3Q|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|3R|8|@$D|3S|E|3T|L|M]]|9|@]|A|$]]|$1|1I|3|1J|5|X|7|3U|8|@]|9|@]|A|$Y|Z]]|$1|1K|3|1L|5|6|7|3V|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|3W|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|3X|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|3Y|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|X|7|3Z|8|@]|9|@]|A|$Y|Z]]|$1|1U|3|1V|5|6|7|40|8|@]|9|@]|A|$]]|$1|1W|3|1X|5|X|7|41|8|@]|9|@]|A|$Y|Z]]|$1|1Y|3|1Z|5|6|7|42|8|@$D|43|E|44|L|M]|$D|45|E|46|L|1C]]|9|@]|A|$]]|$1|20|3|21|5|6|7|47|8|@$D|48|E|49|L|M]]|9|@]|A|$]]|$1|22|3|23|5|6|7|4A|8|@]|9|@]|A|$]]|$1|24|3|25|5|6|7|4B|8|@]|9|@]|A|$]]|$1|26|3|27|5|6|7|4C|8|@]|9|@]|A|$]]|$1|28|3|29|5|6|7|4D|8|@$D|4E|E|4F|L|M]]|9|@]|A|$]]|$1|2A|3|2B|5|6|7|4G|8|@]|9|@$D|4H|E|4I|1|4J]]|A|$]]|$1|2C|3|2D|5|6|7|4K|8|@$D|4L|E|4M|L|M]]|9|@]|A|$]]|$1|2E|3|-4|5|6|7|4N|8|@]|9|@]|A|$]]]|2F|$2G|$5|2H|2I|2J|A|$2K|2L]]|2M|$5|2H|2I|2J|A|$2K|2N]]|2O|$5|2H|2I|2J|A|$2K|2P]]|2Q|$5|2H|2I|2J|A|$2K|2R]]]]

<h2>What you apparently used so far</h2>

As you haven't used constructors (and prototypes) so far, it means you've more or less written <a href="http://en.wikipedia.org/wiki/Procedural_programming" rel="nofollow">procedural JavaScript code</a> that looks like a series of serially executed code from start to end. If you wanted to reuse some lines of code, you've put them inside a function and call it whenever appropriate.

That's fine as long as you don't have too much code on your page and don't need any module reusability, namely objects. Because the larger the code base the harder it becomes to maintain. Modularity helps because it follows the <a href="http://en.wikipedia.org/wiki/Divide_and_rule" rel="nofollow">divide and conquer</a> principle.

<h2>Constructors and prototypes</h2>

This is where constructors and prototypes come into play. Every function in JavaScript can be a constructor if you execute it properly using <code>new</code> keyword. Basically using constructors and prototypes you can implement your code in object-oriented way where you'd define appropriate object [proto]types and use <a href="http://en.wikipedia.org/wiki/Object-oriented_programming#Fundamental_features_and_concepts" rel="nofollow">OOP fundamentals</a> like inheritance, encapsulation and polymorphism.

<h3>What's in it for me?</h3>

The main advantage of OOP over procedural programming is short- and long-term maintainability.

<h3>OK, so let's make an object and see where prototype comes into play</h3>

Let's make an object <code>Rectangle</code>:

<pre><code>var Rectangle = function(width, height) {
 this.width = width;
 this.height = height;
};

var instance = new Rectangle(4, 8);
console.log(instance.width); // 4
console.log(instance.height); // 8
</code></pre>

This creates a rectangle of specified dimension. Let's also add a particular method to this class <code>flip</code> that flips rectangle. We can do this in two different ways:

<ol>
<li>Define it as an instance method within constructor:

<pre><code>var Rectangle = function(width, height) {
 this.width = width;
 this.height = height;
 this.flip = function() {
 var temp = this.width;
 this.width = this.height;
 this.height = temp;
 };
};
</code></pre></li>
<li>Define it on rectangle type or better said prototype

<pre><code>var Rectangle = function(width, height) {
 this.width = width;
 this.height = height;
};

Rectangle.prototype.flip = function() {
 var temp = this.width;
 this.width = this.height;
 this.height = temp;
};
</code></pre></li>
</ol>

However we define the <code>flip</code> method usage is the same:

<pre><code>var instance = new Rectangle(4, 8);
instance.flip();
console.log(instance.width); // 8
console.log(instance.height); // 4
</code></pre>

But there still is a difference. In case #1 when we create an instance method each object we create will have a separate copy of this method, but if we used #2 all object instances will share the same method.

Using prototype-level methods will therefore save memory resources and any later runtime modifications to this method would be reflected on all instances (already instantiated and future ones).

<h3>But there's more</h3>

Nobody said we can't create the same method in both ways at the same time: as instance and prototype.

<pre><code>var Rectangle = function(width, height) {
 this.width = width;
 this.height = height;
 this.flip = function() {
 var temp = this.width;
 this.width = this.height * 2;
 this.width = temp / 2;
 };
};

Rectangle.prototype.flip = function() {
 var temp = this.width;
 this.width = this.height;
 this.width = temp;
};
</code></pre>

In this case our instance method flips and stretches our rectangle while keeping its area the same. Prototype method just flips it.

<pre><code>var instance = new Rectangle(4, 8);
console.log(instance.width); // 4
console.log(instance.height); // 8

instance.flip();
console.log(instance.width); // 16 = 8 * 2
console.log(instance.height); // 2 = 4 / 2

delete instance.flip;
instance.flip();
console.log(instance.width); // 2
console.log(instance.height); // 16
</code></pre>

In this example we created two <code>flip</code> methods. Instance methods have precedence over prototype ones so this gives us the possibility to redefine/rewrite default prototype functionality on a particular object instance.

After an instance method has been called we then deleted it and recalled <code>flip</code>. Since the instance method didn't exist any more the prototype one was executed, therefore rectangle only got flipped without dimension changes.

<h2>Why and where would I use this in real life?</h2>

Anywhere really, because whenever your page has, for example, 200 lines of code it will likely become more and more challenging to extend and maintain it later. Changing it to OOP will help. But when you start using it you'd use it either way, because you won't have to refactor anything when page's code grows and will also be consistent with the rest of your application.

<h3>Real life example</h3>

You can imagine Stack Overflow having defined a class <code>Question</code> that has all the properties of a question (id, title, details, array of tags, stats, comments, etc.) and all methods related to a question (upvote, downvote, edit, delete, comment, answer, etc.).

The Stack&nbsp;Overflow frontpage would just request a <a href="http://en.wikipedia.org/wiki/JSON" rel="nofollow">JSON</a> array of question objects and list them using some HTML template that uses these properties. Anything that user does to a question would then reflect to calling one of its methods.

So everything's nicely contained and only has as much functionality as required without any other clutter related to other parts of the page (ads, navigation, login toolbar, etc.). This means whenever there's a bug in question-related functionality, developers only have to go through code related to <code>Question</code> prototype. They're not distracted by any other page-related code.

<blockquote>
 "JavaScript is the worlds most misunderstood language" -D.Crockford
</blockquote>

My questions:

<ol>
<li>Constructor and prototypes in plain English?</li>
<li>What is the need of using a prototype? What is the purpose behind using
Prototypes and constructors? I mean do they provide more
flexibility. I am asking this as I have been using this language for
the past six months and never had a situation where I used prototypes and
constructor.</li>
</ol>

I am not looking for any syntax and how to go about things explanations as I do understand some part of what they are, just wanted to know these things in a simpler way. An analogy (non-tech) or example would be great.*

Details why I asked this question (ignore if you want to):

I have been using JavaScript for the past six months and was shocked when I came to know that JavaScript is a prototype-based language.

I went through some Stack&nbsp;Overflow questions about how JavaScript was supposed to be used and came across prototypes and constructors.

I learned it, and now I can say that I am not a noob when it comes to constructors and prototypes. I am familiar with the syntax. But still I think I am missing something and haven't got down to the core of this language, and I do get confused sometimes.

I hope I am clear.

Prototype and constructor in JavaScript (plain English)?

Java

 "JavaScript是世界上最容易被误解的语言“-D.Crockford我的问题：构造器和原型？使用原型的需要是什么？使用原型和构造器背后的目的是什么？我的意思是，它们是否提供了更多的灵活性。我之所以问这个问题，是因为我在过去的六个月里一直在使用这种语言，从来没有遇到过使用原型和构造函数的情况。我不是在寻找任何语法...

问原型和构造器在JavaScript (简单的英语)？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原型和构造器在JavaScript (简单的英语)？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原型和构造器在JavaScript (简单的英语)？
EN