白话工厂模式、构造函数模式、原型模式、组合模式

521 阅读7分钟

查看原文:欢迎来到我的个人博客

为了解决什么问题

所有模式的共同目的就是:创建对象!怎么又快又好又省内存的创建对象!

创建对象为什么这么重要?

JS 有六种数据数据类型,其中五种属于基本数据类型:Null、Boolean、undefined、String、Number。而其它值都是对象。数组是对象,函数是对象,正则表达式是对象。对象也是对象。来看一下对象的定义:

无序属性的集合,其属性可以包含基本值、对象、或者函数。

我们一般通过对象字面量的方式创建对象。创建的对象用于我们想要做的事。但是,如果只有通过字面量创建,那么当遇到大量对象的某些属性一样时,我们就会有大量重复劳动,这是我们程序员不能允许滴!所以我们用上了工厂函数。

工厂模式

工厂模式抽象了具体对象的过程。也就是说,发明了一种函数,把对象放到函数里,用函数封装创建对象的细节。我们把相同属性写在函数中,这样只要一键调用函数就可以创建出符合要求的对象了。

function createPerson (name,age) {
    var o = {
        name : name,
        age : age,    
        sayName : function () {
            alert(this.name)
        }
    }
    return o;
}
var person1 = createPerson("Tom",14);
var person2 = createPerson("Jerry",18)

console.log(person1 instanceof Object)  //true
console.log(person1 instanceof createPerson)  //false

工厂模式解决了代码复用的问题,但是却没有解决对象识别的问题。即创建的所有实例都是 Object 类型。这个范围太大了。有时候不适合我们逻辑的构建,所以我们必须要能标识出这个更细的分支。(类似于array)

console.log(person1 instanceof Object)  //true
console.log(person1 instanceof createPerson)  //false,识别不出createPerson

instanceof 用于检测数据类型
var aa = []
console.log(aa instanceof Object)  //true
console.log(aa instanceof Array)  //true
// 像array这种,既能识别object,也能识别array这个更细的分支,方便我们逻辑构建

要解决工厂模式的这个问题,就有了构造函数模式

构造函数模式

function Person (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name)
    }
}
    var person1 = new Person('Tom',14);
    var Person2 = new Person('Jerry',18);
  1. 构造函数 Person 有一个 prototype (原型) 属性,这个属性是一个指针,指向一个对象即:Person.prototype (原型对象);
  2. 实例 person1 person2 也有一个 [[prototype]] 属性或者叫_proto_, 这个属性 也指向 Person.prototype;
  3. 构造函数、和实例 都共享 Person.prototype 里的 属性和方法;
  4. Person.prototype 里有一个 constructor 属性,这个属性也是一个指针,指向构造函数 Person。这样以来,实例 也指向了 Person, 那么实例 也共享了构造函数的属性和方法。
  5. 构造函数、实例、原型对象里所有的属性和方法 都是共享的。

构造函数解决了对象识别问题,我们在这个例子中创建的对所有对象既是 Object 的实例,同时,也是 Person 的实例。这一点通过 instanceof 操作符可以得到验证。

console.log(person1 instanceof Object)  //true
console.log(person1 instanceof Person)  //true

创建自定义的构造函数意味着,将来可以将它的实例 标识为一种特定类型;这正是构造函数胜过工厂模式的地方。Array 就是类似于这种方式。用构造函数的方式,实例化一个新对象,这个对象可以是其它类型例如 Array 类型。

构造函数和普通函数的区别

构造函数和普通函数的唯一区别,在于调用它们的方式不同。

//构造函数
function Person (name,age) {
    console.log(this)   
}
var person = new Person()
//注意的是,this 指向 构造函数 Person
//普通函数
 function Person (name,age) {
    console.log(this)
 }
 Person()
 //注意,this 指向 widow.

构造函数虽然好用,但也有缺点。既每个 new 出来的实例 里的方法都要重新创建一遍。在前面的例子中 person1 person2 都有一个 sayName 方法,但这两个方法不是同一个 Function 实例!每个实例的方法 都是不同的,不相等的。这是不合理的!

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

由此可见,完成同样任务的函数确实没必要 每个实例,就实例一次。解决方案就是原型模式。

原型模式

我们创建的每个函数都有一个 prototype (原型) 属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

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

也就是说爸爸生下儿子,爸爸有的儿子都有,爸爸就是原型,儿子就是实例。这样的话我们只要把需要共享的属性和方法绑在爸爸身上,所有的儿子使用的就是同一种了。

function Person (){
}
Person.prototype.name = "Tom";
Person.prototype.sayName = function () {
    alert(this.name)
};
// 或者  
Person.prototype = {
    constructor : Person,
    name : "Tom",
    sayName : function () {
        alert(this.name)
    }
}
var person1 = new Person();
person1.sayName();  //"Tom"

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

alert( person1.sayName == persona2.sayName )   //true

再来看下这个:

  1. 构造函数 Person 有一个 prototype (原型) 属性,这个属性是一个指针,指向一个对象即:Person.prototype (原型对象);
  2. 实例 person1 person2 也有一个 [[prototype]] 属性或者叫_proto_, 这个属性 也指向 Person.prototype;
  3. 构造函数、和实例 都共享 Person.prototype 里的 属性和方法;
  4. Person.prototype 里有一个 constructor 属性,这个属性也是一个指针,指向构造函数 Person。这样以来,实例 也指向了 Person, 那么实例 也共享了构造函数的属性和方法。
  5. 构造函数、实例、原型对象里所有的属性和方法 都是共享的。

与构造函数相比,原型模式,把公共方法提出来放到 prototype 对象里。每个实例 的 [[prototype]] 指针 指向这个对象,所以所有实例的公共方法 是同一个。这样也避免了内存浪费。

但是,我们一般很少只使用原型模式,因为对于儿子来说,调用的方法可以是一样的,但是每个儿子都有自己的属性,这个可是不一样的:

function Person () {
}
Person.prototype = {
    constructor : Person,
    name : "Tom",
    friends : ["Jerry","Sara"]
}
var person1 = new Person();
var person2 = new Person();

person1.friends.push("Vans");

alert( person1.friends ); //"Jerry","Sara","Vans"
alert( person2.friends ); //"Jerry","Sara","Vans"
alert( person1.friends === person2.friends ); //true

给一个实例添加属性值,结果,所有实例的属性值也改变了。实例应该具有自己的独立性。自己莫名其妙的被改变,肯定是有问题的。于是就有了 构造函数和原型模式混合模式

组合模式

创建自定义类型最常见的方式,就是组合模式。

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

结果,每个实例都有自己的一份实例属性的副本。注意是副本。同时,又共享着对方法的引用,最大限度地节省了内存。另外,这种混成模式还支持向构造函数传递参数。

function Person (name,age) {
    this.name = name;
    this.age = age;
    this.friends = ["Tom","Jerry"]
}
Person.prototype = {
    consructor : Person,
    sayName : function () {
        alert(this.name)
    }
}

var person1 = new Person("Abert",18);
var person2 = new Person("Marry",17);

person1.friends.push("Vans");
alert( person1.friends ); //"Tom","Jerry","Vans"
alert( person2.friends ); //"Tom","Jerry"
alert( person1.friends === person2.friends ); //false

在例子中,实例属性是由构造函数定义的,且每个实例的属性 是独立的。改变 实例的属性,并不影响其它实例的属性,这样就避免了 原型模式的 "狂热的共享热情"。

所有实例的共享属性和方法 则是在原型中定义的。修改任何实例 (person1 或 person2) 中哪一个,其它实例 都会受到影响。因为所以实例的 [[prototype]] 指针 指向原型对象 (Person.prototye),它们拥有共同的引用。构造函数中的实例属性 则只是副本。