定义类或对象 / 工厂方式、构造函数方式、原型方式、混合方式

最新推荐文章于 2022-04-07 19:15:08 发布

littleHiuman

最新推荐文章于 2022-04-07 19:15:08 发布

阅读量145

点赞数

分类专栏： javascript 学习笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/hiumanChung/article/details/84816254

版权

javascript 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

学习笔记

6 篇文章 0 订阅

订阅专栏

学习总结：

工厂方式

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

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 运算符，使它看起来像真正的构造函数：