javascript - 有人可以解释javascript原型(prototype)继承吗

Question

我想知道是否有人可以解释一下 function.prototype面向对象 javascript 中的事物(事物!!？？)。

我有服务器端编程背景，可能我没有掌握原型(prototype)的全部概念，

给定以下代码片段:

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*/)所以，我想我的问题是，以第二种方式定义函数的优点是什么？它们有何不同或为何不同？

希望我说得有道理...

编辑: 谢谢大家提供的启发性答案，很难判断这里的答案是否“正确”，所以我要标记我认为贡献最大的答案...

你们肯定给了我更多的思考......

Answer 1

我想你是想在你的例子中的某处设置一些等于 new animate() 的东西。在不使用 new 的情况下，我将详细说明会发生什么:

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 可以从 animate 变量中调用。

animate.angular();
animate.circular();

如果您创建一个new animate()，您可以调用接下来的两个，#3 和#4(但不是#1 或#2)。

var ani2 = new animate();

ani2.angular();
ani2.circular();

此外，animate() 是一个函数，但 ani2 不是。

console.log(5, typeof animate);
console.log(6, typeof ani2);
console.log(7, animate());

虽然 ani2 已经被创建，你可以通过 animate.prototype 添加新的成员。

animate.prototype.bark = function(){ console.log(8, 'bark'); };
ani2.bark();

然而，animate 变量并不继承它的原型(prototype)。

console.log(9, typeof ani2.bark);
console.log(10, typeof animate.bark);

请注意，ani2 不会继承直接应用于动画变量的成员。它仅继承自 animate.prototype。

animate.paperclip = function(){ console.log(11, "paperclip"); };

animate.paperclip();
console.log(12, typeof ani2.paperclip);
console.log(13, typeof animate.paperclip);

您还可以在构造函数(如 animate)中使用 this 关键字将实例成员添加到新 子级。

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。

a、b 和 c 成员不是以相同方式“共享”的。它们是在构造函数 new Anime() 中使用 this 立即分配的(不是从 Anime.prototype 继承的)。此外，原型(prototype)上的 a 成员将始终被构造函数“个性化”。

永远不要忘记 new 关键字，否则它们都无法正常工作。例如，this 指向在调用时未使用 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);

这是输出。汤姆推荐道格拉斯克罗克福德的视频!

---

/*
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
*/