由浅到深了解JavaScript类

    感觉写的不错（对入门者，呵呵），特意转载备忘（目的：做成PDF的电子书）

原文地址：http://www.cftea.com/c/618.asp

作者：泣红亭

 

      最近在无忧脚本混了一阵子，回复了一些贴子，自己却没有做出什么东东让大家看看，心里有些不安，于是写了下边的一点东西，本来应该发在类封装区的，考虑到那里比较冷，而这篇文章我希望能够帮助到更多的朋友，因此放到这里来了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类是什么？

      许多刚接触编程的朋友都可能理解不了类，其实类是对我们这个现实世界的模拟，把它说成“类别”或者“类型”可能会更容易理解一些。比如“人”这种动 物就是一个类，而具体某一个人就是“人”这个类的一个实例，“人”可以有许多实例（地球人超过六十亿了），但“人”这个类只有一个。你或许会说那男人和女 人不也是人么？怎么只能有一个？其实这里要谈到一个继承的东西，后边才讲，请继续看下去。

 

如何建立一个类？
      在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.51js.com "; //静态属性的定义是：WuYouUser.prototype.Url = "http://www.51js.com ";
var Wo = new WuYouUser();
document.write(WuYouUser.Url); //http://www.51js.com
document.write(Wo.Url); //undefined,即未定义！注意这里的未定义

从这里可以看出Url这个属性是WuYouUser自个所有，改变了它与其它类以及它的子类完全无关！

引用类的属性只有一个办法，就是类名.属性名，改变它也一样。

定义类作为一个对象时的方法：

WuYouUser.ChangeUrl = function()
{
this.Url = "http://51js.com ";
}

你或许会觉得奇怪，这里的this是什么？因为ChangeUrl这个方法是属于对象WuYouUser的，因此this指的就是WuYouUser本身！

可以运行下边的代码试试：

document.write(WuYouUser.Url); // http://www.51js.com
WuYouUser.ChangeUrl();
document.write(WuYouUser.Url); // http://51js.com

明显ChangeUrl直接修改了WuYouUser.Url的值，因此后边才能输出http://51js.com

如果你这一节看不明白，也不要着急，编程嘛，许多东东都只能意会不能言传，而且我又没口才，说不清楚，只要以后多写写代码，多用用类自然而然会体会到这一些，还有可以去看看JSVM的代码，里边几乎每个类都有用到类作为一个对象时的属性与方法。

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
后言

首先感谢你能够有耐心看到这里，我也没想到写了这么多才能够写得像样一点，请别介意。

不管是哪种语言，只要是支持类的，类都在这种语言中占了非常重要的地位，但不是谁都能够掌握它，为了让无忧还没学过类以及对类这个东东还搞不清楚的网友能够清楚一点了解类的概念以及用法，也为了对无忧做点贡献，我写了这篇文章，希望大家能够喜欢。

下面是wch3116的跟贴：

我们最近常谈javascript的OO，但请大家要格外记住，javascript 不是“面向对象”的语言，最多只能说是“基于对象”。
“面向对象”和“基于对象”之间的差别，我一时很难找到 简单且又准确 的词汇来描述。
谈到 “面向对象”，我们首先可能会想到 c++，其次是 java，后来再就是 dot net ，（其他的偏门语言我们这里不多讨论）
其 实 c++ 在贯彻 “面向对象”思想方面 是不及 java 的，因为它还存在大量 “过程”型的东西。 java 放弃了多重继承，重载算子等“繁索不实用”的东西，把设计重点放在interface（接口）上，不仅简化的编程者的工作繁琐度，而且让整个框架看上去更 加清晰。最重要的是 java 中所有的东西都是以类的形式存在的，没有第二种形式。至于后来dotnet 中的 c# ，看起来就像是 ms 牌子的 java.

扯远了，回到 javascript 上来
说Javascript不是面向对象 不仅仅是 说 它没有真正意义上实现：抽象对象、 继承、重载等等面向对象的功能
而是说 javascript中的“类” 并不是真正广义上“类”的概念。类原本是只是一个抽象定义，而javascript中通过“Function” 定义的类，本质上却是一个“对象”！

而且javascript的语法域并不是整个 IE 进程，而是以 Window对象为单位的。
不同Window对象下相同的Function定义，并不是同一个“类”。

比如：
a.htm 中你定义了一个 A 类 function A(){} , b.htm 中你也相同定义了这个 A 类 function A(){}

在 a.htm 中你创建了一个实例： var a = new A();
你在 b.htm 中得到了 a.htm 的句柄 winAhandle
然后你得到 a.htm 中 a 实例的引用
var a = winAhandle.a;
你会发现 a instanceof A 是 false，换成 a instanceof winAhandle.A 便是 true 了
原因很简单，b.htm 中的A 类并不等同于 a.htm 中的A类，这种“类”的语法域只限于 一个相同的 Window 对象下（同一个Window对象并不仅是指同一个页面）

这显然是有悖于 类是一个广义上的抽象定义 这种概念了

会 VB 的人，也应该了解：VB4之后，VB.NET之前的 VB（包括VBS）中的类，也是这种情况，虽然它是通过 Class 的方式定义的。
比如你 new A 放到 session 里，下一次从 session 中取出来，便不是原先那个对象了。
其实就是因为语法域不同，前一次定义的类，并不能保留到这一次，解析器不知道他是什么东西，故不能还原了

顺便提一下 javascript 中继承方式是采用的 原型（prototype）继承，详细的介绍，大家可以去找这本书看看

《Design Patterns Elements of Reusable Object Oriented Soffware》
中文版好像叫 《可复用面向对象的设计模式》
一本好书！！！

javascript中没有多重继承。多重继承在面向对象中并不是必须的。虽然多重继承的重用性更好，但会导致类之间的关系过于复杂。
一般来说，一样事物，我们通常可以认为它主要是某一类事物的衍生物，单一继承就够用了，至于其他的特性，我们可以借助接口来定义。
javascript中也没有接口概念，javascript不需要接口，因为它是一门解释型的语言，不对实参的类型做预校验。作为一个参数对象，有没有某个方法，加载过程中并不去检查，直到运行时，有则调用，无则异常。不需要强制性声明继承了哪个接口才能做为参数调用。

但实际中，我们还是需要设计一些接口，主要是出于view的考虑，整个框架容易被读懂！