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

2016-02-19 22:18 2 1 收藏

下面是个浅谈JavaScript中面向对象技术的模拟教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

一、引言

  在C#和Java语言中,面向对象是以类的方式实现的,特别是继承这个特性,类的方式继承表现出了强大的功能,而且也易于学习。javascript不是纯的面向对象的语言,而是基于对象的语言,对象的继承是以原型函数的形式继承的,很多初学者刚开始接触的时候不太理解,但是JavaScript这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能,本文主要讨论了JavaScript的面向对象技术。

二、原型对象概述

  每个JavaScript对象都有原型对象,对象都继承原型对象的所有属性。一个对象的原型是由创建该对象的构造函数定义的。JavaScript的所有函数都有一个名为prototype的属性,该属性引用了原型对象,该原型对象初始化的时候只有constructor属性来引用创建该原型对象的对象。JavaScript没有Class定义类的概念,构造函数就定义了类,并初始化类中的属性,每个类的成员都会从原型对象中继承相同的属性,也就是说,原型对象提供了类的实例共享的属性和方法,这就节约了内存。

  当读取一个对象的属性的时候,JavaScript会先从对象中查找,如果没有查找到,才会到原型对象中查找该属性(或方法),所以,尤其是对于方法,最好保存到原型对象中以便于共享,并且达到节省内存的目的,而且原型对象还有一个强大的功能,那就是如果通过构造函数实例化一些对象后,再给构造函数的原型对象增加属性和方法,那么它原来实例化的对象实例将会继承这些增加的属性和方法。

三、对象属性、对象方法、类属性、类方法

  每个对象都会有自己单独的实例属性和实例方法的副本,如果实例化5个对象,那么就会有5个对象的实例属性和实例方法副本。This关键字引用它们的实例对象,也就是说,谁操作了实例方法,this就引用谁;访问了哪个实例对象的属性,this就引用这个实例对象。

  类方法和类属性只有一个副本,类方法调用的时候必须引用类的名字,例如:Date.setHours();

  下面用一个程序来表现实例属性、实例方法、类属性、类方法

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

 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彩屏的

四、子类化

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

   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();//实例化子类

来源:https://www.tulaoshi.com/n/20160219/1628129.html

延伸阅读
标签: Web开发
JavaScript 是使用对象化编程的,或者叫面向对象编程的。所谓对象化编程,意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象。小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。这一章将面向对象讲述 JavaScript 的运行情况。 对象 是可以从 ...
标签: ASP
  作者:mechiland (http://www.jzchen.net) 动笔时间:2003年4月21日 完成时间:2003年4月29日 目录: 概述历史 先进的技术与好用的技术: ASP到了尽头吗? 组件化的Web程序       一个实例       小技巧       结束语 概述 本文简要描述了Web开发的历史...
标签: Web开发
代码如下: function CallBackObject() { this.XmlHttp = this.GetHttpObject(); } CallBackObject.prototype.GetHttpObject = function() //动态为CallBackObject的原型添加了GetHttpObject共有方法 { //第一步:创建XMLHttpRequest对象 //进行兼容性判断 var xmlhttp; /*@cc_on @if (@_jscript_version = 5) try { xmlhttp = ne...
标签: PHP
出自:http://www.cncsk.com/Document/WebDev/PHP/200512291759.htm 这篇文章介绍在PHP的面向对象编程(OOP)。我将演示如何用面向对象的概念编出较少的代码但更好的程序。祝大家好运。 面向对象编程的概念对每一个作者来说都有不同的看法,我提醒一下一个面向对象语言应有的东西: - 数据抽象和信息隐藏 ...
标签: Web开发
JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器; 作为对象方法; 作为构造函数。 1.作为普通逻辑代码容器 function multiply(x, y){ return x*y; } 函数multiply封装了两位数的乘法运算公式: var product = multiply(128,128); // product = 16384 创建函数实例的方式有3种。第一种是声明式,即像声...

经验教程

939

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部