javascript 类学习资料(一)

19,545次阅读
没有评论

共计 5178 个字符,预计需要花费 13 分钟才能阅读完成。

一说出类,没有编程基础的朋友们会有点晕,现在编程都讲究的面向对象编程。优势不在这里说了,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

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-09-12发表,共计5178字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)