Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象。
一:定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下:

function Shape() {
;  
;
}

你或许会说,疑?这个不是定义函数吗?没错,这个是定义函数,我们定义了一个Shape函数,并对x和y进行了初始化。不过,如果你换个角度来看,这个就是定义一个Shape类,里面有两个属性x和y,初始值分别是1和2,只不过,我们定义类的关键字是function而不是class。
然后,我们可以创建Shape类的对象aShape,如下:

var aShape =new Shape();

二:定义公有属性和私有属性 我们已经创建了aShape对象,但是,当我们试着访问它的属性时,会出错,如下:

;

这说明,用var定义的属性是私有的。我们需要使用this关键字来定义公有的属性

function Shape() {   
;
;
}

这样,我们就可以访问Shape的属性了,如。

;

好,我们可以根据上面的代码总结得到:用var可以定义类的private属性,而用this能定义类的public属性。
三:定义公有方法和私有方法
在Javascript中,函数是Function类的实例,Function间接继承自Object,所以,函数也是一个对象,因此,我们可以用赋值的方法创建函数,当然,我们也可以将一个函数赋给类的一个属性变量,那么,这个属性变量就可以称为方法,因为它是一个可以执行的函数。代码如下:

function Shape() {    
;   
;   
  this.draw=function()    
{         //print;   
};
}

我们在上面的代码中定义了一个draw,并把一个function赋给它,下面,我们就可以通过aShape调用这个函数,OOP中称为公有方法,如:

aShape.draw();

如果用var定义,那么这个draw就变成私有的了,OOP中称为私有方法,如

;     var draw=function()     {         //print;    }; }

这样就不能使用aShape.draw调用这个函数了。

三:构造函数 Javascript并不支持OOP,当然也就没有构造函数了,不过,我们可以自己模拟一个构造函数,让对象被创建时自动调用,代码如下:

function Shape() {     var init =function()     {          //构造函数代码    };
    init(); }

在Shape的最后,我们人为的调用了init函数,那么,在创建了一个Shape对象是,init总会被自动调用,可以模拟我们的构造函数了。
四:带参数的构造函数 如何让构造函数带参数呢?其实很简单,将要传入的参数写入函数的参数列表中即可,如

function Shape(ax,ay)
{
;
;
    var init =function()
    {
        //构造函数 
         x=ax;
        y=ay;     };
       init();
}

这样,我们就可以这样创建对象:

);

五:静态属性和静态方法 在Javascript中如何定义静态的属性和方法呢?如下所示

function Shape(ax,ay) {
;
;
    var init =function()
    {         //构造函数  
       x=ax;
        y=ay;     };
    init();
;//定义一个静态属性count,这个属性是属于类的,不是属于对象的。
Shape.staticMethod=function(){};//定义一个静态的方法

有了静态属性和方法,我们就可以用类名来访问它了,如下

alert ( aShape.count ); aShape.staticMethod();

注意:静态属性和方法都是公有的,目前为止,我不知道如何让静态属性和方法变成私有的~

六:在方法中访问本类的公有属性和私有属性
在类的方法中访问自己的属性,Javascript对于公有属性和私有属性的访问方法有所不同,请大家看下面的代码

function Shape(ax,ay)
{
;
;
;
;
    var init =function()
    {
        x=ax;//访问私有属性,直接写变量名即可
        y=ay;
        this.gx=ax;//访问公有属性,需要在变量名前加上this.
        this.gy=ay;
    };
    init(); }

七:this的注意事项 根据笔者的经验,类中的this并不是一直指向我们的这个对象本身的,主要原因还是因为Javascript并不是OOP语言,而且,函数和类均用function定义,当然会引起一些小问题。 this指针指错的场合一般在事件处理上面,我们想让某个对象的成员函数来响应某个事件,当事件被触发以后,系统会调用我们这个成员函数,但是,传入的this指针已经不是我们本身的对象了,当然,这时再在成员函数中调用this当然会出错了。 解决方法是我们在定义类的一开始就将this保存到一个私有的属性中,以后,我们可以用这个属性代替this。我用这个方法使用this指针相当安全,而且很是省心~ 我们修改一下代码,解决this问题。对照第六部分的代码看,你一定就明白了

function Shape(ax,ay) {
    var _this=this; //把this保存下来,以后用_this代替this,这样就不会被this弄晕了
;
;
;
;
    var init =function()  
   {  
       x=ax;//访问私有属性,直接写变量名即可 
       y=ay;
        _this.gx=ax;//访问公有属性,需要在变量名前加上this.
        _this.gy=ay;
    };
    init(); }

以上我们聊了如何在Javascript中定义类,创建类的对象,创建公有和私有的属性和方法,创建静态属性和方法,模拟构造函数,并且讨论了容易出错的this。 关于Javascript中的OOP实现就聊到这里,以上是最实用的内容,一般用Javascript定义类,创建对象用以上的代码已经足够了。当然,你还可以用mootools或prototype来定义类,创建对象。我用过mootools框架,感觉很不错,它对Javascript的类模拟就更完善了,还支持类的继承,有兴趣的读者可以去尝试一下。当然,如果使用了框架,那么在你的网页中就需要包含相关的js头文件,因此我还是希望读者能够在没有框架的情况下创建类,这样,代码效率较高,而且你也可以看到,要创建一个简单的类并不麻烦~ 在下一个版本的Javascript中,将会加入对OOP的支持,届时,我们将看到class关键字,public、private访问控制符~extend继承。如果大家对下一代Javascript感兴趣,不妨可以先接触一下ActionScript3.0,这是一门相当先进的脚本语言,是Adobe收购Macromedia后的一个力作,它和Javascript一样,都属于ECMAScript,只不过AS3.0是ECMAScript的第4版的实现。要学习ActionScript3.0,我重点推荐孙颖老师的《ActionScript3殿堂之路》,这本书写的绝对好,特别是面向对象这部分,写的特别通俗易懂,例子生动,读完以后感觉很有收获,在赞叹新版的ECMAScript的同时,也给了我极大的动力继续深入学习OOP编程思想,有兴趣的读者不妨去品读一下~

Javascript中的类实现的更多相关文章

  1. JavaScript中创建类,赋值给ajax中的data参数

    缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) d ...

  2. JavaScript中的类

          JavaScript类的相关知识 1.例子 /* 例1 */// 定义一个构造函数function Range(from, to){ this.from = from; this.to = ...

  3. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  4. 一、javascript中的类

    1.找出对象的构造器----constructor/instanceof constructor是用模版实例化对象的时候附带的一个额外属性,这个属性指向创建该对象时所使用的javascript构造函数 ...

  5. JavaScript中的类继承

    JavaScript是一个无class的面向对象语言,它使用原型继承而非类继承.这会让那些使用传统面向对象语言如C++和Java的程序员们感到困惑.正如我们所看到的,JavaScript的原型继承比类 ...

  6. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  7. 深入理解JavaScript中的类继承

    由于写本文时全部是在编辑器中边写代码边写感想的,所以,全部思想都写在代码注释里面了 // 类继承 //todo.1 extends 关键字 class Animal { constructor(nam ...

  8. 《深入理解ES6》笔记—— JavaScript中的类class(9)

    ES5中的近类结构 ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构 ...

  9. JavaScript中的类式继承和原型式继承

    最近在看<JavaScript设计模式>这本书,虽然内容比较晦涩,但是细品才发现此书内容的强大.刚看完第四章--继承,来做下笔记. 书中介绍了三种继承方式,类式继承.原型式继承和掺元类继承 ...

随机推荐

  1. MVC中url路由规则

    Routing:首先获取视图页面传过来的请求,并接受url路径中的controller和action以及参数数据,根据规则将识别出来的数据传递给某controller中的某个action方法 MapR ...

  2. 硬件——STM32 , SN74HC573锁存器

    74HC573是一款高速CMOS器件: 上图中:输出使能为:OE   锁存使能为:LE 典型电路: 上图中:PWR-AL-0,PWR-AL-1,PWR-AL-2:是单片机输出的高低电平给573 对应的 ...

  3. JSONP的使用示例(以及jquery版jsonp)超简单

    前言: 平时工作中很少跨域,很少用到jsonp,但是几乎每次面试都会被问到这个问题.很崩溃. 菜鸟教程上的jsonp教程就很好.这里做个笔记,自己捋一遍. Jsonp(JSON with Paddin ...

  4. zynq修改ramdisk文件系统

    ⑴ 挂载 Ramdisk新建目录 tmp, 并将 uramdisk.image.gz 拷贝至该目录$ cd <WORKDIR>/Filesystem$ mkdir tmp$ cp uram ...

  5. [Angular2 Router] Auxiliary Routes bit by bit

    Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...

  6. Python代码优化及技巧笔记(一)

    前言 这里是记录一些本人在开发过程中遇到的一些细节问题.与君共勉. 版权说明 著作权归作者全部.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:Coding-Naga链接:http://bl ...

  7. 手动脱KBys Packer(0.28)壳实战

    作者:Fly2015 吾爱破解培训第一课选修作业第5个练习程序.在公司的时候用郁金香OD调试该加壳程序的时候出了点问题,可是回家用吾爱破解版的OD一调试,浑身精神爽,啥问题也没有. 首先使用查壳工具对 ...

  8. Qt没有被正确安装,请运行make install问题的解决

    在网上直接下载别人编译好的Qt库,为自己使用省了不少事.但往往也会遇到些问题,其中Qt version is not properly installed,please run make instal ...

  9. vmware之linux不重启添加虚拟硬盘

    转自http://www.shangxueba.com/jingyan/1610981.html #echo "- - -" > /sys/class/scsi_host/h ...

  10. Activex调试以及m_hWnd为空 解决办法

    1. 点击[开始]->[运行] 命令:regedit.2. 定位到HKEY_LOCALMACHINE -> SOFTWARE -> Microsoft -> Internet ...