zoukankan      html  css  js  c++  java
  • JavaScript定义类的几种方式

      提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。

    1.工厂方式

        javaScript中创建自己的类和对象,我们应该是必须掌握的,我们都知道javaScript中对象的属性可以在对象创建后动态定义,比如下面的代码:

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

        我们很容易使用oCar对象,但是我们创就是想创建多个Car实例。我们可以使用一个函数来封装上面的代码来实现:<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();
        var ocar2 = createCar();
        ocar1.color = "black";
        ocar1.showColor();
        ocar2.showColor();
    </script>

        顺便说一下,javaScript对象默认成员属性都是public 的。这种方式我们称为工厂方式,我们创造了能创建并返回特定类型的对象的工厂。

        这样做有点意思了,但是在面向对象中我们经常使用创建对象的方法是:

    Car car=new Car();

        使用new 关键字已经深入人心,因此我们使用上面的方法去定义总感觉别扭,并且每次调用时都去创建新的属性以及函数,功能上也不实际。下来我们看看构造函数的形式定义类。

    2.构造函数

    这种方式看起来有点象工厂函数。具体表现如下:

    <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>

        看起来效果很明显,有差别了吧。感觉有点意思了。在构造函数内部创造对象使用this 关键字,使用new 运算符创建对象感觉非常亲切。但是也有点问题:每次new 对象时都会创建所有的属性,包括函数的创建,也就是说多个对象完全独立,我们定义类的目的就是为了共享方法以及数据,但是car1对象与car2对象都是各自独立的属性与函数,最起码我们应该共享方法。这就是原形方式的优势所在。

    3.原型方式

    利用对象的prototype属性,可把它看出创建新对象所依赖的原型。方法如下:

    <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

    //可以用json方式简化prototype的定义:

            Car.prototype =
            {
                color: "red",
                doors: 4,
                drivers: ["Tom", "Jerry",'safdad'],
                showColor: function() {
                    alert(this.color);
                }
            }</script>

        首先这段代码的构造函数,其中没有任何代码,接下来通过对象的prototype属性添加属性定义Car对象的属性。这种方法很好,但是问题是Car的对象指向的是Array指针,Car的两个对象都指向同一个Array数组,其中一个对象car1改变属性对象的引用(数组Array)时,另一个对象car2也同时改变,这是不允许的。

        同时该问题也表现在原型不能带任何初始化参数,导致构造函数无法正常初始化。这需要另一种方式来解决:那就是混合的构造函数/原型模式。

    4. 混合的构造函数/原型模式

    联合使用构造函数和原型方式,定义类就非常方便。

    <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进行定义。解决了第三种方法的问题。

        这种方法其实应该来说非常友好了,但是比起java的语法来,应该有一些不和谐,感觉比较凌乱,对C++来说,我们就没有那么麻烦的感觉了,可是开发C++的研发人员一般情况下很少涉及javaScript,而对J2EE的研发人员来说,这种方式总有一些别扭。总感觉不是友好的封装,其实只不过是视觉上封装效果不是很好而已,要想达到视觉封装效果而又能达到这种方法的效果的也可以以,个人认为其实比较麻烦。那就是动态原型法。

    5.动态原型

    对于习惯使用其他语言的开发者来说,使用混合的构造函数/原型方式感觉不那么和谐。毕竟,定义类时,大多数面向对象语言都对属性和方法进行了视觉上的封装。考虑下面的C#类:

    class Car //class
    {
        public string color = "red";
        public int doors = 4;
        public int mpg = 23;

        public Car(string color, int doors, int mpg) //constructor
        {
            this.color = color;
            this.doors = doors;
            this.mpg = mpg;
        }
        public void showColor() //method
        {
            Console.WriteLine(this.color);
        }
    }

    C#很好的打包了Car类的所有属性和方法,因此看见这段代码就知道它要实现什么功能,它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为,在构造函数内存找属性,在其外部找方法的做法不合逻辑。因此,他们设计了动态原型方法,以提供更友好的编码风格。

    动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car类:

        <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开发者,这段代码看起来更像其他语言中的类定义了。

    6  混合工厂方式


    这种方式通常是在不能应用前一种方式时的变通方法。它的目的是创建假构造函数,只返回另一种对象的新实例。这段代码看来与工厂函数非常相似:

    function Car() {
                var oTempCar = new Object();
                oTempCar.color="red";
                oTempCar.doors=4;
                oTempCar.mpg=23;
                oTempCar.showColor = function() {
                    alert(this.color);
                }
                return oTempCar;
            }

    与经典方式不同,这种方式使用new运算符,使它看起来像真正的构造函数:
    var oCar = new Car();


    由于在Car()构造函数内部调用了new运算符,所以将忽略第二个new运算符(位于构造函数之外)。在构造函数内部创建的对象被传递回变量var。这种方式在对象方法的内部管理方面与经典方式有着相同的问题。强烈建议:除非万不得已(请参阅第15章),还是避免使用这种方式。
    总结:(采用哪种方式)
    目前使用最广泛的是混合的构造函数/原型方式。此外,动态原型方法也很流行,在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。
    //ps
    //static class (1:function)
        var CarCollection = new function() {
            var _carCollection = new Array(); //global,private
            this.Add = function(objCar) {
                alert('Add');
            }
            this.Get = function(carid) {
                alert('Get');
            }
        }

    //static class (2:json)


        var Car = {
            color: 'red',
            doors: 4,
            showColor: function() { alert(this.color); }
        }
        Car.showColor();

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/avon520/archive/2009/01/17/3819751.aspx

    申明

    非源创博文中的内容均收集自网上,若有侵权之处,请及时联络,我会在第一时间内删除.再次说声抱歉!!!

    博文欢迎转载,但请给出原文连接。

  • 相关阅读:
    习题10-2 递归求阶乘和(15 分)
    在过滤器中得到模型状态信息
    理解OAuth 2.0
    asp.net mvc 控制器的依赖注入(使用Ninject)
    web.routing 学习
    深度优先和广度优先的基础应用
    数的全排
    C# 表达式树
    C#中RSA的简单使用
    select into 和insert into select
  • 原文地址:https://www.cnblogs.com/Athrun/p/1683976.html
Copyright © 2011-2022 走看看