这篇文章主要介绍了 javascript 定义类和类的实现, 结合实例形式较为详细的分析了 JavaScript 类的定义方式与相关使用技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0218/268383.html