有人可以解释javascript原型继承 [英] Can someone explain javascript prototypal inheritance
问题描述
我想知道是否有人能够在OO javascript中解释 function.prototype thingie（thingie !! ??）。
I wonder if someone could be kind enough to explain the function.prototype thingie (thingie!!??) in OO javascript.
我来自服务器端编程背景，可能是我没有理解原型的整个概念，
I come from a server side programming background, and may be I am not grasping the whole concept of prototypes,
给出以下代码片段：
var animate=function(){};
animate.angular=function(){/*does something here*/};
animate.circular=function(){/*does something here*/};
和
var animate=function(){};
animate.prototype.angular=function(){/*does something here*/};
animate.prototype.circular=function(){/*does something here*/};
据我所知，后两个函数都可以通过 animate调用.angular（/ * args * /）和 animate.circular（/ * args * /）所以，我想我的问题是，什么是以第二种方式定义函数的优点？以及他们如何或为何与众不同？
as far as I can tell, both the latter functions are callable via animate.angular(/*args*/) and animate.circular(/*args*/) so, I guess my question is, what are the merits of defining the functions in the second way? and how or why are they different?
希望我有道理......
Hope I made sense...
编辑：谢谢所有人很有启发性的答案，很难将这里的答案判断为正确，所以我要标记一个我认为最有贡献的答案......
Thankyou all for the enlightening answers, It's very hard to judge an answer here as being "Correct", so I'm gonna mark the one I feel made the most contribution...
你所有这些都给了我更多的思考...
You all have certainly given me more food for thought...
推荐答案
我认为你的意思是设置等于 new的东西animate（）在你的例子中的某个地方。如果不使用 new ，我会详细说明会发生什么：
I think you meant to set something equal to new animate() somewhere in your example. Without using new I'll elaborate a little on what happens:
var animate = function(){ console.log(0, 'animate'); };
animate.angular = function(){ console.log(1, 'animate.angular'); };
animate.circular = function(){ console.log(2, 'animate.circular'); };
animate.prototype.angular = function(){ console.log(3, 'animate.prototype.angular'); };
animate.prototype.circular = function(){ console.log(4, 'animate.prototype.circular'); };
只有前两个函数，＃1& ＃2，可以从动画变量中调用。
Only the first two functions, #1 & #2, are callable from the animate variable.
animate.angular();
animate.circular();
如果您创建新动画（），可以拨打下两个，＃3& ＃4，（但不是＃1或＃2）。
If you create a new animate() you can call the next two, #3 & #4, (but not #1 or #2).
var ani2 = new animate();
ani2.angular();
ani2.circular();
此外，animate（）是一个函数，但ani2不是。
Also, animate() is a function but ani2 is not.
console.log(5, typeof animate);
console.log(6, typeof ani2);
console.log(7, animate());
虽然已经创建了ani2，但您可以通过animate.prototype向其添加新成员。 / p>
Although ani2 has already been created, you can add new members to it via the animate.prototype.
animate.prototype.bark = function(){ console.log(8, 'bark'); };
ani2.bark();
然而，animate变量并没有继承它的原型。
The animate variable doesn't inherit form it's prototype however.
console.log(9, typeof ani2.bark);
console.log(10, typeof animate.bark);
请注意，ani2不会继承直接应用于animate变量的成员。它只继承自animate.prototype。
Note that ani2 doesn't inherit members applied directly to the animate variable. It only inherits from animate.prototype.
animate.paperclip = function(){ console.log(11, "paperclip"); };
animate.paperclip();
console.log(12, typeof ani2.paperclip);
console.log(13, typeof animate.paperclip);
您还可以在构造函数中使用 this 关键字，例如animate将实例成员添加到新子项。
You can also use the the this keyword inside a constructor function like animate to add instance members to new children.
var Anime = function(a,b){ this.a=a; this.b=b; this.c=console; };
var anime1 = new Anime(14, 'anime1');
var anime2 = new Anime(15, 'anime2');
anime1.c.log(anime1.a, anime1.b);
anime2.c.log(anime2.a, anime2.b);
Anime.prototype.a = 16;
Anime.prototype.z = 'z';
var anime3 = new Anime(17, 'anime3');
anime3.c.log(18, anime3.a, anime3.b, anime3.z, " ", anime2.a, anime2.b, anime2.z, " ", anime1.a, anime1.b, anime1.z);
anime2.z='N';
anime3.c.log(19, anime3.a, anime3.b, anime3.z, " ", anime2.a, anime2.b, anime2.z, " ", anime1.a, anime1.b, anime1.z);
内存是自动为anime2.z的单独实例分配的，因为它已被修改，anime1& anime3仍然分享一个节俭的未经修改的z。
Memory was automatically allocated for a separate instance of anime2.z only because it was modified, anime1 & anime3 still "share" a thrifty unmodified z.
a，b和c成员不是以同样的方式公共。它们是在构造函数中使用 this 立即分配的， new Anime（），（不是从Anime.prototype继承）。此外，原型上的成员将始终由构造函数个性化。
The a, b, and c members are not "communal" in the same way. They were allocated immediately using this in the constructor, new Anime(), (not inherited from Anime.prototype). Also, the a member on the prototype would always be "individualized" by the constructor.
永远不要忘记新关键字，否则它们都不起作用喜欢它。例如， this 指向不带 new 的构造函数中的全局对象。
Never forget the new keyword or none of it works like it should. For example, this points to the global object in a constructor called without new.
console.log(20, typeof window.a, typeof window.b, typeof window.c);
var opps = Anime(21, 'zapp');
console.log(22, typeof window.a, typeof window.b, typeof window.c);
console.log(23, typeof opps);
这是输出。汤姆的第二个推荐Douglas Crockford视频！
Here's the output. And a second for Tom's suggesting the Douglas Crockford videos!
/*
1 animate.angular
2 animate.circular
0 animate
3 animate.prototype.angular
4 animate.prototype.circular
5 function
6 object
0 animate
7 undefined
8 bark
9 function
10 undefined
11 paperclip
12 undefined
13 function
14 anime1
15 anime2
18 17 anime3 z 15 anime2 z 14 anime1 z
19 17 anime3 z 15 anime2 N 14 anime1 z
20 undefined undefined undefined
22 number string object
23 undefined
*/
这篇关于有人可以解释javascript原型继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
