JavaScript建立对象的7种模式

时间 2019-12-18

原文原文链接

一、工厂模式

这种模式抽象了建立具体对象的过程安全

考虑到在 ECMAScript 中没法建立类，开发人员就发明了一种函数，用函数来封装以特定接口建立对象的细节函数

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    }
    return o;
}

var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

函数 createPerson() 可以根据接受的参数来构建一个包含全部必要信息的 Person 对象。能够无数次地调用这个函数，而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了建立多个类似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。this

二、构造函数模式

ECMAScript 中的构造函数可用来建立特定类型的对象，例如Object 和 Array 这样的原生构造函数spa

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

在这个例子中， Person() 函数取代了 createPerson() 函数。prototype

咱们注意到， Person() 中的代码除了与 createPerson() 中相同的部分外，还存在如下不一样之处：指针

没有显式地建立对象；code
直接将属性和方法赋给了 this 对象；对象
没有 return 语句。继承

要建立 Person 的新实例，必须使用 new 操做符。以这种方式调用构造函数实际上会经历如下 4个步骤：接口

(1) 建立一个新对象；

(2) 将构造函数的做用域赋给新对象（所以 this 就指向了这个新对象）；

(3) 执行构造函数中的代码（为这个新对象添加属性）；

(4) 返回新对象。

在前面例子的最后， person1 和 person2 分别保存着 Person 的一个不一样的实例。这两个对象都有一个 constructor （构造函数）属性，该属性指向 Person ，以下所示。

alert(person1.constructor == Person); //true

alert(person2.constructor == Person); //true

可是，提到检测对象类型，仍是 instanceof 操做符要更可靠一些。咱们在这个例子中建立的全部对象既是 Object 的实例，同时也是 Person的实例，这一点经过 instanceof 操做符能够获得验证。

alert(person1 instanceof Object); //true

alert(person1 instanceof Person); //true

alert(person2 instanceof Object); //true

alert(person2 instanceof Person); //true

构造函数的问题：使用构造函数的主要问题，就是每一个方法都要在每一个实例上从新建立一遍，person1 和 person2 都有一个名为 sayName() 的方法，但那两个方法不是同一个 Function 的实例

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.name)"); //  与声明函数在逻辑上是等价的
}

如下代码能够证实这一点：

alert(person1.sayName == person2.sayName); //false

所以，大可像下面这样，经过把函数定义转移到构造函数外部来解决这个问题。

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = sayName;
}

function sayName(){
	alert(this.name);
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

三、原型模式

咱们建立的每一个函数都有一个 prototype （原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。

若是按照字面意思来理解，那么 prototype 就是经过调用构造函数而建立的那个对象实例的原型对象。

使用原型对象的好处是可让全部对象实例共享它所包含的属性和方法。

换句话说，没必要在构造函数中定义对象实例的信息，而是能够将这些信息直接添加到原型对象中

function Person(){

}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName(); //"Nicholas"

var person2 = new Person();
person2.sayName(); //"Nicholas"

alert(person1.sayName == person2.sayName); //true

但与构造函数模式不一样的是，新对象的这些属性和方法是由全部实例共享的。换句话说，person1 和 person2 访问的都是同一组属性和同一个 sayName() 函数。

理解原型对象

只要建立了一个新函数，就会根据一组特定的规则为该函数建立一个 prototype属性，这个属性指向函数的原型对象。在默认状况下，全部原型对象都会自动得到一个 constructor（构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针。

就拿前面的例子来讲，Person.prototype. constructor 指向 Person 。而经过这个构造函数，咱们还可继续为原型对象添加其余属性和方法。

当调用构造函数建立一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。

ECMA-262 第 5 版中管这个指针叫 [[Prototype]] 。虽然在脚本中没有标准的方式访问 [[Prototype]] ，但 Firefox、Safari 和 Chrome 在每一个对象上都支持一个属性__proto__ ；而在其余实现中，这个属性对脚本则是彻底不可见的。

不过，要明确的真正重要的一点就是，这个链接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。

此外，要格外注意的是，虽然这两个实例都不包含属性和方法，但咱们却能够调用 person1.sayName() 。

这是经过查找对象属性的过程来实现的。（属性->原型->原型...）

虽然在全部实现中都没法访问到 [[Prototype]] ，但能够经过 isPrototypeOf() 方法来肯定对象之间是否存在这种关系。从本质上讲，若是 [[Prototype]] 指向调用 isPrototypeOf() 方法的对象（ Person.prototype ），那么这个方法就返回 true ，以下所示：

alert(Person.prototype.isPrototypeOf(person1)); //true

alert(Person.prototype.isPrototypeOf(person2)); //true

ECMAScript 5 增长了一个新方法，叫 Object.getPrototypeOf() ，在全部支持的实现中，这个方法返回 [[Prototype]] 的值。例如：

alert(Object.getPrototypeOf(person1) == Person.prototype); //true

alert(Object.getPrototypeOf(person1).name); //"Nicholas"

当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这个属性只会阻止咱们访问原型中的那个属性，但不会修改那个属性。即便将这个属性设置为 null ，也只会在实例中设置这个属性，而不会恢复其指向原型的链接。不过，使用 delete 操做符则能够彻底删除实例属性，从而让咱们可以从新访问原型中的属性

使用 hasOwnProperty() 方法能够检测一个属性是存在于实例中，仍是存在于原型中。这个方法（不要忘了它是从 Object 继承来的）只在给定属性存在于对象实例中时，才会返回 true 。

function Person(){

}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
	alert(this.name);
};

 

var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); // 属性中没有 返回false
person1.name = "Greg";
alert(person1.name); // "Greg"——来自实例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); // "Nicholas"——来自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name;
alert(person1.name); //"Nicholas"——来自原型
alert(person1.hasOwnProperty("name")); //false

2.原型与 in 操做符

有两种方式使用 in 操做符：单独使用和在 for-in 循环中使用。

在单独使用时， in 操做符会在经过对象可以访问给定属性时返回 true ，不管该属性存在于实例中仍是原型中。

function Person(){

}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
	alert(this.name);
};

 

var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true

结合hasOwnProperty 判断一个属性是否存在切存在于原型中

function hasPrototypeProperty(object, name){
    return !object.hasOwnProperty(name) && (name in object);
}

3.更简单的原型语法

function Person(){

}

Person.prototype = {
	name : "Nicholas",
	age : 29,
	job: "Software Engineer",
	sayName : function () {
	    alert(this.name);
	}
};

在上面的代码中，咱们将 Person.prototype 设置为等于一个以对象字面量形式建立的新对象。

最终结果相同，但有一个例外： constructor 属性再也不指向 Person 了。

前面曾经介绍过，每建立一个函数，就会同时建立它的 prototype 对象，这个对象也会自动得到 constructor 属性。

而咱们在这里使用的语法，本质上彻底重写了默认的 prototype 对象，所以 constructor 属性也就变成了新对象的 constructor 属性（指向 Object 构造函数），再也不指向 Person 函数。

此时，尽管 instanceof操做符还能返回正确的结果，但经过 constructor 已经没法肯定对象的类型了，以下所示。

var friend = new Person();

alert(friend instanceof Object); //true
alert(friend instanceof Person); //true

alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

解决办法很简单，手动指定

function Person(){

}

Person.prototype = {
	constructor : Person,
	name : "Nicholas",
	age : 29,
	job: "Software Engineer",
	sayName : function () {
	    alert(this.name);
	}
};

注意，以这种方式重设 constructor 属性会致使它的 [[Enumerable]] 特性被设置为 true。默认状况下，原生的 constructor 属性是不可枚举的，所以若是你使用兼容 ECMAScript 5 的 JavaScript 引擎，能够试一试 Object.defineProperty() 。

4.原型的动态性

因为在原型中查找值的过程是一次搜索，所以咱们对原型对象所作的任何修改都可以当即从实例上反映出来——即便是先建立了实例后修改原型也照样如此

var friend = new Person();

Person.prototype.sayHi = function(){
    alert("hi");
};

friend.sayHi(); //"hi"（没有问题！）

可是，若是咱们使用对象字面量的方式修改Person的原型，此时的Person.protptype指向的是一个新对象

咱们知道，调用构造函数时会为实例添加一个指向最初原型的[[Prototype]] 指针，而把原型修改成另一个对象就等于切断了构造函数与最初原型之间的联系。

function Person(){

}

var friend = new Person();
Person.prototype = {
	constructor: Person,
	name : "Nicholas",
	age : 29,
	job : "Software Engineer",
	sayName : function () {
	   alert(this.name);
	}
};

friend.sayName(); //error

过程以下图所示

5.原生对象的原型

原型模式的重要性不只体如今建立自定义类型方面，就连全部原生的引用类型，都是采用这种模式建立的。全部原生引用类型（ Object 、 Array 、 String ，等等）都在其构造函数的原型上定义了方法。例如，在 Array.prototype 中能够找到 sort() 方法，而在 String.prototype 中能够找到substring() 方法

alert(typeof Array.prototype.sort); //"function"

alert(typeof String.prototype.substring); //"function"

经过原生对象的原型，不只能够取得全部默认方法的引用，并且也能够定义新方法。能够像修改自定义对象的原型同样修改原生对象的原型，所以能够随时添加方法。下面的代码就给基本包装类型String 添加了一个名为 startsWith() 的方法。

String.prototype.startsWith = function (text) {
    return this.indexOf(text) == 0;
};

var msg = "Hello world!";
alert(msg.startsWith("Hello")); //true

6. 原型对象的问题

原型模式也不是没有缺点。首先，它省略了为构造函数传递初始化参数这一环节，结果全部实例在默认状况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便，但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所致使的。

尤为对于包含引用类型值的属性来讲（基本值还能够隐藏）

function Person(){

}

Person.prototype = {
	constructor: Person,
	name : "Nicholas",
	age : 29,
	job : "Software Engineer",
	friends : ["Shelby", "Court"],
	sayName : function () {
	    alert(this.name);
	}
};

var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

四、组合使用构造函数模式和原型模式

建立自定义类型的最多见方式，就是组合使用构造函数模式与原型模式。

构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。

结果，每一个实例都会有本身的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。

另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}

Person.prototype = {
    constructor : Person,
    sayName : function(){
        alert(this.name);
    }
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

是目前在 ECMAScript中使用最普遍、认同度最高的一种建立自定义类型的方法

五、动态原型模式

动态原型模式致力于解决这样一个问题，它把全部信息都封装在了构造函数中，而经过在构造函数中初始化原型（仅在必要的状况下），又保持了同时使用构造函数和原型的优势。换句话说，能够经过检查某个应该存在的方法是否有效，来决定是否须要初始化原型。

function Person(name, age, job){
	//属性
	this.name = name;
	this.age = age;
	this.job = job;
	// 方法
	if (typeof this.sayName != "function"){
		Person.prototype.sayName = function(){
			alert(this.name);
		};
	}
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

注意构造函数代码中加粗的部分。这里只在 sayName() 方法不存在的状况下，才会将它添加到原型中。

使用动态原型模式时，不能使用对象字面量重写原型。前面已经解释过了，若是在已经建立了实例的状况下重写原型，那么就会切断现有实例与新原型之间的联系。

六、寄生构造函数模式

一般，在前述的几种模式都不适用的状况下，可使用寄生（parasitic）构造函数模式。这种模式的基本思想是建立一个函数，该函数的做用仅仅是封装建立对象的代码，而后再返回新建立的对象；但从表面上看，这个函数又很像是典型的构造函数。

function Person(name, age, job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	};
	return o;
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

除了使用 new 操做符并把使用的包装函数叫作构造函数以外，这个模式跟工厂模式实际上是如出一辙的。

工厂模式为

function createPerson(name, age, job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	};
	return o;
}

var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

关于寄生构造函数模式，有一点须要说明：首先，返回的对象与构造函数或者与构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部建立的对象没有什么不一样。为此，不能依赖 instanceof 操做符来肯定对象类型。因为存在上述问题，咱们建议在可使用其余模式的状况下，不要使用这种模式。

七、稳妥构造函数模式

所谓稳妥对象，指的是没有公共属性，并且其方法也不引用 this 的对象。

稳妥对象最适合在一些安全的环境中（这些环境中会禁止使用 this 和 new ），或者在防止数据被其余应用程序（如 Mashup程序）改动时使用。

稳妥构造函数遵循与寄生构造函数相似的模式，但有两点不一样：

一是新建立对象的实例方法不引用 this ；

二是不使用 new 操做符调用构造函数。按照稳妥构造函数的要求，能够将前面的 Person 构造函数重写以下。

function Person(name, age, job){
	//建立要返回的对象
	var o = new Object();
	//能够在这里定义私有变量和函数
	//添加方法
	o.sayName = function(){
		alert(name);
	};
	//返回对象
	return o;
}

var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

注意，在以这种模式建立的对象中，除了使用 sayName() 方法以外，没有其余办法访问 name 的值。

与寄生构造函数模式相似，使用稳妥构造函数模式建立的对象与构造函数之间也没有什么关系，所以 instanceof 操做符对这种对象也没有意义。