轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(二)

最新推荐文章于 2022-05-30 14:05:20 发布

转载最新推荐文章于 2022-05-30 14:05:20 发布 · 352 阅读

HTML+Javascript+CSS 专栏收录该内容

119 篇文章

订阅专栏

四原型方式

我们创建的每个函数都有一个通过prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型

的所有实例共享的属性和方法。逻辑上可以这么理解：prototypt通过条用构造函数而创建的那个对象的原型对象。使

用原型的好处就是可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而

是直接将这些信息添加到原型中。

原型方式利用了对象的prototype 属性，可以把它看成创建新对象所依赖的原型。这里，首先用空构造函数来设置

函数名。然后所有的属性和方法都被直接赋予prototype属性。我重写了前面的例子，代码如下：

[javascript]view plaincopyprint? 
   
 function Car() { };  
 //将所有的属性的方法都赋予prototype属性  
 Car.prototype.color = "blue";  
 Car.prototype.doors = 4;  
 Car.prototype.mpg = 25;  
 Car.prototype.showColor = function() {  
      return this.color;  
 };  
 var Car1 = new Car();  
 var Car2 = new Car();  
 document.write(Car1.showColor()+"<br/>");//输出：blue  
 document.write(Car2.showColor());//输出：blue  

在这段代码中，首先定义构造函数Car()，其中无任何代码。接下来的几行代码，通过给Car的 prototype 属性添加

属性去定义Car对象的属性。调用new Car()时，原型的所有属性都被立即赋予要创建的对象，意味着所有Car实例存

放的都是指向 showColor() 函数的指针。从语义上讲，所有属性看起来都属于一个对象，因此解决了前面的工厂方式

和构造函数方式存在的问题。

此外，使用这种方式，还能用 instanceof 运算符检查给定变量指向的对象的类型：

[javascript]view plaincopyprint? 
   
 <span style="font-size:18px;">document.write(Car1 instanceof Car);    //输出：true</span>  

原型方式看起来是个不错的解决方案。遗憾的是，它并不尽如人意。首先，这个构造函数没有参数。使用原型方

式，不能通过给构造函数传递参数来初始化属性的值，因为Car1和Car2的color属性都等于 "blue"，doors属性都等于

4，mpg属性都等于25。这意味着必须在对象创建后才能改变属性的默认值，这点很令人讨厌，但还没完。真正的问

题出现在属性指向的是对象，而不是函数时。函数共享不会造成问题，但对象却很少被多个实例共享。请思考下面的

例子：

[javascript]view plaincopyprint? 
   
 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() {  
       return this.color;  
 };  
 var Car1 = new Car();  
 var Car2 = new Car();  
 Car1.drivers.push("Bill");  
 document.write(Car1.drivers+"<br/>");//输出：Mike,John,Bill  
 document.write(Car2.drivers);//输出 ：Mike,John,Bill  

上面的代码中，属性drivers是指向Array对象的指针，该数组中包含两个名"Mike"和 "John"。由于 drivers是引用

值，Car的两个实例都指向同一个数组。这意味着给Car1.drivers添加值 "Bill"，在 Car2.drivers 中也能看到。输出这两

个指针中的任何一个，结果都是显示字符串 "Mike,John,Bill"。由于创建对象时有这么多问题，你一定会想，是否有种

合理的创建对象的方法呢？答案是有，需要联合使用构造函数和原型方式。

五混合的构造函数/原型方式(推荐使用)

混合使用构造函数方式和原型方式，就可像用其他程序设计语言一样创建对象。这种概念非常简单，即用构造函

数定义对象的所有非函数属性，用原型方式定义对象的函数属性（方法）。结果是，所有函数都只创建一次，而每个

对象都具有自己的对象属性实例。我们重写了前面的例子，代码如下：

[html]view plaincopyprint? 
   
 function Car(Color,Doors,Mpg) {  
   this.color = Color;  
   this.doors = Doors;  
   this.mpg = Mpg;  
   this.drivers = new Array("Mike","John");  
 };  
 Car.prototype.showColor = function() {  
          return this.color;  
 };  
 var Car1 = new Car("red",4,23);  
 var Car2 = new Car("blue",3,25);  
 Car1.drivers.push("Bill");  
 document.write(Car1.drivers+"<br/>");//输出：Mike,John,Bill  
 documnet.write(Car2.drivers);//输出：Mike,John  

现在就更像创建一般对象了。所有的非函数属性都在构造函数中创建，意味着又能够用构造函数的参数赋予属性

默认值了。因为只创建showColor()函数的一个实例，所以没有内存浪费。此外，给Car1的drivers数组添加 "Bill" 值，

不会影响到Car2的数组，所以输出这些数组的值时，Car1.drivers 显示的是 "Mike,John,Bill"，而 Car2.drivers 显示的

是 "Mike,John"。因为使用了原型方式，所以仍然能利用 instanceof运算符来判断对象的类型。

这种方式是ECMAScript采用的主要方式，它具有其他方式的特性，却没有他们的副作用。不过，有些开发者仍觉

得这种方法不够完美。

六动态原型方式

对于习惯使用其他语言的开发者来说，使用混合的构造函数/原型方式感觉不那么和谐。毕竟，定义类时，大多数

面向对象语言都对属性和方法进行了视觉上的封装。请考虑下面的 Java 类：

[java]view plaincopyprint? 
   
 class Car {  
   public String color = "blue";  
   public int doors = 4;  
   public int mpg = 25;  
   public Car(String color, int doors, int mpg) {  
       this.color = color;  
       this.doors = doors;  
       this.mpg = mpg;  
   }  
   public void showColor() {  
       System.out.println(color);  
   }  
 }  

Java很好地打包了Car类的所有属性和方法，因此看见这段代码就知道它要实现什么功能，它定义了一个对象的

信息。批评混合的构造函数/原型方式的人认为，在构造函数内部找属性，在其外部找方法的做法不合逻辑。因此，他

们设计了动态原型方法，以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用

原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car：

[javascript]view plaincopyprint? 
   
 function Car(Color,Doors,Mpg) {  
   this.color = Color;  
   this.doors = Doors;  
   this.mpg = Mpg;  
   this.drivers = new Array("Mike","John");  
   //如果Car对象中的_initialized为undefined，表明还没有为Car的原型添加方法  
   if (typeof Car._initialized == "undefined") {  
          Car.prototype.showColor = function() {  
                 return this.color;  
          };   
          Car._initialized = true; //设置为true，不必再为prototype添加方法  
   }  
 }  
 var Car1 = new Car("red",4,23);//生成一个Car对象  
 var Car2 = new Car("blue",3,25);  
 Car1.drivers.push("Bill");//向Car1对象实例的drivers属性添加一个元素  
 document.write(Car1.drivers+"<br/>");//输出：Mike,John,Bill  
 document.write(Car2.drivers);//输出：Mike,John  