javascript定义类

转载 2012年03月27日 11:35:35

使用javascript定义类有很多种方法,工厂方法、构造函数方式、原型方式、混合的构造函数/原型方式和动态原型方式,主要需要掌握的就是最后两种方式。前几种列举出来只是为了对比彼此之间的不足。

一、工厂方式

<script type="text/javascript">
    //定义
    function createCar() {
        var oCar = new Object();
        oCar.color = "red";
        oCar.doors = 4;
        oCar.showColor = function() {
            alert(this.color);
        }
        return oCar;
    }
    //调用
    var ocar1 = createCar(); 

 
 缺点:每次调用时都去创建新的属性以及函数

二、构造函数方式

<script type="text/javascript">
    //定义
    function Car(color, doors) {
        this.color = color;
        this.doors = doors;
        this.showColor = function() {
            alert(this.color);
        };
    }
    //调用
    var car1 = new Car("red", 4);
    var car2 = new Car("blue", 4);
    car1.showColor();
    car2.showColor();
</script> 

 缺点:多个对象完全独立,我们定义类的目的就是为了共享方法以及数据,但是car1对象与car2对象都是各自独立的属性与函数,最起码我们应该共享方法。

三、原型方式

<script type="text/javascript">
    //定义
    function Car() {
    };
    Car.prototype.color = "red";
    Car.prototype.doors = 4;
    Car.prototype.drivers = new Array("Tom", "Jerry");
    Car.prototype.showColor = function() {
        alert(this.color);
    }
    //调用:
    var car1 = new Car();
    var car2 = new Car();
    car1.showColor();
    car2.showColor();
    alert(car1.drivers);
    car1.drivers.push("stephen");
    alert(car1.drivers); //结果:Tom,Jerry,stephen
    alert(car2.drivers); //结果:Tom,Jerry,stephen
</script>

缺点:Car的对象指向的是Array指针,Car的两个对象都指向同一个Array数组,其中一个对象car1改变属性对象的引用(数组Array)时,另一个对象car2也同时改变,这是不允许的。同时该问题也表现在原型不能带任何初始化参数,导致构造函数无法正常初始化。这需要另一种方式来解决:那就是混合的构造函数/原型模式。

四、混合的构造函数/原型方式

<script type="text/javascript">
//定义
    function Car(color,doors)
   {
        this.color=color;
        this.doors=doors;
        this.drivers=new Array("Tom","Jerry");
   }

   Car.prototype.showColor=function(){
        alert(this.color);
   }
   
   //调用:
   var car1=new Car('red',4);
   var car2=new Car('blue',4);
   
   car1.showColor();
   car2.showColor();
   
   alert(car1.drivers);
   car1.drivers.push("stephen");
   alert(car1.drivers); //结果:Tom,Jerry,stephen
   alert(car2.drivers); //结果:Tom,Jerry
   alert(car1 instanceof Car);

</script>

该方法是把属性放在内部定义,把方法放在外边利用prototype进行定义。解决了第三种方法的问题。

五、动态原型方式

<script type="text/javascript">
        //定义
        function Car() {
            this.color = "red";
            this.doors = 4;
            this.drivers = new Array("Tom", "Jerry");
            if (typeof Car._initialized == "undefined") {
                Car.prototype.showColor = function() {
                    alert(this.color);
                }
                //............
            }
            //最后定义
            Car._initialized = true;
        }
    </script>

直到检查typeof Car._initialized是否等于"undefined"之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把Car._initialized设置为true。如果这个值定义了(它的值为true时,typeof的值为Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,为取悦传统的OOP开发者,这段代码看起来更像其他语言中的类定义了。

 

 

 

Javascript定义类三种方法

http://www.ibm.com/developerworks/cn/web/wa-jqplugin/#download http://www.php100.com/html/webkaif...
  • wyaspnet
  • wyaspnet
  • 2016年03月10日 16:49
  • 2289

Javascript定义类:Javascript定义类

荷兰程序员Gabor de Mooij提出了一种比Object.create()更好的新方法,他称这种方法为"极简主义法"(minimalist approach)。这也是我推荐的方法。 1 封装 ...
  • die0921
  • die0921
  • 2017年08月28日 14:46
  • 31

JS中定义类的方法

JS中定义类的方式有很多种: 1、工厂方式   function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.do...
  • sdlfx
  • sdlfx
  • 2007年10月24日 20:13
  • 41400

JavaScript类的定义和实例化

类的定义 严格的说,JavaScript 是基于对象的编程语言,而不是面向对象的编程语言。 在面向对象的编程语言中(如Java、C++、C#、PHP等),声明一个类使用 class 关键字。 例如...
  • u013485911
  • u013485911
  • 2014年01月15日 16:53
  • 306

JS 系列一: Javascript 定义类(class)的三种方法

在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象共有的属性和方法。 Javascript语言不支持“类”, 但是可以用一些变通的方法,模拟出“类”。 一...
  • feizhixuan46789
  • feizhixuan46789
  • 2016年05月21日 17:14
  • 8551

JavaScript定义类的几种方式

  提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:Professional JavaScript for Web...
  • avon520
  • avon520
  • 2009年01月17日 22:59
  • 24657

Javascript定义类

一,原始模式 var Cat = {     name : '',     color : '', getName:funtion() { return thi...
  • hxyfendou
  • hxyfendou
  • 2014年01月27日 17:13
  • 399

JavaScript 定义类

提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:Professional JavaScript for Web D...
  • k1988
  • k1988
  • 2011年06月09日 10:29
  • 483

【HTML/JS】Javascript定义类(class)的三种方法

http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 作者: 阮一峰 ...
  • CrackLibby
  • CrackLibby
  • 2017年05月23日 09:31
  • 418

javascript定义类

javascript" type="text/javascript">         var class1 = function () {             this.p = "class...
  • xuerenlv
  • xuerenlv
  • 2013年08月29日 13:49
  • 483
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript定义类
举报原因:
原因补充:

(最多只允许输入30个字)