javascript 类学习资料（一）

一说出类，没有编程基础的朋友们会有点晕，现在编程都讲究的面向对象编程。优势不在这里说了，javascript一直以来都是“面向过程”编程的多，就是因为javascript 类不是太完善。

先来解释一下什么类

类（Class）实际上是对某种类型的对象定义变量和方法的原型。

类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。实际上它本身并不是对象，因为它不存在于内存中。当引用类的代码运行时，类的一个新的实例，即对象，就在内存中创建了。虽然只有一个类，但能从这个类在内存中创建多个相同类型的对象。

可以把类看作“理论上”的对象，也就是说，它为对象提供蓝图，但在内存中并不存在。从这个蓝图可以创建任何数量的对象。从类创建的所有对象都有相同的成员：属性、方法和事件。但是，每个对象都象一个独立的实体一样动作。例如，一个对象的属性可以设置成与同类型的其他对象不同的值。

如何建立一个js类？

　　在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这个实例所特有的，而非分析可知道在静态方法里尽量不要使用this这样的关键字来引用实例本身的属性，除非你有特别的目的，而且能够清楚地明白这里边的运行机制！　　

　　如果真的需要在静态方法里使用this，可以直接把this当作参数传进去：　　

　　NewClass.ChangeName = function(This,NewName) //注意这里是This,不是this

　　{

　　　　This.Name = NewName;

　　}

下节：javascript 类学习资料（二）：http://suiyidian.cn/post-62.html

添加新评论

最近回复

分类

其它