有人能解释一下javascript原型继承吗

我想你是想设定一个相等的值

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

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

你可以打电话给接下来的两个,#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();

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

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

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

您还可以使用

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);

a、b和c成员不是以同样的方式“公共”的。他们被立即分配使用

.

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

var animate=function(){};
animate.angular=function(){/*does something here*/};

var a = new animate();
animate.angular();       // OK
a.circular();            // error: a.circular is not a function

但是,如果您从以下内容开始:

function animate(i){};
animate.prototype.angular = function() {};

var a = new animate();
a.angular();

function animate(i) {
    this.x = i;
}
animate.prototype.angular = function() {
    this.x *= 2;
}

var a = new animate(5);
a.angular();
console.log(a.x);    // 10

"Javascript, the Good Parts" 关于这一点有很多很好的解释。

如果你真的想了解它,就像许多人说的那样,阅读Crockford的解释,你不会得到比这更好的资源。

如果你想快速获益:

var Building = function() {
    this.openDoor = function() {};
};

var House = function() {
    this.closeDoor = function() {};
};
House.prototype = new Building();

var a = new House();
a.openDoor();
a.closeDoor();

构建系统的最佳方式是在您选择的全局命名空间下,例如:

if (typeof MYAPP === 'undefined' || !MYAPP) {
    var MYAPP = {};
}

function New(className, classBody) {
    // This adds your "classes" to this MYAPP namespace so they can be instantiated
    // You need some magic here, so have fun with this function
}

New('Building', function() {
    this.openDoor = function() {};
});

New('House', function() {
    this.prototype = new MYAPP.Building();
    this.closeDoor = function() {};
});

// Now you can do the same as before but your application is cleaner :)
var a = new MYAPP.House();
a.openDoor();
a.closeDoor();

Douglas Crockford Prototypal Inheritance Classical Inheritance .

JavaScript: The Good Parts .