[转贴]面向对象的JavaScript编程

面向对象JavaScript编程 面向对象JavaScript编程 Javascript对于做过Web程序的人不应该是陌生,初期是用来做一些简单的FORM验证,基本上是在玩弄一些技巧性的东西。IE 4.0引入了DHTML,同时为了对抗Netscape的Javascript,提出了自己的脚本语言JScript,除了遵循EMAC的标准之外,同时增加了许多扩展,如下要提到的OOP编程就是其中的一个,为了命且概念,我以 阅读详情
 面向对象的JavaScript编程


    Javascript
对于做过Web程序的人不应该是陌生,初期是用来做一些简单的FORM验证,基本上是在玩弄一些技巧性的东西。IE 4.0引入了DHTML,同时为了对抗NetscapeJavascript,提出了自己的脚本语言JScript,除了遵循EMAC的标准之外,同时增加了许多扩展,如下要提到的OOP编程就是其中的一个,为了命且概念,我以下提到的Javascript都是Microsoft Internet Explorer 4.0以上实现的JScript,对于Netscape,我没有做过太多的程序,所以一些的区别也就看出来。


    Javascript
不是一个支持面向对象的语言,更加算不上一个开发平台,但是Javascript提供了一个非常强大的基于prototype的面向对象调用功能,你可以在你自己需要的地方使用他们。因此,如何使用对象?本文尽可能从Javascript面向对象实现原理出发,解析清楚它的工作模型。在了解这些模型之后,你可以在自己的脚本库中编写一些实现代码,然后在其他地方调用。

 

    Javascript的语法和C++很接近,不过在类实现中没有使用关键字Class,实现继承的时候也没有采用传统的Public或者Implement等等所谓的关键字来标示类的实现。这样的情况下,可能有就有人会问,如何编写JavascriptClass,如何实现继承。我开始也是百思不得其解,后来看了MSDN,才知道采用了prototype来实现,包括继承和重载,也可以通过这个关键字来实现。

 

    Javascript的函数很奇怪,每个都是默认实现了Optional的,即参数都可以可选的,function a(var1,var2,var3),在调用的过程中a(),a(value1),a(value1,value2)等等的调用都是正确的,至少在即使编译部分可以完整通过,至于其它,只是和函数的实现逻辑比较相关了。

    以下就JS对于类的实现、继承、重载详细介绍其实现方式。

    1。实现

    Js类的实现就通过函数直接实现的,每个函数可以直接看成class,如下代码

    function ClassTest1(){

        ...//implement code

    }

    var a=new ClassTest1

   

    function ClassTest2(var1){

        ...//implement code

    }

    var b=new ClassTest("value")

    对于类的属性,可以通过两种方式实现

    1this."<Property or Method"的方式实现,在类声明函数中直接给出函数的实现,如 this.Add=new function(strUserName,strPassword)这样的方式调用,编写的方式在Class Function中调用。

    2)通过ClassFunction.prototype.[FunctionName]=function(var1,var2...){//todo}这样的方式完成调用。

    这两种方式从目标来看是一致的,按照我个人的观点来看,区别的只是在于实现方式,通过this.propertyName的方式来创建,Jscript自动创建了property或者method的入口,不过从程序的角度而言,还是使用prototype的关键字实现比较灵活。

   

    另外Javascript也可以和我们C++中那种嵌套声明的方法来声明,C++实现的方法如下

    Public Class ClassName:ParentClass{

        Public DataType FunctionName(){

 

        }

        Public Class ClassName{

            Public DataType FunctionName(){

            }

        }

    }

    Javascript当中,当然不存在class这样的关键字了,所以实现起来有点戏剧性,不过仍然为一个非常巧妙的实现。

    function className(){

        //Property Implement

        this.UserName="blue";

        //Method Implement

        this.Add=new function(){

 

        }

        //Sub Class Implement

        function SubClassName(){

            this.PropertyName="hi"           

        }

        //sub class method implement

        SubClassName.prototype.Change=function{

 

        }

    }

    //Main Class Method Implement

    className.prototype.Delete=function(){

 

    }

    如上的代码大致演示了Javascript类中属性和方法的实现,另外有一点比较困惑,整个class中都是public的,没有关键字private之类的可以控制某些方法是否隐藏,那么在我们编写代码实现的规范中,我看国外一些程序员都是使用_functionName这样子为函数命的方法来区分,但是在调用过程中实际还可以调用的。

    实现了属性和方法,剩下的就是Event的实现了,我查找了许多资料,包括整个MSDN关于JScript的参考,都没有看到一个很好的模型关于事件实现的,后来参考了一些站点编写HTA(HTML Component,有空我会写一些相关的文章)的实现,借助于比较扭曲(我个人认为)的方法可以大致的实现基于事件驱动的功能。大致的思路是这样子的:

    1.将所有的事件定义成属性,只要简单的声明就可以

    2.在需要触发事件的代码中判断事件属性是否是一个函数,如果是函数,直接执行函数代码,如果是字符串,那么执行字符串函数,通过eval(str)来执行。

    3) .在类的实例当中注册事件函数。

    为了简单说明如上的思路,采用timer这样简单的例子来表述如上的所提到的内容,如果只是为了简单的实现timer的功能,JavascriptsetInterval函数就可以满足全部的要求,如下的代码只是用来说明Timer的工作原理。

//Class For Timer
function Timer(iInterval){
 //if not set the timer interval ,then defalut set to 500ms
 this.Interval=iInterval || 500;
 this._handleInterval;
 this.TimerEvent=null
 function Start(){
  if(this.Interval!=0){
   this._handleInterval=setInterval("TimerCallBack()",this.Interval);
  }
 }
 function Start(){
  clearInterval(this._handleInterval);
 }
 function TimerCallBack(){
  if (typeof this.TimerEvent=="function"){
   this.TimerEvent();
  }
  else if(this.TimerEvent!=null && this.TimerEvent.length>0){
   eval(this.TimerEvent);
  }
 }

//Code for Instance
var t=new Timer(3);

//------------------------------------//

//1.
t.TimerEvent=function(){
//todo
}

//2.
t.TimerEvent="alert(/"hello/")";

//3.

t.TimerEvent=tTimerCall;

//----------------------------------//
t.Start();
t.Stop();

function tTimerCall(){

 

}

 

    实际工作代码是在TimerCallBack()上面实现,事件触发作为属性的方式来实现,在应用实例中,代码提供了三种方法去调用事件,不过在事件的回调当中,我还没有想到如何可以带参数,只有才各自的实现当中访问各自需要的属性才能够实现全部的要求。

 

    2。继承。

    刚采用了大篇幅的文字去介绍如何实现Javascript的各种实现,也就是从逻辑上完成了一个封装class的实现,从某种意义上来说,class的实现是真正脚本编程中使用最多的部分,不过如果只是要完成如上的功能,使用VBScript来编写更能更加清晰,毕竟VBscript提供了class关键字,同时提供了public private这两个关键字,可以清晰的将公共和私有对象分离,至于事件的实现,也可以采用类似Javascript实现的思路,只是对于函数的引用需要采用GetRef这个函数,具体的用法可以参考scripting reference,MSDN里头也有详细的介绍,而Javascript强大至于在于如下要说的了,虽然具体的东西可能不多。

    如上所言,我们已经完成了一个基本的类实现Timer,现在要做的是重新编写这个类,我们简单的只是想在这个类之中加入一个方法,提供当前的系统时间,方法的名称为getSystemDate,显然如果全部重新编写,那就失去了我这里说的意义了。先看看如下的实现。

    function NewTimer(iInterval){

        //call super

        this.base=Timer;

        this.baseiInterval);       

    }

    NewTimer.prototype=new Timer;

    NewTimer.prototype.getSystemDate=function(){

        var dt=new Date();

        return dt.getYear()+"-"+dt.getMonth()+"-"+dt.getDay()

    }

   

    上述代码实现了NewTimer类,从Timer继承,Javascript没有使用或者javapublic那样类似的关键字,只是通过newclassname.prototype=new baseclass这样的方法来完成,同时NewTimer实现了getSystemDate的方法,在NewTimer的初始化函数中,我使用了this.base=Timer,是为了引用父类的实现,不过在对于父类其他实现函数的调用,到现在我没有找到一个确定的方法,是否通过this.base.start()那样来调用还是其他的,如果有谁比较清楚的,麻烦告诉我,另外在netscape的站点上,我查到有一个特殊的"__proto__"的属性好像是对于父类的直接引用,不过具体的我也没有尝试过,在msdn中也没有看到对于__proto__的支持。

   

    3。重载

    或许这个是OOP编程中比较复杂的地方了,在Javascript的实现中有点无奈,也就是通过prototype的方式来完成的,不过因为我不清楚如何调用父类的实现函数,那么在重载中只能够重新编写所有的实现了,另外就是在实现中实例化一个父类,然后通过调用它来返回需要的东西。

    Javascript中所有的对象都是从Object继承下来的,object提供了toString()的方法,也就是说如果调用alert(objInstance)这样的过程,实际上是调用了alert(objInstance.toString())的方法,如果没有编写实现,object默认的toString()都是"object object"这样子的,在许多地方需要重载这个函数的,比如Timer,如果我们希望var ins=new Timer(5);alert(ins)调用得到的是interval的值5,那么就需要重新编写toString()方法了

    Timer.prototype.toString=function(){ return this.Interval};

    以上代码实现之后alert(ins)得到的就是5了。

 

 

读取系统时间 //============================================================================ // Name : sj.cpp // Author : xiaopeng // Version : // Copyright : Your copyright notice // Description... 阅读详情

相关推荐

JavaScript----面向对象编程

面向对象概述 ES6面向对象语法 构造函数与原型对象 原型链 this的指向 错误处理 继承

weixin_60291486的博客 1693

js获取当周、当月时间区间的方法

当周: var date = new Date(); var zero = new Date(date.getFullYear(),date.getMonth(),date.getDate(),"00","00","00"); var full = new Date(date.get...

123 1476

获取系统日期

/* get the local system date */ int get_system_date(char *str_date) { struct tm *tp=NULL; time_t t; time(&t); tp = (struct tm *)localtime(&t); sprintf(str_date, "%04d%02d%02d", tp

隙光 755

JavaScript系列04-面向对象编程

本文主要包括以下内容: 1. 原型与原型链 - 解释JavaScript基于原型的继承机制 2. 继承实现方式 - 介绍各种实现继承的方法 3. ES6 class语法 - 介绍ES6引入的类语法 4. 对象属性描述符 - 解释属性描述符的概念和用法 5. 设计模式在JavaScript中的应用 6. 面向对象vs函数式编程

但行好事,莫问前程;不忘初心,方得始终! 1250

JS(四)--JavaScript 面向对象编程

JavaScript 面向对象编程一、JavaScript 面向对象编程1.1.、什么是面向对象编程1.2、面向过程和面向对象的对比1.3、JavaScript 中的对象?1.3.1、属性和方法是什么?二、面向对象编程案例三、JS面向对象的特征3.1、**封装性**3.2、**继承性** 一、JavaScript 面向对象编程 1.1.、什么是面向对象编程 面向对象是一种解决问题的思路,一种编程思...

-_^汪洸*的博客 695

[JavaScript] 面向对象编程

通过类与对象的概念,可以更好地模拟现实世界的实体,提升代码的可重用性、可维护性和扩展性。JavaScript面向对象编程非常灵活,类的引入让代码更加清晰和直观。多态是指不同的类在调用相同方法时,可以表现出不同的行为。静态方法是直接定义在类上的方法,而不是在实例上的方法。在 JavaScript 早期,使用函数和原型链实现面向对象的思想,语法复杂且容易出错。继承允许我们定义一个类,继承另一个类的属性和方法,从而实现代码复用。是用来定义对象蓝图的关键字,其中包含对象的属性和方法。调用父类的构造函数。

kevin_blog 1934

JS(JavaScript)中的面向对象编程——详细总结(附源码)

文章目录一,什么是面向对象二,JS面向对象的几种特征以及类和对象1,面向对象的几种特征2,面向对象中的类和对象三,JS中默认存在的类(常见的)1,Number类2,String类3,Boolean构造器(JS中构造器也叫类)4,Object构造器(存在语法糖)5,Data类6,Math类(不需要new)7,Array类四,JS中的对象1,证明:JS中的一切数据都是对象2,对象是属性的无序集合3,对象属性的增删改查(1)对象属性的遍历(for in)(2)对象属性的增删改4,对象中属性的四大特征(1)conf

qq_44830054的博客 1336

JS面向对象编程

面向对象编程思想 面向对象编程是一种编程思想,这种思想有几个主要的特性,分别体现在以下四方面: 抽象:提取现实世界中某事物的关键特性,为该事物构建模型的过程。对同一事物在不同的需求下,需要提取的特性可能不一样。得到的抽象模型中一般包含:属性(数据)和操作(行为)。这个抽象模型我们称之为类。对类进行实例化得到对象。 封装:封装可以使类具有独立性和隔离性;保证类的高内聚。只暴露给类外部或者子类必须的...

阳光下的冷静的博客 2164

JavaScript高级:js中面向对象编程

JavaScript高级:js中面向对象编程:1 引言;2 封装性;3 原型;4 数组扩展案例--> 求和 和 最大值;5 原型对象中的constructor属性;6 对象原型;7 对象原型中的constructor属性;8 上述总结;9 原型继承;10 原型链

xiaoxie_life_study 1350

JavaScript】JS高级-面向对象编程

《课前补充》 面向对象编程:Object Oriented Programming 一、单例设计模式 (Singleton Pattern) 1、单例模式(就是普通对象) 表现形式: 在单例模式中,person1不仅仅是对象名,它被称为“命名空间[NameSpace]”(给堆内存空间起个名字),把描述事务的属性存放到命名空间,多个命名空间是独立分开的,互不冲突。 var person1 = { name:"", xxx:xxx } 作用: 把描述同一件事务的属性和特征进行“分组、归类”(存储在同一堆

zhangankang的博客 310

面向对象Javascript编程(JS数据结构)

对于这篇文章的题目,不知道大家能否理解,也不知道这样表述是否得当,那我先解释一下。在面向对象编程语言中,诸如Java,C++等,我们把变量和方法封装在一个类中,之后能new出个对象,然后通过对象调用方法。今天我们用JS来实现一下这个功能。感觉表述的还是不清楚,直接上代码吧。PS

凌晨四点的Hello World 2228

什么是前端开发JavaScript面向对象编程

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...

x1037490413的博客 577

如何构建健壮的JavaScript代码:JS Raccoon的面向对象编程教程

JavaScript开发中,面向对象编程(OOP)是构建健壮、可维护代码的核心技术之一。JS Raccoon项目提供了丰富的面向对象编程指南,帮助开发者理解从基础概念到实战应用的完整流程。本文将通过JS Raccoon的教程,带你掌握JavaScript面向对象编程的精髓,创建更加模块化和可扩展的代码结构。 ## 理解JavaScript中的数据类型:基础中的基础 🧱 JavaScript

gitblog_00558的博客 642

JavaScript面向对象编程

继承是指一个对象(或类)可以获取另一个对象(或类)的属性和方法。子类(派生类)继承父类(基类)的特性,并可以扩展或修改这些特性。继承的目的是代码复用和建立对象之间的层次关系。

kelong的博客 1459

JavaScript面向对象编程:从原型到class,跟着加菲猫吃透 JS 面向对象

JavaScript面向对象基于原型而非类,从构造函数、原型链到组合继承,再到 ES6 的 class 语法糖,核心始终是“委托”机制。本文以加菲猫为例,深入浅出讲解 this 指向、call/apply 继承、原型查找、hasOwnProperty 安全使用等关键概念,并揭示 class 背后的原型本质,助你彻底吃透 JS OOP。

2302_80706750的博客 771

JS的面向对象编程

这里是修真院前端小课堂,每篇分享文从背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能。 本篇分享的是:【JS的面向对象编程 】 大家好,我是IT修真院一枚正直纯洁善良的web前端程序员 今天给大家分享一下官网js任务4深度思考中的知识点——JS的面向对象编程? 1.背景介绍 什么是面向对象编程? “面向对象编程...

IT修真院:初学者转行到互联网的聚集地 299

js面向对象编程

前端经典面试题js面向对象 1、什么是面向对象 面向对象就是用函数来封装一些特定的属性和方法,用来使用 2、使用方法 1)创建函数 function animal(cat,dog) { this.cat = cat; this.dog = dog; console.log(cat,dog); console.log...

cp3___的博客 567
上一篇: [转贴]JavaScript的Prototype实现
下一篇: [转贴]再论面向对象的Javascript编程
laily
博客等级 码龄24年 19粉丝 40原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值