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的Map类

  • 2014年10月14日 20:57
  • 2KB
  • 下载

怎样用Javascript定义一个"类"

Javascript是木有class一说的,可是写惯了Java的童鞋们转过来写Javascript的时候,咋办呢,既然Javascript是面向对象的,那么总得有OOP的办法吧!废话少说,开动! 1...

javascript高级程序设计学习(三)-----定义类

面向对象术语 对象 ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值、对象或函数”。严格来说,这意味着对象是无特定顺序的值的数组。 尽管 E...

JavaScript面向对象编程(2)-- 类的定义

javascript面向对象编程(2)-- 类的定义 2008-05-29 11:05 by johnson2008, 6196 visits, 收藏, 编辑 最近这一段时间事情太多了...

JavaScript之定义类或对象六种方式

1、工厂方式      //类的定义     function createCar(){                  var oTempCar = new Object;        ...

理解Javascript中类的定义

关于如何在Javascript中定义类,网上可以找到不少的文章。在开始讲之前,还是先来看看定义类的两种基本方式吧: (1) 利用函数构造类型。 function Foo(text, url) ...
  • Yelbosh
  • Yelbosh
  • 2012年06月27日 15:45
  • 344

javascript中自定义类(1)

javascript中自定义类 //定义Person类 function Person() { } //创建对象 var p = new...

Javascript定义类(class)的三种方法

转载地址: http://blog.jobbole.com/23563/ 将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言。如果你忘了填写用户名,它就跳出一个警告。 ...

JavaScript定义类和对象

在JS中,类/对象有多种不同的写法,因为本人对JS也不怎么熟,所以就本人的理解来写,如果哪位朋友发现有不对,请告之,共同学习. JS定义一个类有两种定法(我只知道这两种): 1.定义函数的方式: ...

javaScript定义类或者对象

目录 (Table of Contents)[TOCM]工厂方式 构造函数方式 原型方式 混合的构造函数原型方式最常用 动态原型方法合理可用 混合工厂方式工厂方式通过创建能返回特定类型的对象的工厂函数...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript定义类
举报原因:
原因补充:

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