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>

  

原文地址:https://www.cnblogs.com/xz1024/p/5788441.html