Javascript oop深入学习笔记（三）--javascript中类的实现

一、类的实现机制

　　在javascript中可以使用function关键字来定义一个类。在函数内通过this指针引用的变量或则方法都会成为类的成员。

 function classDemo(){ 
       var $testProperty = "xz1024";
       this.property = $testProperty;
       this.method = function(){
            return "this is a test method";
            }
        }
var $obj = new classDemo();
document.write($obj.property+"<br />");
document.write($obj.method());

　　在javascript中，function本身定义就是累的构造函数，来看看使用new创建对象的过程

　　1、当解释器遇到new操作符时边创建一个空对象。

　　2、开始运行classDemo这个函数，并将其中的this指针都指向这个新建的对象。

　　3、因为当给对象不存在的属性赋值时，解释器就会为对象创建该属性。

　　4、当函数执行完后，new操作符就返回初始化后的对象。

　　通过整个过程，javascript实现了一个简单的面向对象的机制。由此可见，在javacript中，function的定义实际上就是实现一个对象的构造器，是通过函数来完成的。当然，这种方式的缺点也很明显：

　　1、讲所有初始化语句、成员定义都放到一起，代码逻辑不侵袭，不易实现复杂功能。

　　2、每创建一个类的实例，都要执行一次构造函数，构造函数中定义的属性和方法总是被重复创建。

　　另一种定义机制，prototype对象，可以解决构造函数中定义类成员带来得缺点。

二、使用prototype对象定义类成员

　　当new一个function时，该对象的成员将自动赋予所创建的对象。

<script>
        //定义一个只有一个属性testProp的类
        function testClass(){       
            this.testProp = 1;
        }
        //使用函数的prototype属性给类定义新成员
        testClass.prototype.showProp = function(){
            document.write(this.testProp);
        }
        //创建一个实例
        var $obj = new testClass();
        //调用通过prototype原型对象定义的showProp方法
        $obj.showProp();
</script>

　　prototype是一个javascript对象，可以为prototype对象添加、修改、删除方法和属性，从而为一个类添加成员定义。

　　需要注意的，原型对象的定义必须在创建类实例的语句之前，否则它将不会起作用。

　　prototype对象专用户设计类成员，它是和一个类紧密相关的。prototype还有一个重要属性：constructor，表示对该构造函数的引用。

<script>
         function testClass(){
             alert('xz1024.com');
         }
        //调用类的构造函数
        testClass.prototype.constructor();
</script>

　　

三、优化javascript类的设计模式

　　使用无类型对象的构造方法来指定prototype对象，从而实现类的成员定义：

<script>
      function Person(){
           console.log('这里可以做一些初始化工作..');
            /*this.personName = "xz";
            this.personAge = 20;*/
        }
        Person.prototype ={
            personName : "tiger",
            personAge : 18,
            showInfo : function(){
            document.write(this.personName + "," + this.personAge );
        }
        };

        var $p = new Person();
        $p.showInfo();
</script>

　　

四、JS中的共有成员、私有成员和静态成员

　　私有成员即在类的内部实现中可以共享成员，不对外公开。Javascript并没有特殊的机制来定义私有成员，但是在JS中，一个函数内部定义的变量陈志伟局部变量，该变量不能够被此函数外的程序访问，却可以被函数内部定义的嵌套函数所访问，在JS中实现私有成员的过程中，正是利用了这一性质。

　　在内的构造函数中可以为类添加成员，通过这种方式定义的类成员，实际上共享了再构造函数内部定义的局部变量，这个变量就可以看作类的私有成员。

 <script>
         function testClass(){
             var $prop = 'this is a private property';  //私有属性成员$prop
             function  propMethod(){    //私有方法成员propMethod
                 document.write($prop);
             }
             this.methodOne = function(){
                 //在公有成员中改变私有属性的值
                 $prop = '$prop has been changed';
             };
             this.methodTwo = function(){
                 propMethod();  //在共有成员中调用私有方法
             }
         }

        var $obj = new testClass();
        $obj.methodOne();   //调用公有方法methodOne
        $obj.methodTwo();   //调用公有方法methodTwo
 </script>

 五、Javascript类的静态成员

　　静态成员属于一个类的成员，它可以通过“类名.静态成员名”的方式访问。在javascript中，可以给一个函数对象直接添加成员来实现静态成员，因为函数也是一个对象，所以对象的相关操作，对函数同样适用。

<script>
    function classDemo(){ //构造函数
    }
    classDemo.staticProperty = 'sample';
    classDemo.staticMethod = function(){
        document.write(classDemo.staticProperty);
    }
    //调用静态方法
     classDemo.staticMethod();
</script>