Chinaunix首页 | 论坛 | 博客
  • 博客访问: 582043
  • 博文数量: 107
  • 博客积分: 5065
  • 博客等级: 大校
  • 技术积分: 1362
  • 用 户 组: 普通用户
  • 注册时间: 2008-12-29 16:01
文章存档

2009年(84)

2008年(23)

我的朋友

分类:

2009-01-13 10:57:57

javascript 面向对象特性与编程实现

      

06 年用 javascript 写过上千行的应用,现在的项目中经常用到 javascript ,说不熟悉吧也熟悉了。说熟悉吧, javascript 的面向对象部分还是比较陌生。实际上自己没有系统学习过 javascript ,没有完整看过一本 javascript 的书。今天决定网上定两本书,一本是《 javascript 高级程序设计》《 javascript dom 编程艺术》,想着也该较系统的学习一下,项目中也要大量应用到这些了,必定下一个项目我们将采用 AJAX 。总结下自己学 ajax 时候补充的一点 javascript 知识。

 

一、 javascript 面向对象特性

 

1.       javascript 中的函数

javascript function 对象在调用过程中具有一个 arguments 属性,它是由脚本解释器创建的,这也是创建 arguments 唯一途径。 Arguments 对象可以看作是一个 Array 对象,它具有 length 属性,可以通过序号访问每一个参数。 Arguments 有个 callee 属性,可以获取到执行的 function 对象的引用。

eg

funtion f1 n

{

       if(n<=0)

{

       return 1;

}else

{

       return n*arguments.callee(n-1);// 实际同 return n*f1(n-1);

}

上例利用 callee 属性实现了匿名的递归调用。

 

2.       apply call 方法:

apply 方法和 call 方法有形似之处,两者都将函数绑定到其他对象上执行。

举例:

obj1.fun1.apply(obj2,[“test”]);

含义:是将 obj1 对象的方法 fun1 绑定到 对象 obj2 上,并使用参数 test

obj1.fun1.call(obj2,“test”);

含义同上,他们区别是在 apply 参数以 array 对象传入。而 call 是依次传入参数的。

 

3.       this with

this 在对象的方法被调用时候,指代调用该方法的对象实例。

使用 with 语句时,代码变得更加短且易读:

没有用 with 之前

x = obj.fun1(“a”);

y = obj.fun2(“b”);

with 之后,就变成:

with(obj)

{

x=fun1(“a”);

y=fun2(“b”);

}

4.       for in

javascript 中可以使用 for in 语句遍历对象中所有属性和方法。例如下面的代码就遍历了 test1 对象的属性和方法,如果是属性则输出属性值,如果是方法则执行方法。

 

for(p in t)

{

       if(typeof(t[p])==”function”)

       {

              t[p]();

       }else

       {

              alert(t[p]);

       }

}

 

二、 javascript 面向对象编程实现

 

       对比 java 中面向对象编程中继承,以及封装,多态等常见概念,进行总结。

1.       类的声明

首先来看下类的实现,前面已经使用了一种声明类的方法。

 

function test1()

{

       this.prop1 = “prop1”;

       this.prop2 =”prop2”;

       this.fun1 = function()

{

       ……

}

}

 

上面代码声明了两个公有属性,和一个方法。大家都知道类里除了公有成员还可能还有一些私有成员变量,但是 javascript 并没有提供相应的机制来定义私有成员变量,不过利用一些 javascript 的小技巧就可以实现私有成员变量。如下:

function test1 ()

{

       var prop3 = “test”;

       this.prop1 = “prop1”;

       this.prop2 =”prop2”;

       this.fun1 = function()

{

       ……

}

}

 

上面代码通过 var 关键字声明了一个局部变量 prop3 ,其作用域是 test1 类定义的内部,这样就实现了变量私有化。

       另外在 javascript 中可以通过下面的方式声明静态属性和静态方法

       < script LANGUAGE =" JavaScript " >

    function test ( n )

    {

       

    }

    test . staticProp = " static prop test!" ;

    test . staticMechod = function ()

    {

        alert ( "adfadfd" );

    }

   

    alert ( test . staticProp );

    test . staticMechod ();

 

script >

实际上没有感觉到 javascript 中静态的必要性(不像 java ),也许是我对书本理解的不够,或者是应用太少。如果有读者朋友,有不同认识,欢迎发表看法,大家交流。

 

如果要声明一个类的实例属性或方法,可以使用 javascript 中对象的 prototype 属性。例如:

test1.prototype.prop1 = “prop1”;

test1.prototype.method1 = function(){}

利用 prototype 属性,可以实现另外一种类的声明方式:

< script LANGUAGE =" JavaScript " >

    function test ()

    {}

        test . prototype =

        {

            p1 : "p1" ,

            p2 : "p2" ,

            f1 : function ()

            {

                alert ( "f1" );

            }

        }

        var te = new test ();

        te . f1 ();

script >

上面使用 {} 的方式声明了一个匿名对象,大括号内用逗号将属性与值的列表分隔开。可以看到,采用 prototype 的方式声明类,代码更加简洁明了。因此这种方式在很多 AJAX 框架中得到广泛应用。

 

2.       继承

javascript 本身并没有提供继承,那么如何实现类的继承呢?最直接大方法是复制原方法,然后在里面加入新成员。但这样做实在是落后,因为当原类变化,新继承的类还要手动变化,容易出错。而下面这种用 for in 控制的复制就不那么容易出错了。

 

function test1()

{

       for(p in test.prototype)

       {

              test1.prototype[p] = test.prototype[p];

       }

       test1.prototype.newmethod = function()

{

           alert(“newfunction”);

}

}

 

3.       多态

多态的是实现可以采用和继承类似的方法。首先定义一个抽象类,其中可以调用一些虚方法,虚方法在抽象类中没有定义,而是通过其具体实现类来实现的。

 

< script LANGUAGE =" JavaScript " >

    // 一个继承方法

    Object . extend = function ( destination , source )

    {

        for ( pro in source )

        {

            destination [ pro ] = source [ pro ];

        }

        return destination ;

    }

    // 一个基类

   

    function base (){}

    base . prototype =

    {

        f1 : function ()

        {

            this . oninit ();

        }

    }

    // 扩展1

    function test1 ()

    {

       

    }

    test1 . prototype = Object . extend (

    {

        prop : "prop" ,

        oninit : function ()

        {

            alert ( this . prop );

        }

    }, base . prototype );

    // 扩展2

    function test2 ()

    {

       

    }

    test2 . prototype = Object . extend (

    {

        prop2 : "prop2" ,

        oninit : function ()

        {

            alert ( this . prop2 );

        }

    }, base . prototype );

   

    // 测试

    var t1 = new test1 ();

    t1 . f1 ();

    var t2 = new test2 ();

    t2 . f1 ();

   

script >

阅读(1339) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~