浅谈 JS 创建对象的 8 种模式

439 查看

Objct 模式
工厂模式
构造器模式
通过 Function 对象实现
prototype 模式
构造器与原型方式的混合模式
动态原型模式
混合工厂模式

1.Object 模式

var o1 = {};//字面量的表现形式

var o2 = new Object;

var o3 = new Object();

var o4 = new Object(null);

var o5 = new Object(undefined);

var o6 = Object.create(Object.prototype);//等价于 var o = {};//即以 Object.prototype 对象为一个原型模板,新建一个以这个原型模板为原型的对象

//区别

var o7 = Object.create(null);//创建一个原型为 null 的对象

在 chrome 里查看各个新建对象的区别:
图片描述

可以看出前6种模式创建出来的对象都是一样的,第七种不同点在于其虽然也为 Object 对象但其无任何属性(包括没有任何可以继承的属性,因为创建的时候没有指定其原型)

2.工厂模式

//工厂方法1 通过一个方法来创建对象利用 arguments 对象获取参数设置属性(参数不直观,容易出现问题)

function createCar(){

var oTemp = new Object();

oTemp.name = arguments[0];//直接给对象添加属性，每个对象都有直接的属性

oTemp.age = arguments[1];

oTemp.showName = function () {

alert(this.name);

};//每个对象都有一个 showName 方法版本

return oTemp;

}

createCar("tom").showName();//在 JS 中没有传递的实参,实际形参值为 undefined(这里的 age 为 undefined)

createCar("tim",80).showName();

alert(createCar("tom") instanceof Object);//true 判断对象是否 Object 类或子类

//工厂方法2 通过传参设置属性(参数直观明了)

function createCar(name,age){

var oTemp = new Object();

oTemp.name = name;//直接给对象添加属性，每个对象都有直接的属性

oTemp.age = age;

oTemp.showName = function () {

alert(this.name);

};//每个对象都有一个 showName 方法版本

return oTemp;

}

createCar("tom").showName();

createCar("tim",80).showName();

alert(createCar("tom") instanceof Object);//true 判断对象是否 Object 类或子类

3.构造器模式

//构造器方法1

function Car(sColor,iDoors){ //声明为构造器时需要将函数名首字母大写

this.color = sColor; //构造器内直接声明属性

this.doors = iDoors;

this.showColor = function(){

return this.color;

};//每个 Car 对象都有自己的 showColor方法版本

this.showDoor = function () {

return this.doors;

}

使用方法1的问题很明显,没办法是 showDoor 方法重用,每次新建一个对象就要在堆里新开辟一篇空间.改进如下

//工厂方法2 通过传参设置属性(参数直观明了)

function createCar(name,age){

var oTemp = new Object();

oTemp.name = name;//直接给对象添加属性，每个对象都有直接的属性

oTemp.age = age;

oTemp.showName = function () {

alert(this.name);

};//每个对象都有一个 showName 方法版本

return oTemp;

}

createCar("tom").showName();

createCar("tim",80).showName();

alert(createCar("tom") instanceof Object);//true 判断对象是否 Object 类或子类

3.构造器模式

//构造器方法1

function Car(sColor,iDoors){ //声明为构造器时需要将函数名首字母大写

this.color = sColor; //构造器内直接声明属性

this.doors = iDoors;

this.showColor = function(){

return this.color;

};//每个 Car 对象都有自己的 showColor方法版本

this.showDoor = function () {

return this.doors;

}

使用方法1的问题很明显,没办法是 showDoor 方法重用,每次新建一个对象就要在堆里新开辟一篇空间.改进如下

//构造器方法2

function showDoor(){ //定义一个全局的 Function 对象

return this.doors;

}

function Car(sColor,iDoors){//构造器

this.color = sColor; //构造器内直接声明属性

this.doors = iDoors;

this.showColor = function(){

return this.color;

};

this.showDoor = showDoor