码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-08-20 00:08:03      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

一、类的实现机制

  在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 oop深入学习笔记(三)--javascript中类的实现

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!