javascript定义类和类的实现实例详解


Posted in Javascript onDecember 01, 2015

本文实例讲述了javascript定义类和类的实现。分享给大家供大家参考,具体如下:

最近在几个群上经常看到有人问在一个类里的一个 function 怎么调用 this. 定义后公开的方法。现发一篇类实现的随笔。

首先说说类,在一个类里我们会有以下的几个特征:

1. 公有方法
2. 私有方法
3. 属性
4. 私有变量
5. 析构函数

我们直接看一个例子:

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
}

这里我已把注释都写上,大家大概也会一眼就看得明白。对于少写JS的朋友,可能会觉得奇怪为什么我会定义一个_self的变量, 因为在js里,this不用对于其他的对象语言,他的解析过程与运行过程中this会改变的。这里简单说说js里this的定义,若有需要我可以开多一篇。

定义:this是包含它的函数作为方法被调用时所属的对象。
特征:this的环境可以随着函数被赋值给不同的对象而改变!

有兴趣的朋友可以网上找找资料了解一下,说回正题,这里的_self目的是为了开多一个私有的变量,把引用直接指向类的本身。

刚刚还说到一个析构函数的问题,这可以直接用代码来实现。在函数的最后直接写执行代码就OK。

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
  /***析构函数***/
  var init = function(){
    privateMethod();
  }
  init();
}

使用这个类

var c = new Class();
c.Method(); //使用方法

这样就OK了

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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 #Javascript
js跨域请求数据的3种常用的方法
Dec 01 #Javascript
jQuery插件实现多级联动菜单效果
Dec 01 #Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 #Javascript
You might like
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
python 输出一个两行字符的变量
2009/02/05 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
竞选班长演讲稿400字
2014/08/22 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL