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中，将会加入对OOP的支持，届时，我们将看到class关键字，public、private访问控制符～extend继承。如果大家对下一代Javascript感兴趣，不妨可以先接触一下ActionScript3.0，这是一门相当先进的脚本语言，是Adobe收购Macromedia后的一个力作，它和Javascript一样，都属于ECMAScript，只不过AS3.0是ECMAScript的第4版的实现。要学习ActionScript3.0，我重点推荐孙颖老师的《ActionScript3殿堂之路》，这本书写的绝对好，特别是面向对象这部分，写的特别通俗易懂，例子生动，读完以后感觉很有收获，在赞叹新版的ECMAScript的同时，也给了我极大的动力继续深入学习OOP编程思想，有兴趣的读者不妨去品读一下～

Ferris
http://www.cnitblog.com/CoffeeCat/archive/2008/02/25/40138.html

转载于:https://www.cnblogs.com/deng02/archive/2009/12/08/1619631.html

Javascript中的类实现相关推荐

Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
javascript中实例方法与类方法的区别
在javascript中,类有静态属性和实例属性之分,也有静态方法和实例方法之分类属性(静态属性):通过类直接访问,不需要声明类的实例来访问类方法(静态方法):通过类直接访问,不需要声明类的实例来 ...
[推荐]在JavaScript中实现命名空间
注:好久没写了,今天把我在公司内网写的文章拷一份,出来露露脸,刚转Web开发,所以开始学javascript! 在引入命名空间之前,一个令开发人员头疼的问题就是如何防止函数名/类名和其他人的冲突,在一 ...
在JavaScript中使用“原型”还是“ this”？
之间有什么区别 var A = function () {this.x = function () {//do something}; }; 和 var A = function () { }; A. ...
如何理解并学习javascript中的面向对象（OOP）
本文不适合javascript初学者看(javascript水平还停留在函数级别的朋友,看了会觉得很晕的).如果你想让你的javascript代码变得更加优美,性能更加卓越.或者,你想像jQuery的 ...
现代JavaScript中的精美图案：制冰厂
I've been working with JavaScript on and off since the late nineties. I didn't really like it at fir ...
转载：javascript中定义兑现改的5种方式
本文转载自: http://www.phpfuns.com/scripts/javascript/five-method-define-javascript-object.shtml JavaScri ...
JavaScript面向对象：类、方法、属性
JavaScript是一种基于对象的语言,与传统面向对象语言(C#.C++)相比,JavaScript中没有类的概念,其继承有两种基本形式:基于对象的继承和基于类型的继承(原型链继承).无论哪种形式的 ...
html5学习笔记---05.JavaScript 中的面向对象,继承和封装
05.JavaScript 中的面向对象 a.创梦技术qq交流群:CreDream:251572072 a.JavaScript 是一种基于对象的语言类:JavaScript 对象很抽象,所以下 ...

Javascript中的类实现

Javascript中的类实现相关推荐

最新文章

热门文章