`
小嘴冰凉
  • 浏览: 456944 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript类

    博客分类:
  • 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这个实例所特有的,而非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的代码,里边几乎每个类都有用到类作为一个对象时的属性与方法。

3顶一下
http://www.cnblogs.com/dicky/archive/2005/06/05/168471.html
分享到:
评论

相关推荐

    aspnet操作javascript类

    JavaScript类在Web开发中的应用广泛,它们允许我们创建复杂的数据结构,封装逻辑,以及实现面向对象的编程风格。在ASP.NET中,我们可以通过以下几种方式使用JavaScript类: 1. **定义和实例化JavaScript对象**:在...

    JavaScript 类.html

    JavaScript 类

    由浅到深了解JavaScript类

    JavaScript 类是编程语言中用于构建面向对象模型的关键概念,它允许我们通过类来模拟现实世界中的对象和...了解和熟练掌握JavaScript类的概念和用法,对于进行软件开发和程序设计至关重要,尤其是在构建复杂应用时。

    由浅到深了解JavaScript类.doc

    JavaScript 类是编程语言中用于构建面向对象模型的关键概念,它允许开发者通过类来组织和抽象数据及行为。本文将从基础出发,逐步深入地讲解...理解和掌握JavaScript类的概念,对于编写可维护和可扩展的代码至关重要。

    javascript类模版 从零开始(一)

    在这个系列的第一部分,我们将深入探讨JavaScript类模板的基础知识,以及如何使用它们来创建和实例化对象。 首先,我们需要了解在ES5之前的JavaScript中,我们通常使用构造函数和原型链来实现面向对象的特性。但...

    javascript 类, 对象 深入学习

    因此,理解函数和原型是理解JavaScript类的基础。 1. **函数与构造函数** 在JavaScript中,函数可以作为一等公民,这意味着函数可以赋值给变量、作为参数传递或作为其他函数的返回值。当我们使用`new`关键字调用一...

    JavaScript 类 1.html

    JavaScript 类 1

    【温故而知新】JavaScript类、类继承、静态方法.md

    【温故而知新】JavaScript类、类继承、静态方法

    EventBus, 用于管理事件的简单JavaScript类.zip

    EventBus, 用于管理事件的简单JavaScript类 简单的JavaScript类,用于管理JavaScript中的事件安装浏览器中的下载 eventbus.min.js 插件并将它的添加到你的页面。节点中的npm i eventbusjs -S然后在你的代码中:

    javascript-concurrent-tasks:这个javascript类允许注册多个任务并在所有注册的回调完成后接受另一个回调函数来执行它

    javascript并发任务Javascript 类,允许注册多个回调以同时执行(排序)以执行单个函数。 例子: var syncFuncs = new SyncFuncs ( ) ;syncFuncs . registerTask ( function ( ) { $ . ajax ( { url : '...

    实用javascript类

    实用javascript类 表单ajax提交

    el.js, 本机javascript类和创建dom对象的方法.zip

    el.js, 本机javascript类和创建dom对象的方法 el.js用于创建元素的简单Javascript库,不需要其他库示例:元素的创建创建一个没有属性的简单元素el('div')=> <div></div>一些vanity方

    使用Modello编写JavaScript类

    这篇文章是关于 JavaScript 的,所以我们先来了解一下 JavaScript 是一种怎样的语言。到目前为止,JavaScript 是一种不完全支持面向对象特性的脚本语言。之所以这样说是因为 JavaScript 的确支持对象的概念,...

    javascript写类方式之六

    尽管没有具体的代码,但可以想象它可能包含了一个使用上述类方式实现的JavaScript类。通过分析这个文件,我们可以学习到实际编程中类的运用,以及如何将理论知识应用到实践中。 总结起来,JavaScript的类方式多种...

    asp.net中javascript通用类

    通过这样的通用JavaScript类,开发者可以创建出更健壮、可维护的ASP.NET应用,同时提高开发效率。不过,随着技术的发展,现代Web开发中更多地倾向于使用库和框架(如jQuery、React、Vue等),它们提供了更高级别的...

    JavaScript:JavaScript类

    JavaScript类提供了`public`(默认)、`private`和`protected`三种访问控制符,但需要注意的是,JavaScript的私有属性和方法实际上是通过闭包实现的,而不是像其他一些语言那样在语法层面上支持。 7. **类表达式**...

    Javascript类的继承,使用this.callParent调用超类方法

    在本话题中,我们将深入探讨JavaScript中的类继承,并特别关注`this.callParent`这个方法,它是如何被用来调用超类方法的。 首先,让我们了解JavaScript中的构造函数。构造函数是一种特殊的函数,用于创建和初始化...

    javaScript类继承经典资料

    继承是面向对象开发的又一个重要概念,它可以将现实生活的概念对应到程序逻辑中。...在JavaScript中没有专门的机制来实现类的继承,但可以通过拷贝一个类的prototype到另外一个类来实现继承等扥,看资料

Global site tag (gtag.js) - Google Analytics