浅谈JavaScript实现面向对象中的类


Posted in Javascript onDecember 09, 2014

对象,是人们要进行研究的任何事物,从最简单的整数到复杂的飞机等均可看作对象,它不仅能表示具体的事物,还能表示抽象的规则、计划或事件。--引自百度百科

面向对象编程,是当前最流行的编程模式。但令人沮丧的是,作为前端应用最为广泛的javascript,并不支持面向对象。

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

定义类并创建类的实例对象

在Javascript中,我们用function来定义类,如下:

function Shape()

{

    var x=1;

    var y=2;

}

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

然后,我们可以创建Shape类的对象aShape,如下:

var aShape = new Shape();

定义公有属性和私有属性

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

aShape.x=1; 

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

function Shape()

{

    this.x=1;

    this.y=2;

} 

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

aShape.x=2; 

好,我们可以根据上面的代码总结得到:用var可以定义类的private属性,而用this能定义类的public属性。

定义公有方法和私有方法

在Javascript中,函数是Function类的实例,Function间接继承自Object,所以,函数也是一个对象,因此,我们可 以用赋值的方法创建函数,当然,我们也可以将一个函数赋给类的一个属性变量,那么,这个属性变量就可以称为方法,因为它是一个可以执行的函数。代码如下:

function Shape()

{

    var x=0;

    var y=1;

    this.draw=function()

    {

        //print;

    };

} 

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

aShape.draw(); 

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

function Shape()

{

    var x=0;

    var y=1;

    var draw=function()

    {

        //print;

    };

} 

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

构造函数

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

function Shape()

{

    var init = function()

    {

         //构造函数代码

    };

    init();

} 

在Shape的最后,我们人为的调用了init函数,那么,在创建了一个Shape对象是,init总会被自动调用,可以模拟我们的构造函数了。

带参数的构造函数

如何让构造函数带参数呢?其实很简单,将要传入的参数写入函数的参数列表中即可,如:

function Shape(ax,ay)

{

    var x=0;

    var y=0;

    var init = function()

    {

        //构造函数

        x=ax;

        y=ay;

    };

    init();

} 

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

var aShape = new Shape(0,1); 

静态属性和静态方法

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

function Shape(ax,ay)

{

    var x=0;

    var y=0;

    var init = function()

    {

        //构造函数

        x=ax;

        y=ay;

    };

    init();

}

Shape.count=0;//定义一个静态属性count,这个属性是属于类的,不是属于对象的。

Shape.staticMethod=function(){};//定义一个静态的方法 

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

alert ( aShape.count );

aShape.staticMethod(); 

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

在方法中访问本类的公有属性和私有属性

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

function Shape(ax,ay)

{

    var x=0;

    var y=0;

    this.gx=0;

    this.gy=0;

    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 x=0;

    var y=0;

    _this.gx=0;

    _this.gy=0;

    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 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
node.js中的console.trace方法使用说明
Dec 09 #Javascript
node.js中的console.time方法使用说明
Dec 09 #Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 #Javascript
node.js中的path.basename方法使用说明
Dec 09 #Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 #Javascript
node.js中的path.delimiter方法使用说明
Dec 09 #Javascript
node.js中的path.dirname方法使用说明
Dec 09 #Javascript
You might like
用户的详细注册和判断
2006/10/09 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
javascript表单正则应用
2017/02/04 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python爬取读者并制作成PDF
2015/03/10 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python3爬虫怎样构建请求header
2018/12/23 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
网络事业创业计划书范文
2014/01/09 职场文书
运动会邀请函范文
2014/01/31 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
实习单位鉴定评语
2014/04/26 职场文书
重温入党誓词主持词
2015/06/29 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书