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 >