05 定义类或对象

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了05 定义类或对象相关的知识，希望对你有一定的参考价值。

ECMAScript 定义类或对象

 

  
 
ECMAScript 拥有很多创建基类的方法。
（就是说，可以任意的创建类似其他语言的“类”的概念。来创造不同模具，来形成模型。实例，就是我们所谓的模型）
 
 

一：原始方式（魔芋：最简单的方式。缺点：无法创建多个实例。此时，对象无法作为模具。）

因为对象的属性和方法可以在对象创建后动态定义，可以编写下面的代码：

（魔芋：创建一个对象后，可以任意在很多位置给它添加属性和方法。）

  1. var Car=newObject;
  2. Car.color ="blue";
  3. Car.doors =4;
  4. Car.mpg =25;
  5. Car.showColor = function(){
  6. console.log(this.color);
  7. };
  8. Car.showColor();//blue
  9.  
  10. Car.changeColor = function(e){
  11. console.log(e);
  12. }
  13. Car.changeColor("red");//red
 

 

 

在上面的代码中，创建对象 car。然后给它设置几个属性：它的颜色是蓝色，有四个门，每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针，意味着该属性是个方法。执行这段代码后，就可以使用对象 car。
缺点：可能需要创建多个 car 的实例。

二：解决方案：工厂方式（魔芋注：可以创建多个实例，所有实例拥有同样的属性。可以有不同的属性值（传参）。缺点：但是每次都重新创建了方法。在工厂函数外建立方法，解决”重复创建方法“问题，又会导致没有封装，不是一个整体。）

要解决该问题，开发者创造了能创建并返回特定类型的对象的工厂函数（factory function）。

例如，函数 createCar() 可用于封装前面列出的创建 car 对象的操作：

  1. function createCar() {
  2.   var oTempCar = new Object;
  3.   oTempCar.color = "blue";
  4.   oTempCar.doors = 4;
  5.   oTempCar.mpg = 25;
  6.   oTempCar.showColor = function() {
  7.     alert(this.color);
  8.   };
  9.   return oTempCar;
  10. }
  11.  
  12. var oCar1 = createCar();
  13. var oCar2 = createCar();
 

（魔芋：因为createCar 有返回值：返回我们在函数中创建的局部变量oTempCar。所以oCar1 为oTempCar ;）

 

在这里，第一个例子中的所有代码都包含在 createCar() 函数中。此外，还有一行额外的代码，返回 car 对象（oTempCar）作为函数值。调用此函数，将创建新对象，并赋予它所有必要的属性，复制出一个我们在前面说明过的 car 对象。因此，通过这种方法，我们可以很容易地创建 car 对象的两个版本（oCar1 和 oCar2），它们的属性完全一样。

为函数传递参数

我们还可以修改 createCar() 函数，给它传递各个属性的默认值，而不是简单地赋予属性默认值：

  1. function createCar(sColor,iDoors,iMpg) {
  2.   var oTempCar = new Object;
  3.   oTempCar.color = sColor;
  4.   oTempCar.doors = iDoors;
  5.   oTempCar.mpg = iMpg;
  6.   oTempCar.showColor = function() {
  7.     alert(this.color);
  8.   };
  9.   return oTempCar;
  10. }
  11.  
  12. var oCar1 = createCar("red",4,23);
  13. var oCar2 = createCar("blue",3,25);
  14.  
  15. oCar1.showColor();//输出 "red"
  16. oCar2.showColor();//输出 "blue"
 
 

 

给 createCar() 函数加上参数，即可为要创建的 car 对象的 color、doors 和 mpg 属性赋值。这使两个对象具有相同的属性，却有不同的属性值。

在工厂函数外定义对象的方法

        虽然 ECMAScript 越来越正式化，但创建对象的方法却被置之不理，且其规范化至今还遭人反对。一部分是语义上的原因（它看起来不像使用带有构造函数 new 运算符那么正规），一部分是功能上的原因。
        功能原因在于用这种方式必须创建对象。前面的例子中，每次调用函数 createCar()，都要创建新函数 showColor()，意味着每个对象都有自己的 showColor() 版本。而事实上，每个对象都共享同一个函数。
        有些开发者在工厂函数外定义对象的方法，然后通过属性指向该方法，从而避免这个问题：(魔芋：函数名实质上是一个指针。)
  1. function showColor() {
  2.   alert(this.color);
  3. }
  4.  
  5. function createCar(sColor,iDoors,iMpg) {
  6.   var oTempCar = new Object;
  7.   oTempCar.color = sColor;
  8.   oTempCar.doors = iDoors;
  9.   oTempCar.mpg = iMpg;
  10.   oTempCar.showColor = showColor;
  11.   return oTempCar;
  12. }
  13.  
  14. var oCar1 = createCar("red",4,23);
  15. var oCar2 = createCar("blue",3,25);
  16.  
  17. oCar1.showColor();//输出 "red"
  18. oCar2.showColor();//输出 "blue"
 
 

 

在上面这段重写的代码中，在函数 createCar() 之前定义了函数 showColor()。在 createCar() 内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。
 

所有这些问题都引发了开发者定义的构造函数的出现。

 

三：构造函数方式（类似工厂模型）（和工厂方式的缺点一模一样。）

创建构造函数就像创建工厂函数一样容易。第一步选择类名，即构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂函数。请考虑下面的例子：
  1. function Car(sColor,iDoors,iMpg) {
  2.   this.color = sColor;
  3.   this.doors = iDoors;
  4.   this.mpg = iMpg;
  5.   this.showColor = function() {
  6.     alert(this.color);
  7.   };
  8. }
  9.  
  10. var oCar1 = new Car("red",4,23);
  11. var oCar2 = new Car("blue",3,25);