由浅到深学习JavaScript类
类是什么？
许多刚接触编程的朋友都可能理解不了类，其实类是对我们这个现实世界的模拟，把它说成“类别”或者“类型”可能会更容易理解
一些。比如“人”这种动物就是一个类，而具体某一个人就是“人”这个类的一个实例，“人”可以有许多实例（地球人超过六十亿了），但
“人”这个类只有一个。你或许会说那男人和女人不也是人么？怎么只能有一个？其实这里要谈到一个继承的东西，后边才讲，请继续看下去
。
如何建立一个类？
在C++中是以class来声明一个类的，JavaScript与C++不同，它使用了与函数一样的function来声明，这就让许多学Jscript的朋友把
类与函数混在一起了，在Jscript中函数与类确实有些混，但使用久了自然而然会理解，这篇文章是针对想进攻面向对象编程的朋友而写，就不
打算一下子讨论得太深了。
请看下边这个类的定义：
function WuYouUser()
{
this.Name; //名字
}
上边的代码定义了一个WuYouUser（无忧用户）类，它有个属性：Name（名字）。Name就是WuYouUser类的一个属性。
一个类有固定的属性，但类的实例却有不同的属性值，就像我是属于“人”这个类的，性别是男，而我有一个女同学，她也属于“人
”类，但她的性别属性值却为女。
那么如何声明某个类的一个实例呢？非常简单：
var Wo = new WuYouUser(); //实例一：“我”
var Biyuan = new WuYouUser(); //实例二：“碧原”（Biyuan哥，不好意思。。。嘿嘿）
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类的属性
这个Wo（我）就是WuYouUser类的一个实例，它拥有WuYouUser给它的一切：Name属性、Sex属性以及Age属性，我们可以这样子来设置
它的属性：
Wo.Name = "泣红亭";
很简单是不是？试着运行
window.document.write(Wo.Name);
看看，是不是输出了我的名字：泣红亭？
同样设置一下碧原兄的属性
Biyuan.Name = "碧原";
运行
window.document.write(Biyuan.Name);
可以看到输出了"碧原"，也就说明了Biyuan与Wo同样是WuYouUser类的实例，但却是不同的实体，具有不同的属性值。
属性是可以设置默认值的，无忧里都有记录大家各自发了多少贴子，我们也同样给WuYouUser类添加一个发贴数量的属性ArticleCount
function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
}
一个无忧新用户刚注册完之后他的发贴数量为0，在上边的代码中可以看到直接给属性ArticleCount设置值为0。
可以运行一下这样的代码：
var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount);
可以看到输出了0，说明ArticleCount属性被我们成功设置默认值为0
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类的方法
方法这个词不大好理解，我觉得说成行为会更容易理解。一个人具有许多共同的行为，比如睡觉、吃饭、走路等等，现在我们给
WuYouUser类添加一个发贴的方法。
function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
this.NewArticle = function()
{
/*
*
* 具体如何发贴我们大家都知道，不就是打打字，加加图片再按一下保存之类的按钮么？
* 关于具体如何发贴的代码没有必要在这里写出来，我们要了解的仅仅是方法的定义与使用
* 我们在这里实现一个最简单的功能，也是很重要的功能：给我们的发贴数量加上1！
* 注意：恐龙等级就是这样加出来的，因此呀……大家狂发贴吧。。。
*/
this.ArticleCount++;
}
}
既然定义好了这个方法，我们来试试效果如何：
var Wo = new WuYouUser();
Wo.NewArticle();
document.write(Wo.ArticleCount);
可以看到输出了1，说明我们发贴成功了！真是有历史纪念意义的一刻，离恐龙等级又近一步了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态属性
静态属性又称公共属性，它不属于某个类的实例，而是直接属于某个类。
比如说无忧用户有一个属性：注册用户的数量，它是属于整个无忧用户的，而不是属于泣红亭或者谁的
静态属性的声明方法是：
类名.prototype.属性名 = 属性值;
比如给WuYouUser类定义一个注册用户的数量Count：
WuYouUser.prototype.Count = 0;
那么如何读取它呢？有两种方法：
1. 直接用 WuYouUser.prototype.Count
2. 使用Wo.Count
这两者没有区别，都是得到0
虽然读取方法可以有两种，但在改变它的时候却得特别小心了，请看下边代码
var Biyuan = new WuYouUser();
WuYouUser.prototype.Count++;
document.write(Wo.Count);
document.write(Biyuan.Count);
你会发现两者的Count属性都是1，也就是说WuYouUser.prototype.Count改变了会影响到各个实例的相应属性，其实原理就是Wo、
Biyuan的Count属性与WuYouUser.prototype.Count根本就是同一个！
现在来看另外一段代码：
var Biyuan = new WuYouUser();
Biyuan.Count++; //特别注意一下这里，这是直接改变Biyuan的Count属性
document.write(Biyuan.Count); // 输出 1
document.write(WuYouUser.prototype.Count); //输出 0
document.write(Wo.Count); //同样输出0，为什么？
可以看到如果直接修改实例的静态属性值，那么会出现其它实例甚至类的静态属性与它不同步了？这是因为直接修改的时候，该实例
会生成一个属于该实例的属性Count，这个时候Biyuan.Count不再与WuYouUser.prototype.Count是同一个了，也不与Wo.Count是同一个，这个
Count属性是属于Biyuan自己所有的，以后改变了它也只是影响它自己而已。
因此如果不是特别的需要，建议不管在读取还是赋值的时候，都统一使用WuYouUser.prototype.Count这样的方式，以做到万无一失！
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态方法
与静态属性相似，它也有个另称：公共方法，同样属于类本身的。
静态方法的定义方式是：
类名.方法名 = function(参数1,参数2...参数n)
{
//方法代码
}
我们现在就来定义一个无忧用户类的注册新用户静态方法：
WuYouUser.prototype.AddOne = function()
{
//*** 同样具体代码不写出来，给静态属性Count增加1，表示注册用户数量又多一个
WuYouUser.prototype.Count++;
}
现在我们来看看如何用它，同样有两种方法：
1.直接使用WuYouUser.prototype.AddOne()
2.使用某实例的AddOne()
这两种方法没有什么不同：
var Wo = new WuYouUser();
var Biyuan = new WuYouUser();
document.write(WuYouUser.prototype.Count); // 0
Wo.AddOne();
document.write(WuYouUser.prototype.Count); // 1
document.write(Wo.Count); // 1
document.write(Biyuan.Count); // 1
WuYouUser.prototype.AddOne();
document.write(WuYouUser.prototype.Count); // 2
document.write(Wo.Count); // 2
document.write(Biyuan.Count); // 2
可以看出不管是使用Wo.AddOne()还是WuYouUser.prototype.AddOne()效果都是一样的，都是给WuYouUser.prototype.Count加上1
现在再看一段代码：
function NewClass() //由于上边的WuYouUser类不合适当这个例子的代码，我声明了一个新类NewClass
{
this.Name = "泣红亭"; //这里默认值为我的名字
}
NewClass.prototype.ChangeName = function(NewName)
{
this.Name = NewName;
}
var Wo = new NewClass();
Wo.ChangeName("郑运涛"); //我的真名
可以看到Wo.Name确实已经变成了"郑运涛"，这个方法似乎是可以用的，但里边是不是内有天机呢？
再看下边的代码，类的定义以及ChangeName的定义我们照样，但改变一下下边的代码：
NewClass.prototype.ChangeName("郑运涛");
document.write(NewClass.Name); //undefined，即未定义
document.write(NewClass.prototype.Name); //郑运涛
var Wo = new NewClass();
document.write(Wo.Name); //泣红亭
可以看到我们并没有定义NewClass.prototype.Name这个静态属性，但编译器给我们自己加了一个。
可是再看下边输出Wo.Name，它并不是为"郑运涛"，而是原来的默认值"泣红亭"，说明了什么？
其实很简单，看一下NewClass的定义里已经有Name这个属性，因此Wo也有自己的Name属性，它跟NewClass.prototype.Name并不是同一
个的，因此就还是那样子。
那为什么前一个例子运行了Wo.ChangeName("郑运涛")却能够实现改变Wo.Name属性呢？其实在这里跟改变Wo.Count的值是同一个道理
，编译器自动给Wo增加了一个方法ChangeName，这个方法代码与NewClass.prototype.ChangeName一样，但Wo.ChangeName是Wo这个实例所特有
的，而非NewClass.prototype.ChangeName！
分析可知道在静态方法里尽量不要使用this这样的关键字来引用实例本身的属性，除非你有特别的目的，而且能够清楚地明白这里边
的运行机制！
如果真的需要在静态方法里使用this，可以直接把this当作参数传进去：
NewClass.ChangeName = function(This,NewName) //注意这里是This,不是this
{
This.Name = NewName;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
构造函数
一个类在初始化的时候其实也是一个函数的执行过程，这个函数就是构造函数，我们看一下下边的代码：
function WuYouUser()
{
this.Name = "泣红亭"; //默认定义为泣红亭
alert(this.Name);
}
var Wo = new WuYouUser();//可以看到出现一个窗口显示泣红亭三个字
可以看出类的定义不仅仅是定义了它的属性与方法，还同时可以加入一些代码，而这些代码就是该类的构造函数的代码，在实例声明
过程中被执行！
其实说起来，类的属性与类的方法都是在构造函数里执行定义的，看下边的代码：
function WuYouUser()
{
this.Name = "泣红亭";
return;
this.Sex = "男";
}
var Wo = new WuYouUser();
document.write(Wo.Name); //泣红亭
document.write(Wo.Sex); //undefined，即未定义
看得出什么？Sex属性是在return;之后的，而WuYouUser类的构造函数遇到return即停止运行，换句话说this.Sex = "男";这一行是没
有被执行，即Sex属性根本没有被定义！
构造函数可以有参数，参数值在声明实例的时候被传入：
function WuYouUser(Name)
{
this.Name = Name;
}
var Wo = new WuYouUser("泣红亭");
document.write(Wo.Name); //泣红亭
构造函数不需要返回值，但如果你设置了返回值，可以把它当成一个函数来使用。
function Sum(a, b)
{
this.a = a;
this.b = b;
return this.a + this.b;
}
document.write(Sum(12, 23)); //输出的是12与23的和35
var Obj = new Sum(12,23);
document.write(Obj.a) // 12
document.write(Obj.b) // 23
感觉挺奇妙，对吧？我写这文章写着写着也觉得挺奇妙的，呵呵！
但强烈建议不要把一个类当成一个函数来使用！如果你需要的是一个函数，请直接写成函数而不要写成类，以免搞混了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
继承
继承这个词在面向对象的编程里是非常重要的，虽然JavaScript并不是真正面向对象的语言，而是跟VB一样是基于对象的语言，它同
样提供了继承机制。
文章开头时谈到了男人与女人，这也同样是两个不同的类，但却具有相同的一些属性以及方法，而这些相同的特性是来自“人”这个
类的，换句话说男人与女人继承了“人”的所有特性！但是男人与女人却有其不同的地方，编程语言里的继承也一样，一个类A继承了另一个类
B，那么类B就是类A的父类，类A就是类B的派生类，也称为子类。比如男人就是人的派生类，而人就是男人的父类。最高一级的类称为基类，想
象一下就可以明白，男人继承自人，男孩继承自男人，人就是男孩的基类，男人就是男孩的父类。
>>>>>>>>>>>>>>>>>>>>
题外：多重继承
这里再涉及一个多重继承的话题，但如果你仅仅是学JavaScript的话就没有必要看下去，因为JavaScript不提供多重继承，准确一点
说没有一种简单而标准的方法来实现多重继承（其实是有办法实现的，只不过麻烦了一点，而且确实没有必要）。
在C++中是有多重继承的概念的，这里是讨论JavaScript，因此不打算讲，只是说说它的一点点思想以供参考。
在上边男孩的继承问题中，男孩其实不仅仅是继承自男人，还继承自孩子（有男孩子，也有女孩子）这个类，因此，它同时继承了两
个类：男人与男孩，这就是所谓的多重继承。
好，这个问题打住，我们还是回归主题。
>>>>>>>>>>>>>>>>>>>>
先看第一个类的定义：
function A()
{
this.Name = "泣红亭";
alert(this.Name);
}
这个类定义了一个属性Name，默认值为"泣红亭"
现在看第二个类的定义：
function B()
{
this.Sex = "男";
alert(this.Sex);
}
定义了一个属性Sex,默认值为"男"
继承的方式就是 子类.prototype = new 父类();
现在我们来让B类继承A类：
B.prototype = new A();
运行这一段代码：
var Obj = new B(); //首先打开警告窗口显示"泣红亭",再显示"男"
可以从上边的结果看出B类继承了A类，拥有了A类的属性Name，并且执行了A类的构造函数，而且A类的构造函数在B类的构造函数执行
之前执行。因此我们利用这个可以实现重写父类的方法以及重设置父类某属性的默认值：
function A()
{
this.Name = "泣红亭";
this.Show = function()
{
alert("这是A类的Show方法");
}
alert(this.Name);
}
function B()
{
this.Name = "郑运涛";
this.Show = function()
{
alert("这是B类的Show方法");
}
alert(this.Name);
}
var Obj = new B();
Obj.Show();
结果出现了三次警告窗口，第一个内容为泣红亭,是执行A类的构造函数里的alert(this.Name)，那时候Name属性值还为"泣红亭",因为B类的构造函数还没执行，第二次内容为"郑运涛",这是B类里的alert(this.Name)，因为B类的构造函数里给Name重赋值为"郑运涛"。最后是调用了Obj.Show()，执行了不是A类的Show方法里的Show（显示"这是A类的Show方法"），而是执行了B类的Show（显示"这是B类的Show方法"），很明显Show方法被重写了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类作为一个对象时的属性与方法（不知道如何简洁地表达，因此用了这么长的题目）
不知道在这里谈这个话题是否有点混人耳目，但又觉得不谈这篇文章就不算完整，因为文章目的就是要让人搞清楚类的方方面面。
看了这一小节的题目，或许你会觉得奇怪，类就是类，怎么会“作为一个对象”呢？在JavaScript里，一切都是对象，包括类！对象
可以有属性，可以有方法，类也同样可以有，但这个非常容易跟前边说到的静态属性与静态方法搞混了，因此要仔细看清楚两者的分别！
定义一个类：
function WuYouUser()
{
this.Name = "泣红亭";
}
定义类作为一个对象时的属性：
WuYouUser.Url = "http://www.livebaby.cn"; //静态属性的定义是：WuYouUser.prototype.Url = "http://www.livebaby.cn";
var Wo = new WuYouUser();
document.write(WuYouUser.Url); //http://www.livebaby.cn
document.write(Wo.Url); //undefined,即未定义！注意这里的未定义
从这里可以看出Url这个属性是WuYouUser自个所有，改变了它与其它类以及它的子类完全无关！
引用类的属性只有一个办法，就是类名.属性名，改变它也一样。
定义类作为一个对象时的方法：
WuYouUser.ChangeUrl = function()
{
this.Url = "http://www.livebaby.cn";
}
你或许会觉得奇怪，这里的this是什么？因为ChangeUrl这个方法是属于对象WuYouUser的，因此this指的就是WuYouUser本身！
可以运行下边的代码试试：
document.write(WuYouUser.Url); // http://www.livebaby.cn
WuYouUser.ChangeUrl();
document.write(WuYouUser.Url); // http://www.livebaby.cn
明显ChangeUrl直接修改了WuYouUser.Url的值，因此后边才能输出http://www.livebaby.cn
如果你这一节看不明白，也不要着急，编程嘛，许多东东都只能意会不能言传，而且我又没口才，说不清楚，只要以后多写写代码，
多用用类自然而然会体会到这一些，还有可以去看看JSVM的代码，里边几乎每个类都有用到类作为一个对象时的属性与方法。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
后言
首先感谢你能够有耐心看到这里，我也没想到写了这么多才能够写得像样一点，请别介意。
你真的会JavaScript吗
很久没有看到这样让人唇齿留香的好文了。上次看到的是一篇是 Douglas Crockford 的JavaScript, We Hardly new Ya(我简单翻译了一下，
译文在后)。
同其他教你如何用面向对象的思想编写JavaScript的其他文章一样，该文也是着重在这么几个要素：
? JavaScript的对象就是一个关联数组。
? JavaScript 函数也是一个对象。
? 原型(Prototype)
? 闭包(Closures)
? 继承/私有属性/静态方法
? 命名空间
作者文笔很好，英文很容易看懂，没有生僻的用词(顺便提一下，《PPK on JavaScript》作者的英文不敢恭维)。用来举例的代码也很贴切。
特别是文章的开头很有意思，作者写到他和一个据说已经写了快4年JavaScript的女程序员聊天，女程序员认为她的JS水平very good，后来作
者发现她确实会写，但仅仅是会写，其实对JavaScript的内涵所知甚少。
作者想用这个例子说明，有很多具备Java/C++/C#开发经验的开发人员在编写JavaScript或者转行到FED(比如我)的时候，想当然的把那些标准
面向对象语言的思想套用在JavaScript上，反而走入迷途。
对此我深有体会，我正是在真正参与了一次Ajax的项目并真正读懂了Prototype框架的源码之后，对JavaScript有了完全全新的认识。
总之，推荐阅读。附上JavaScript, We Hardly new Ya的译文，译得匆忙，定有行文不通之处，请客官见谅！
JavaScript 的 new， 好久不见啊
原文： JavaScript, We Hardly new Ya－－Douglas Crockford。
JavaScript是一门基于原型的语言，但它却拥有一个 new 操作符使得其看起来象一门经典的面对对象语言。那样也迷惑了程序员们，导致一些有问题的编程模式。
其实你永远不需要在JavaScript使用 new Object()。用字面量的形式{}去取代吧。
同理，不要使用 new Array() ，而代之以字面量[]。
JavaScript中的数组并不象Java中的数组那样工作的，使用类似Java的语法只会让你糊涂。
同理不用使用 new Number, new String, 或者 new Boolean。这些的用法只会产生无用的类型封装对象。就直接使用简单的字面量吧。
不要使用 new Function 去创建函数对象。用函数表达式更好。比如：
frames[0].onfocus = new Function(”document.bgColor=’antiquewhite’”)
更好的写法是：
frames[0].onfocus = function () {document.bgColor = ‘antiquewhite’;};
第二种形式让脚本编译器更快的看到函数主体，于是其中的语法错误也会更快被检测出来。有时候程序员使用 new Function 是因为他们没有
理解内部函数是如何工作的。
selObj.onchange = new Function(”dynamicOptionListObjects[”+
dol.index+”].change(this)”);
如果我们让用字符串做函数体，编译器不能看到它们。如果我们用字符串表达式做函数体，我们同样也看不到它们。更好的方式就是不要盲目
编程。通过制造一个返回值为函数的函数调用，我们可以明确的按值传递我们想要绑定的值。这允许我们在循环中初始化一系列 selObj 对象
。
selObj.onchange = function (i) {
return function () {
dynamicOptionListObjects[i].change(this);
};
}(dol.index);
直接对一个函数使用new永远不是一个好主意。比如， new function 对构造新对象没有提供什么优势。
myObj = new function () {
this.type = ‘core’;
};
更好的方式是使用对象字面量，它更轻巧，更快捷。
myObj = {
type: ‘core’
};
假如我们需要创建的对象包含的方法需要访问私有变量或者函数，更好的方式仍然是避免使用new.var foo = new function() {
function processMessages(message) {
alert(”Message: ” + message.content);
}
this.init = function() {
subscribe(”/mytopic”, this, processMessages);
}
}
通过使用 new 去调用函数，对象会持有一个无意义的原型对象。这只会浪费内存而不会带来任何好处。如果我们不使用new，我们就不用在对
象链维护一个无用的prototype对象。所以我们可以用（）来正确的调用工厂函数。var foo = function () {
function processMessages(message) {
alert(”Message: ” + message.content);
}
return {
init: function () {
subscribe(”/mytopic”, this, processMessages);
}
};
}();
所以原则很简单： 唯一应该要用到new操作符的地方就是调用一个古老的构造器函数的时候。当调用一个构造器函数的时候，是强制要求使用new的。有时候可以来new一下, 有的时候还是不要了吧。
1. Feedback：对于javaScript的Prototype我理解是一颗描述继承树的链子
使用javaScript进行OO开发是完全可以的
和java，C 等对比，有一点做不到：
对于父类的成员方法（非构造方法）要么完全重写，要么原封不动，也就是无法在子类的成员方法中调用父类的同名方法其他的重写、重载、构造、接口、继承、多态都是没问题的.当然脚本语言没有编译器就无法进行比如做接口实现是否完整等检查 靠程序员自己控制好吧
JavaScript, We Hardly new Ya
JavaScript is a prototypal language, but it has a new operator that tries to make it look sort of like a classical language.
That tends to confuse programmers, leading to some problematic programming patterns.
You never need to use new Object() in JavaScript. Use the object literal {} instead. Similarly, don’t use new Array(), use
the array literal [] instead. Arrays in JavaScript work nothing like the arrays in Java, and use of the Java-like syntax will
confuse you.
Do not use new Number, new String, or new Boolean. These forms produce unnecessary object wrappers. Just use simple literals
instead.
Do not use new Function to create function values. Use function expressions instead. For example,
frames[0].onfocus = new Function("document.bgColor='antiquewhite'")
is better written as
frames[0].onfocus = function () {document.bgColor = 'antiquewhite';};
The second form allows the compiler to see the function body sooner, so any errors in it will be detected sooner. Sometimes
new Function is used by people who do not understand how inner functions work.
selObj.onchange = new Function("dynamicOptionListObjects["+
dol.index+"].change(this)");
If we keep function bodies in strings, the compiler can’t see them. If we keep function bodies as string expressions, we can
’t see them either. It is better to not program in ignorance. By making a function that returns a function, we can
explicitly pass in the values we want to bind. This allows us to initialize a set of selObj in a loop.
selObj.onchange = function (i) {
return function () {
dynamicOptionListObjects[i].change(this);
};
}(dol.index);
It is never a good idea to put new directly in front of function. For example, new function provides no advantage in
constructing new objects.
myObj = new function () {
this.type = 'core';
};
It is better to use an object literal. It is smaller, faster.
myObj = {
type: 'core'
};
If we are making an object containing methods that are bound to private variables and functions, it is still better to leave
off the new prefix.
var foo = new function() {
function processMessages(message) {
alert("Message: " + message.content);
}
this.init = function() {
subscribe("/mytopic", this, processMessages);
}
}
By using new to invoke the function, the object holds onto a worthless prototype object. That wastes memory with no
offsetting advantage. If we do not use the new, we don’t keep the wasted prototype object in the chain. So instead we will
invoke the factory function the right way, using ().
var foo = function () {
function processMessages(message) {
alert("Message: " + message.content);
}
return {
init: function () {
subscribe("/mytopic", this, processMessages);
}
};
}();
So the rule is simple: The only time we should use the new operator is to invoke a pseudoclassical Constructor function. When
calling a Constructor function, the use of new is mandatory.
There is a time to new, and a time to not.
Prototype的深度探索
1 什么是prototype
JavaScript中对象的prototype属性，可以返回对象类型原型的引用。这是一个相当拗口的解释，要理解它，先要正确理解对象类型
(Type)以及原型(prototype)的概念。
前面我们说，对象的类（Class）和对象实例（Instance）之间是一种“创建”关系，因此我们把“类”看作是对象特征的模型化，而
对象看作是类特征的具体化，或者说，类(Class)是对象的一个类型(Type)。例如，在前面的例子中，p1和p2的类型都是Point，在JavaScript
中，通过instanceof运算符可以验证这一点：
p1 instanceof Point
p2 instanceof Point
但是，Point不是p1和p2的唯一类型，因为p1和p2都是对象，所以Obejct也是它们的类型，因为Object是比Point更加泛化的类，所以
我们说，Obejct和Point之间有一种衍生关系，在后面我们会知道，这种关系被叫做“继承”，它也是对象之间泛化关系的一个特例，是面向对
象中不可缺少的一种基本关系。
在面向对象领域里，实例与类型不是唯一的一对可描述的抽象关系，在JavaScript中，另外一种重要的抽象关系是类型(Type)与原型
(prototype)。这种关系是一种更高层次的抽象关系，它恰好和类型与实例的抽象关系构成了一个三层的链，下图描述了这种关系：
//TODO:
在现实生活中，我们常常说，某个东西是以另一个东西为原型创作的。这两个东西可以是同一个类型，也可以是不同类型。习语“依
葫芦画瓢”，这里的葫芦就是原型，而瓢就是类型，用JavaScript的prototype来表示就是“瓢.prototype =某个葫芦”或者“瓢.prototype= new 葫芦()”。
要深入理解原型，可以研究关于它的一种设计模式——prototype pattern，这种模式的核心是用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。JavaScript的prototype就类似于这种方式。
关于prototype pattern的详细内容可以参考《设计模式》（《Design Patterns》）它不是本文讨论的范围。
注意，同类型与实例的关系不同的是，原型与类型的关系要求一个类型在一个时刻只能有一个原型（而一个实例在一个时刻显然可以
有多个类型）。对于JavaScript来说，这个限制有两层含义，第一是每个具体的JavaScript类型有且仅有一个原型（prototype），在默认的情况下，这个原型是一个Object对象（注意不是Object类型！）。第二是，这个对象所属的类型，必须是满足原型关系的类型链。
例如p1所属的类型是Point和Object，而一个Object对象是Point的原型。假如有一个对象，它所属的类型分别为ClassA、ClassB、ClassC和Object，那么必
须满足这四个类构成某种完整的原型链，例如：
//TODO:
下面这个图描述了JavaScript中对象、类型和原型三者的关系：
//TODO:
有意思的是，JavaScript并没有规定一个类型的原型的类型（这又是一段非常拗口的话），因此它可以是任何类型，通常是某种对象
，这样，对象-类型-原形（对象）就可能构成一个环状结构，或者其它有意思的拓扑结构，这些结构为JavaScript带来了五花八门的用法，其
中的一些用法不但巧妙而且充满美感。下面的一节主要介绍prototype的用法。
2 prototype使用技巧
在了解prototype的使用技巧之前，首要先弄明白prototype的特性。首先，JavaScript为每一个类型(Type)都提供了一个prototype属性
，将这个属性指向一个对象，这个对象就成为了这个类型的“原型”，这意味着由这个类型所创建的所有对象都具有这个原型的特性。另外，
JavaScript的对象是动态的，原型也不例外，给prototype增加或者减少属性，将改变这个类型的原型，这种改变将直接作用到由这个原型创建
的所有对象上，例如：
<script>
function Point(x,y)
{
this.x = x;
this.y = y;
}
var p1 = new Point(1,2);
var p2 = new Point(3,4);
Point.prototype.z = 0999; //动态为Point的原型添加了属性
alert(p1.z);
alert(p2.z); //同时作用于Point类型创建的所有对象
</script>
如果给某个对象的类型的原型添加了某个名为a的属性，而这个对象本身又有一个名为a的同名属性，则在访问这个对象的属性a时，对象本身的属性“覆盖”了原型属性，但是原型属性并没有消失，当你用delete运算符将对象本身的属性a删除时，对象的原型属性就恢复了可见性。利用
这个特性，可以为对象的属性设定默认值，例如：
<script>
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
Point.prototype.x = 0;
Point.prototype.y = 0;
var p1 = new Point;
var p2 = new Point(1,2);
</script>
上面的例子通过prototype为Point对象设定了默认值(0,0)，因此p1的值为(0,0)，p2的值为(1,2)，通过delete p2.x, delete p2.y; 可以将p2的值恢复为(0,0)。下面是一个更有意思的例子：
<script>
function classA()
{
this.a = 100;
this.b = 200;
this.c = 300;
this.reset = function()
{
for(var each in this)
{
delete this[each];
}
}
}
classA.prototype = new classA();
var a = new classA();
alert(a.a);
a.a *= 2;
a.b *= 2;
a.c *= 2;
alert(a.a);
alert(a.b);
alert(a.c);
a.reset(); //调用reset方法将a的值恢复为默认值
alert(a.a);
alert(a.b);
alert(a.c);
</script>
利用prototype还可以为对象的属性设置一个只读的getter，从而避免它被改写。下面是一个例子：
<script>
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
Point.prototype.x = 0;
Point.prototype.y = 0;
function LineSegment(p1, p2)
{
//私有成员
var m_firstPoint = p1;
var m_lastPoint = p2;
var m_width = {
valueOf : function(){return Math.abs(p1.x - p2.x)},
toString : function(){return Math.abs(p1.x - p2.x)}
}
var m_height = {
valueOf : function(){return Math.abs(p1.y - p2.y)},
toString : function(){return Math.abs(p1.y - p2.y)}
}
//getter
this.getFirstPoint = function()
{
return m_firstPoint;
}
this.getLastPoint = function()
{
return m_lastPoint;
}
this.length = {
valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)},
toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}
}
}
var p1 = new Point;
var p2 = new Point(2,3);
var line1 = new LineSegment(p1, p2);
var lp = line1.getFirstPoint();
lp.x = 100; //不小心改写了lp的值，破坏了lp的原始值而且不可恢复
alert(line1.getFirstPoint().x);
alert(line1.length); //就连line1.lenght都发生了改变
</script>
将this.getFirstPoint()改写为下面这个样子：
this.getFirstPoint = function()
{
function GETTER(){};
GETTER.prototype = m_firstPoint;
return new GETTER();
}
则可以避免这个问题，保证了m_firstPoint属性的只读性。
<script>
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
Point.prototype.x = 0;
Point.prototype.y = 0;
function LineSegment(p1, p2)
{
//私有成员
var m_firstPoint = p1;
var m_lastPoint = p2;
var m_width = {
valueOf : function(){return Math.abs(p1.x - p2.x)},
toString : function(){return Math.abs(p1.x - p2.x)}
}
var m_height = {
valueOf : function(){return Math.abs(p1.y - p2.y)},
toString : function(){return Math.abs(p1.y - p2.y)}
}
//getter
this.getFirstPoint = function()
{
function GETTER(){};
GETTER.prototype = m_firstPoint;
return new GETTER();
}
this.getLastPoint = function()
{
function GETTER(){};
GETTER.prototype = m_lastPoint;
return new GETTER();
}
this.length = {
valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)},
toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}
}
}
var p1 = new Point;
var p2 = new Point(2,3);
var line1 = new LineSegment(p1, p2);
var lp = line1.getFirstPoint();
lp.x = 100; //不小心改写了lp的值，但是没有破坏原始的值
alert(line1.getFirstPoint().x);
alert(line1.length); //line1.lenght不发生改变
</script>
实际上，将一个对象设置为一个类型的原型，相当于通过实例化这个类型，为对象建立只读副本，在任何时候对副本进行改变，都不会影响到
原始对象，而对原始对象进行改变，则会影响到副本，除非被改变的属性已经被副本自己的同名属性覆盖。用delete操作将对象自己的同名属
性删除，则可以恢复原型属性的可见性。下面再举一个例子：
<script>
function Polygon()
{
//http://www.livebaby.cn
var m_points = [];
m_points = Array.apply(m_points, arguments);
function GETTER(){};
GETTER.prototype = m_points[0];
this.firstPoint = new GETTER();
this.length = {
valueOf : function(){return m_points.length},
toString : function(){return m_points.length}
}
this.add = function(){
m_points.push.apply(m_points, arguments);
}
this.getPoint = function(idx)
{
return m_points[idx];
}
this.setPoint = function(idx, point)
{
if(m_points[idx] == null)
{
m_points[idx] = point;
}
else
{
m_points[idx].x = point.x;
m_points[idx].y = point.y;
}
}
}
var p = new Polygon({x:1, y:2},{x:2, y:4},{x:2, y:6});
alert(p.length);
alert(p.firstPoint.x);
alert(p.firstPoint.y);
p.firstPoint.x = 100; //不小心写了它的值
alert(p.getPoint(0).x); //不会影响到实际的私有成员
delete p.firstPoint.x; //恢复
alert(p.firstPoint.x);
p.setPoint(0, {x:3,y:4}); //通过setter改写了实际的私有成员
alert(p.firstPoint.x); //getter的值发生了改变
alert(p.getPoint(0).x);
</script>
注意，以上的例子说明了用prototype可以快速创建对象的多个副本，一般情况下，利用prototype来大量的创建复杂对象，要比用其他任何方
法来copy对象快得多。注意到，用一个对象为原型，来创建大量的新对象，这正是prototype pattern的本质。
下面是一个例子：
<script>
//http://www.livebaby.cn
var p1 = new Point(1,2);
var points = [];
var PointPrototype = function(){};
PointPrototype.prototype = p1;
for(var i = 0; i < 10000; i++)
{
points[i] = new PointPrototype();
//由于PointPrototype的构造函数是空函数，因此它的构造要比直接构造//p1副本快得多。
}
</script>
除了上面所说的这些使用技巧之外，prototype因为它独特的特性，还有其它一些用途，被用作最广泛和最广为人知的可能是用它来模拟继承，
关于这一点，留待下一节中去讨论。
3 prototype的实质
上面已经说了prototype的作用，现在我们来透过规律揭示prototype的实质。
我们说，prototype的行为类似于C++中的静态域，将一个属性添加为prototype的属性，这个属性将被该类型创建的所有实例所共享，
但是这种共享是只读的。在任何一个实例中只能够用自己的同名属性覆盖这个属性，而不能够改变它。换句话说，对象在读取某个属性时，总
是先检查自身域的属性表，如果有这个属性，则会返回这个属性，否则就去读取prototype域，返回protoype域上的属性。另外，JavaScript允
许protoype域引用任何类型的对象，因此，如果对protoype域的读取依然没有找到这个属性，则JavaScript将递归地查找prototype域所指向对
象的prototype域，直到这个对象的prototype域为它本身或者出现循环为止，我们可以用下面的图来描述prototype与对象实例之间的关系：
//TODO:
4 prototype的价值与局限性
从上面的分析我们理解了prototype，通过它能够以一个对象为原型，安全地创建大量的实例，这就是prototype的真正含义，也是它
的价值所在。后面我们会看到，利用prototype的这个特性，可以用来模拟对象的继承，但是要知道，prototype用来模拟继承尽管也是它的一
个重要价值，但是绝对不是它的核心，换句话说，JavaScript之所以支持prototype，绝对不是仅仅用来实现它的对象继承，即使没有了
prototype继承，JavaScript的prototype机制依然是非常有用的。
由于prototype仅仅是以对象为原型给类型构建副本，因此它也具有很大的局限性。首先，它在类型的prototype域上并不是表现为一
种值拷贝，而是一种引用拷贝，这带来了“副作用”。改变某个原型上引用类型的属性的属性值（又是一个相当拗口的解释:P），将会彻底影
响到这个类型创建的每一个实例。有的时候这正是我们需要的（比如某一类所有对象的改变默认值），但有的时候这也是我们所不希望的（比
如在类继承的时候），下面给出了一个例子：
<script>
function ClassA()
{
this.a=[];
}
function ClassB()
{
this.b=function(){};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB2.a);
//所有b的实例中的a成员全都变了！！这并不是这个例子所希望看到的。
</script>
浅析Javascript中继承和Prototype的关系
javascript中支持类的定义，而且定义的方式与函数基本上也相同。
1 function out(val){
2 document.write(val+"<br>");
3 };
4
5 function BaseClass() {
6 this.a="I'm BaseClass.a .";
7 };
第一行的内容可以看成是一个函数，第五行可以看成是一个类。
我们继续，现在我们来看看Javascript 中的继承，以及 Prototype 与继承的关系。先来看看下面这个代码。你能想出运行的结果吗？
1 <script>
2 // author: http://meil.livebaby.cn
3 function out(val){
4 document.write(val+"<br>");
5 };
6
7 function BaseClass() {
8 this.a="I'm BaseClass.a .";
9 };
10 BaseClass.prototype.b="I'm BaseClass.prototype.b .";
11 BaseClass.c="I'm BaseClass.c .";
12
13 var cls1=function(){
14 this.a="I'm cls1.a .";
15 };
16 cls1.prototype.b="I'm cls1.prototype.b .";
17 cls1.c="I'm cls1.c .";
18
19 var cls2=function(){};
20 cls2.prototype=cls1.prototype;
21
22 out("BaseClass<br>");
23 out((new BaseClass).a);
24 out((new BaseClass).b);
25 out((new BaseClass).c);
26 out(BaseClass.c);
27 out("<hr>");
28
29 out("cls1<br>");
30 out(cls1.a);
31 out(cls1.b);
32 out(cls1.c);
33 out("<hr>");
34
35 out("new cls1<br>");
36 out((new cls1).a);
37 out((new cls1).b);
38 out((new cls1).c);
39 out("<hr>");
40
41 out("cls2<br>");
42 out((new cls2).a);
43 out((new cls2).b);
44 out((new cls2).c);
45
46 </script>
运行结果：
BaseClass
I'm BaseClass.a .
I'm BaseClass.prototype.b .
undefined
I'm BaseClass.c .
________________________________________
cls1
undefined
undefined
I'm cls1.c .
________________________________________
new cls1
I'm cls1.a .
I'm cls1.prototype.b .
undefined
________________________________________
cls2
undefined
I'm cls1.prototype.b .
undefined
哈哈！有点晕了！？好像不太一样。
下面来分析一下：
1.先看看这几行：
22 out("BaseClass<br>");
23 out((new BaseClass).a);
24 out((new BaseClass).b);
25 out((new BaseClass).c);
26 out(BaseClass.c);
27 out("<hr>");
25行是调用了对象的c属性，类中没有定义，所以“undefined”
26行直接调用了，类的静态属性，就正常显示了
其他的大家应该都明白了，就不多说了。
2.继续
30 out(cls1.a);
31 out(cls1.b);
32 out(cls1.c);
首先大家应该清楚cls1在这里是类，那就明了。这里cls1只有一个静态属性，就是c，其他的属性只能通过它的对象访问。用类名来访问对不起
，找不到只能显示“undefined”，看下面的代码就清楚了。
3.继续
36 out((new cls1).a);
37 out((new cls1).b);
38 out((new cls1).c);
你不是说得用对象访问吗？我new这回可以了吧？恩！没问题？
不过不是都没问题这个不行-- out((new cls1).c); 那个是类的静态属性用这个 32 out(cls1.c); 就OK。
4.继续
41 out("cls2<br>");
42 out((new cls2).a);
43 out((new cls2).b);
44 out((new cls2).c);
这个的结果有点疑惑，先等等。看看我们是怎么写的
cls2.prototype=cls1.prototype;
哦！用prototype来继承的，对！
a是不能继承的，c是静态的也不能被继承。
5.在补充点内容，让你根多的了解JavaScript中继承的特性
1 var cls3=function(){};
2 cls3.prototype=BaseClass.prototype;
3
4 cls3.prototype.d="I'm cls3"
5 out((new cls3).d);
6 out((new BaseClass).d);
运行结果:
I'm cls3
I'm cls3
结束！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
