zoukankan      html  css  js  c++  java
  • 定义类或对象

    学习总结:

    工厂方式

    原始的方式(对象创建后动态定义对象的属性)

    var oCar = new Object;
    oCar.color = "blue";
    oCar.doors = 4;
    oCar.mpg = 25;
    oCar.showColor = function() {
      alert(this.color);
    };
    



    创建对象 car,属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。
    有一个问题,就是可能需要创建多个 car 的实例。

    解决方案:工厂方式(函数封装)

    function createCar(sColor,iDoors,iMpg) {
      var oTempCar = new Object;
      oTempCar.color = sColor;
      oTempCar.doors = iDoors;
      oTempCar.mpg = iMpg;
      oTempCar.showColor = function() {
        alert(this.color);
      };
      return oTempCar;
    }
    
    var oCar1 = createCar("red",4,23);
    var oCar2 = createCar("blue",3,25);
    
    oCar1.showColor();		//输出 "red"
    oCar2.showColor();		//输出 "blue"
    



    这使两个对象具有相同的属性,却有不同的属性值。
    每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。

    在工厂函数外定义对象的方法 可避免以上问题

    function showColor() {
      alert(this.color);
    }
    
    function createCar(sColor,iDoors,iMpg) {
      var oTempCar = new Object;
      oTempCar.color = sColor;
      oTempCar.doors = iDoors;
      oTempCar.mpg = iMpg;
      oTempCar.showColor = showColor;
      return oTempCar;
    }
    
    var oCar1 = createCar("red",4,23);
    var oCar2 = createCar("blue",3,25);
    
    oCar1.showColor();		//输出 "red"
    oCar2.showColor();		//输出 "blue"
    



    从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。

    构造函数方式

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.showColor = function() {
        alert(this.color);
      };
    }
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);
    



    第一步选择类名,即构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂函数。

    与工厂方式的差别:
    首先在构造函数内没有创建对象,而是使用 this 关键字。
    使用 new 运算符构造函数时,在执行第一行代码前先创建一个对象,只有用 this 才能访问该对象。
    然后可以直接赋予 this 属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。

    现在,用 new 运算符和类名 Car 创建对象,就更像 ECMAScript 中一般对象的创建方式了。
    就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。
    不过,与工厂函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。

    原型方式

    function Car() {
    }
    
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car();
    var oCar2 = new Car();
    



    该方式利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型。
    这里,首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。

    在这段代码中,首先定义构造函数(Car),其中无任何代码。
    接下来的几行代码,通过给 Car 的 prototype 属性添加属性去定义 Car 对象的属性。
    调用 new Car() 时,原型的所有属性都被立即赋予要创建的对象,意味着所有 Car 实例存放的都是指向 showColor() 函数的指针。
    从语义上讲,所有属性看起来都属于一个对象,因此解决了前面两种方式存在的问题。
    此外,使用这种方式,还能用 instanceof 运算符检查给定变量指向的对象的类型。

    alert(oCar1 instanceof Car);	//输出 "true"
    



    原型方式的问题
    这个构造函数没有参数。
    使用原型方式,不能通过给构造函数传递参数来初始化属性的值,因为 Car1 和 Car2 的 color 属性都等于 "blue",doors 属性都等于 4,mpg 属性都等于 25。
    这意味着必须在对象创建后才能改变属性的默认值,真正的问题出现在属性指向的是对象,而不是函数时。
    函数共享不会造成问题,但对象却很少被多个实例共享。

    function Car() {
    }
    
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.drivers = new Array("Mike","John");
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car();
    var oCar2 = new Car();
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);	//输出 "Mike,John,Bill"
    



    属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 "Mike" 和 "John"。
    由于 drivers 是引用值,Car 的两个实例都指向同一个数组。
    这意味着给 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。
    输出这两个指针中的任何一个,结果都是显示字符串 "Mike,John,Bill"。
    由于创建对象时有这么多问题,需要联合使用构造函数和原型方式。

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

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
    }
    
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);	//输出 "Mike,John"
    



    联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。
    这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。
    结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。

    现在就更像创建一般对象了。
    所有的非函数属性都在构造函数中创建,意味着又能够用构造函数的参数赋予属性默认值了。
    因为只创建 showColor() 函数的一个实例,所以没有内存浪费。
    此外,给 oCar1 的 drivers 数组添加 "Bill" 值,不会影响到 oCar2 的数组,所以输出这些数组的值时,oCar1.drivers 显示的是 "Mike,John,Bill",而 oCar2.drivers 显示的是 "Mike,John"。
    因为使用了原型方式,所以仍然能利用 instanceof 运算符来判断对象的类型。

    动态原型方法

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
      
      if (typeof Car._initialized == "undefined") {
        Car.prototype.showColor = function() {
          alert(this.color);
        };
    	
        Car._initialized = true;
      }
    }
    



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

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

    混合工厂方式

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

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



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

    var car = new Car();
    



    由于在 Car() 构造函数内部调用了 new 运算符,所以将忽略第二个 new 运算符(位于构造函数之外),在构造函数内部创建的对象被传递回变量 car。
    这种方式在对象方法的内部管理方面与经典方式有着相同的问题。
    强烈建议:除非万不得已,还是避免使用这种方式。

    -------------------------------------
    如前所述,目前使用最广泛的是混合的构造函数/原型方式。
    此外,动态原始方法也很流行,在功能上与构造函数/原型方式等价。
    可以采用这两种方式中的任何一种。
    不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。

  • 相关阅读:
    什么是OOAD?什么是UML?
    Linux下Gvim 的基本操作-适合新手看
    关于mongodb ,redis,memcache之间见不乱理还乱的关系和作用
    phpcms常用标签
    请问如何更改dedecms“文件保存目录”的字符限制 ?
    如何通过刷百度指数来提高网站的权重
    HDU 1263(水果统计 **)
    HDU 1284(钱币兑换 背包/母函数)
    HDU 1028(数字拆分 分治)
    HDU 1036(平均速度 **)
  • 原文地址:https://www.cnblogs.com/hiuman/p/7347414.html
Copyright © 2011-2022 走看看