JavaScript 对象设计模式

一、定义类和对象:

1、工厂方式

原始的方式:创建对象,然后给它设置几个属性

函数创建对象方法:解决原始的方式每创建一个实例都需要创建一个原始的方式

函数创建对象方法传递参数:让上面的函数创建对象方法可以传递属性

函数创建对象方法传递函数方法:工厂函数外定义对象的方法,然后通过属性指向该方法

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"

2、构造函数方式

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

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

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

3、原型方式

利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型

原型方式的问题:

必须在对象创建后才能改变属性的默认值

属性指向的是对象,而不是函数时。函数共享不会造成问题,但对象却很少被多个实例共享(对象改变大家都改变)

混合的构造函数/原型方式(解决原型方式问题)

动态原型方法

混合工厂方式

二、常用的方法

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

用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。

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 运算符来判断对象的类型。

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

猜你喜欢

转载自blog.csdn.net/weixin_40778860/article/details/84499498