浅谈JavaScript中面向对象技术的模拟

 更新时间:2006年09月25日 00:00:00   作者:  
一、引言
  在C#和Java语言中,面向对象是以类的方式实现的,特别是继承这个特性,类的方式继承表现出了强大的功能,而且也易于学习。JavaScript不是纯的面向对象的语言,而是基于对象的语言,对象的继承是以原型函数的形式继承的,很多初学者刚开始接触的时候不太理解,但是JavaScript这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能,本文主要讨论了JavaScript的面向对象技术。
二、原型对象概述
  每个JavaScript对象都有原型对象,对象都继承原型对象的所有属性。一个对象的原型是由创建该对象的构造函数定义的。JavaScript的所有函数都有一个名为prototype的属性,该属性引用了原型对象,该原型对象初始化的时候只有constructor属性来引用创建该原型对象的对象。JavaScript没有Class定义类的概念,构造函数就定义了类,并初始化类中的属性,每个类的成员都会从原型对象中继承相同的属性,也就是说,原型对象提供了类的实例共享的属性和方法,这就节约了内存。
  当读取一个对象的属性的时候,JavaScript会先从对象中查找,如果没有查找到,才会到原型对象中查找该属性(或方法),所以,尤其是对于方法,最好保存到原型对象中以便于共享,并且达到节省内存的目的,而且原型对象还有一个强大的功能,那就是如果通过构造函数实例化一些对象后,再给构造函数的原型对象增加属性和方法,那么它原来实例化的对象实例将会继承这些增加的属性和方法。
三、对象属性、对象方法、类属性、类方法
  每个对象都会有自己单独的实例属性和实例方法的副本,如果实例化5个对象,那么就会有5个对象的实例属性和实例方法副本。This关键字引用它们的实例对象,也就是说,谁操作了实例方法,this就引用谁;访问了哪个实例对象的属性,this就引用这个实例对象。
  类方法和类属性只有一个副本,类方法调用的时候必须引用类的名字,例如:Date.setHours();
  下面用一个程序来表现实例属性、实例方法、类属性、类方法
复制代码 代码如下:

 function Mobile(kind,brand) {
      this.kind=kind;//定义手机的种类,例如GSM/CDMA
      this.brand=brand;//定义手机的品牌,this关键字表示用该构造函数实例化之后的对象
  }
  
  /**//*
   定义类的第二步是在构造函数的原型对象中定义它的实例方法或其他属性
   该对象定义的任何属性都将这个类的所有实例继承。
   
   */
   //拨号,这里只是返回电话号码
  Mobile.prototype.dial = function(phoneNo) {
      return phoneNo;
  };
  
  
  /**//*
   定义类的第三步是定义类方法,常量和其他必要的类属性,作为构造函数自身的属性,而不是构造函数
   原型对象的属性,注意,类方法没有使用关键字this,因为他们只对他们的实际参数进行操作。
   */
  //开机关机方法
  Mobile.turnOn=function() {
     return "The power of mobile is on";
  }
  Mobile.turnOff=function() {
     return "The power of mobile is off";
  }
  

  
  //类属性,这样他们就可以被用作常量,注意实际上他们并不是只读的
  Mobile.screenColor=64K;//假设该类手机的屏幕颜色都是64K彩屏的
四、子类化
   JavaScript支持子类化,只需把子类的原型对象用超类实例化即可,但是应该注意,这样子类化之后就会存在一个问题,由于是用超类实例化子类的原型对象取得的,所以就冲掉了自己本身的由JavaScript提供的constructor属性,为了确保constructor的正确性,需要重新指定一下,子类化的程序例子如下:
   /*****  子类化  *****/
//下面是子类构造函数智能型手机
function SmartPhone(os)
{
  this.os=os;

}
//我们将Mobile对象作为它的原型
//这意味着新类的实例将继承SmartPhone.prototype,
//后者由Mobile.prototype继承而来
//Mobile.prototype又由Object.prototype继承而来
SmartPhone.prototype=new Mobile(GSM,Nokia);
//下面给子类添加一个新方法,发送电子邮件,这里只是返回Email地址
SmartPhone.prototype.sendEmail=function(emailAddress) {
  return this.emailAddress
}
//上面的子类化方法有一点缺陷,由于我们明确把SmartPhone.prototype设成了我们所创建的一个对象,所以就覆盖了JS提供
//的原型对象,而且丢弃了给定的Constructor属性。该属性引用的是创建这个对象的构造函数。但是SmartPhone对象集成了它的
//父类的constructor,它自己没有这个属性,明确设置着一个属性可以解决这个问题:
SmartPhone.prototype.constructor=SmartPhone;
var objSmartPhone=new SmartPhone();//实例化子类

相关文章

  • JavaScript中BOM,DOM和事件的用法详解

    JavaScript中BOM,DOM和事件的用法详解

    BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象。DOM全称Document Object Model 文档对象模型,将标记语言文档的各个组成部分,封装为对象。本文将详解BOM,DOM和事件的区别于用法,需要的可以参考一下
    2022-06-06
  • 学习JavaScript设计模式(代理模式)

    学习JavaScript设计模式(代理模式)

    这篇文章主要带领大家学习JavaScript设计模式,其中重点介绍代理模式,对代理模式进行详细剖析,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 解决在Bootstrap模糊框中使用WebUploader的问题

    解决在Bootstrap模糊框中使用WebUploader的问题

    这篇文章主要介绍了在Bootstrap模糊框中使用WebUploader的问题及解决方法,,需要的朋友可以参考下
    2018-03-03
  • 微信小程序有旋转动画效果的音乐组件实例代码

    微信小程序有旋转动画效果的音乐组件实例代码

    这篇文章主要介绍了微信小程序有旋转动画效果的音乐组件,需要的朋友可以参考下
    2018-08-08
  • JS实现css hover操作的方法示例

    JS实现css hover操作的方法示例

    这篇文章主要介绍了JS实现css hover操作的方法,涉及javascript事件响应及页面元素css属性动态操作相关技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript正则表达式替换字符串中图片地址(img src)的方法

    JavaScript正则表达式替换字符串中图片地址(img src)的方法

    这篇文章主要介绍了JavaScript正则表达式替换字符串中图片地址(img src)的方法,结合实例形式分析了JS正则替换的常用技巧与注意事项,需要的朋友可以参考下
    2017-01-01
  • javascript原型模式用法实例详解

    javascript原型模式用法实例详解

    这篇文章主要介绍了javascript原型模式用法,以实例形式较为详细的分析了javascript原型模式的原理与使用技巧,需要的朋友可以参考下
    2015-06-06
  • 浅聊一下JavaScript中的LHS和RHS查询

    浅聊一下JavaScript中的LHS和RHS查询

    在日常编码中,我们通常关注代码的逻辑和功能,但很少深入思考编译器在幕后的工作,今天我们将学习一下LHS(Left-Hand Side)和RHS(Right-Hand Side)查询,它们在JavaScript编译和执行中的关键作用,以及在我们的日常开发中是如何发挥作用的,需要的朋友可以参考下
    2023-11-11
  • uniapp 仿微信的右边下拉选择弹出框的实现代码

    uniapp 仿微信的右边下拉选择弹出框的实现代码

    这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • javascript比较两个日期相差天数的方法

    javascript比较两个日期相差天数的方法

    这篇文章主要介绍了javascript比较两个日期相差天数的方法,涉及javascript针对日期的转换与数学运算相关技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07

最新评论