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

开发 后端 前端
JavaScript不是纯的面向对象的语言,而是基于对象的语言,对象的继承是以原型函数的形式继承的,很多初学者刚开始接触的时候不太理解,但是JavaScript这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能,本文主要讨论了JavaScript的面向对象技术。

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

原型对象概述

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

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

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

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

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

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

  1. function Mobile(kind,brand) {  
  2.  
  3.     this.kind=kind;//定义手机的种类,例如GSM/CDMA  
  4.  
  5.     this.brand=brand;//定义手机的品牌,this关键字表示用该构造函数实例化之后的对象  
  6.  
  7. }  
  8.  
  9.  
  10. /**//*  
  11.  
  12. 定义类的第二步是在构造函数的原型对象中定义它的实例方法或其他属性  
  13.  
  14. 该对象定义的任何属性都将这个类的所有实例继承。  
  15.  
  16.  
  17. */ 
  18.  
  19. //拨号,这里只是返回电话号码  
  20.  
  21. Mobile.prototype.dial = function(phoneNo) {  
  22.  
  23.     return phoneNo;  
  24.  
  25. };  
  26.  
  27.  
  28.  
  29. /**//*  
  30.  

定义类的第三步是定义类方法,常量和其他必要的类属性,作为构造函数自身的属性,而不是构造函数

原型对象的属性,注意,类方法没有使用关键字this,因为他们只对他们的实际参数进行操作。

  1. */  
  2.  
  3. //开机关机方法  
  4.  
  5. Mobile.turnOn=function() {  
  6.  
  7.    return "The power of mobile is on";  
  8.  
  9. }  
  10.  
  11. Mobile.turnOff=function() {  
  12.  
  13.    return "The power of mobile is off";  
  14.  
  15. }  
  16.  
  17.  
  18.  
  19. //类属性,这样他们就可以被用作常量,注意实际上他们并不是只读的  
  20.  
  21. Mobile.screenColor=64K;//假设该类手机的屏幕颜色都是64K彩屏的  
  22.  

子类化

JavaScript支持子类化,只需把子类的原型对象用超类实例化即可,但是应该注意,这样子类化之后就会存在一个问题,由于是用超类实例化子类的原型对象取得的,所以就冲掉了自己本身的由JavaScript提供的constructor属性,为了确保constructor的正确性,需要重新指定一下,子类化的程序例子如下:

  1.  /*****  子类化  *****/ 
  2.  
  3. //下面是子类构造函数智能型手机  
  4.  
  5. function SmartPhone(os)  
  6.  
  7. {  
  8.  
  9.   this.os=os;  
  10.  
  11.    
  12.  
  13. }  
  14.  
  15. //我们将Mobile对象作为它的原型  
  16.  
  17. //这意味着新类的实例将继承SmartPhone.prototype,  
  18.  
  19. //后者由Mobile.prototype继承而来  
  20.  
  21. //Mobile.prototype又由Object.prototype继承而来  
  22.  
  23. SmartPhone.prototype=new Mobile(GSM,Nokia);  
  24.  
  25. //下面给子类添加一个新方法,发送电子邮件,这里只是返回Email地址  
  26.  
  27. SmartPhone.prototype.sendEmail=function(emailAddress) {  
  28.  
  29.   return this.emailAddress  
  30.  
  31. }  
  32.  
  33. //上面的子类化方法有一点缺陷,由于我们明确把SmartPhone.prototype设成了我们所创建的一个对象,所以就覆盖了JS提供  
  34.  
  35. //的原型对象,而且丢弃了给定的Constructor属性。该属性引用的是创建这个对象的构造函数。但是SmartPhone对象集成了它的  
  36.  
  37. //父类的constructor,它自己没有这个属性,明确设置着一个属性可以解决这个问题:  
  38.  
  39. SmartPhone.prototype.constructor=SmartPhone;  
  40.  
  41. var objSmartPhone=new SmartPhone();//实例化子类   
  42.  

【编辑推荐】

  1. 如何优化JavaScript脚本的性能
  2. Javascript中最常用的25个经典技巧
  3. 不唐突的JavaScript的七条准则
  4. JavaScript中的Object到底是什么
  5. 痛陈Javascript的缺点
责任编辑:王观 来源: 动态网站制作指南
相关推荐

2021-10-21 18:47:37

JavaScript面向对象

2018-12-14 11:30:00

JavaScript编程前端

2011-05-13 11:05:52

javascript

2011-05-13 11:27:59

javascript

2011-05-13 10:51:25

javascript

2011-05-13 11:17:18

javascript

2011-05-13 12:38:58

javascript

2011-05-13 09:58:46

javascript

2012-01-17 09:34:52

JavaScript

2017-04-21 09:07:39

JavaScript对象编程

2012-03-14 10:48:05

C#

2018-12-19 19:30:46

JavaScript创建对象前端

2012-02-27 09:30:22

JavaScript

2009-06-29 10:50:18

VB.NET面向对象能力

2009-06-15 14:59:31

Java代码Java

2012-12-25 10:51:39

IBMdW

2011-05-25 10:21:44

Javascript

2011-05-25 11:15:02

Javascript继承

2011-05-25 10:59:26

Javascript继承

2010-06-13 10:01:48

面向对象技术与UML
点赞
收藏

51CTO技术栈公众号