浅谈JavaScript原型对象与相关设计模式

引言

　　本文先从介绍JavaScript中基本的几种设计模式开始，最后引出原型对象，然后对原型对象有一个较全面的介绍。

1、创建对象的几种设计模式

　　A、工厂模式

　　我们知道在JavaScript中创建对象可以使用Object构造函数或者对象字面量的方式。但是使用这些方式有一个问题，就是调用同一个接口创建对象时会出现大量重复的代码。开发人员通过将创建对象的过程细节封装为一个接口。这样可以解决创建多个相似对象的问题。例子如下：

/**
     * 工厂模式
     **/
    function createPerson(name, age, job) {
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.job = job;
        obj.sayName = function () {
            alert(this.name);
        }
        return obj;
    }

    var person1 = createPerson("张三", 29, "工程师");
    var person2 = createPerson("李四", 33, "销售");

　　如以上代码所示：我们在创建相同或相似对象的时候不需要每次都调用Object的构造函数，只需要简单的调用工厂方式来创建对象即可。但是工厂模式没有解决对象识别问题(怎么知道一个对象时什么类型)。因为通过工厂模式创建的对象都是Object类型的，而没法判断是Person类型。后来JavaScript中又引入了构造函数模式。　　

　　B、构造函数模式

　　在JavaScript中通过构造函数可以来创建特定类型的对象，例如：Object、Array等。我们通过构造函数模式来解决对象识别问题。例子如下：

/**
     * 构造函数模式
     **/
    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function () {
            alert(this.name);
        }
    }

    person1 = new Person("张三", 29, "工程师");
    person2 = new Person("李四", 33, "销售");

　　在构造函数模式中，当代码以13,14行的方式进行调用时会发生以下几个步骤。(1)、创建一个新对象。(2)、将构造函数的作用域赋给新对象(因此this就指向这个新对象)。(3)、执行构造函数中的代码(为新对象添加属性)。4、返回这个新对象。这样person1和person2都有一个constructor(构造函数)属性，该属性指向Person。

　　对象的constructor属性最初是用来判断对象类型的，但是判断引用类型的类型还是使用instanceof更加可靠一些。通过构造函数模式我们就可以辨别出对象的类型了，这事构造函数模式胜过工厂模式的地方。当然person1和person2还是Object类型的对象，因为所有对象均继承自Object类型。

　　但是构造函数模式也有缺点。通过构造函数模式创建的对象都有一个相同的方法。即每一个方法都需要在每一个对象上重新创建一遍。如上面的例子所示,sayName方法作为一个对象，在每一个对象上面都会创建一个新的函数对象，这无疑是对内存的消耗。其实所有对象只需共用一个sayName函数即可。有人认为只需把sayName方法放到构造函数外面，这个方法在函数数量较少的时候还可以，但是数量一多，会给维护造成一定的困难。这时我们可以引入原型模式来改进这个问题。

　　C、原型模式

　　我们创建的每一个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，这个对象包含可以由特定类型的所有实例共享的属性和方法。这个类似于C#,Java中的static定义的属性(字段)和方法。所有实例共享这些属性和方法。例子如下：

/**
     * 原型模式
     **/
    function Person() { }
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function () {
        alert(this.name);
    }
    person1 = new Person();
    person2 = new Person();

　　理解prototype(原型)对象

　　创建新函数时，就会根据一组特定的规则为该函数创建prototype属性。这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor(构造函数)属性，这个属性包含一个指向包含prototype属性所在的函数的指针。

　　创建自定义构造函数之后，其原型对象只会取得constructor(构造函数)属性，至于其他方法都是从Object集成而来的。上面例子的原型图如下所示：

　　该图表示了Person构造函数、Person的原型对象及现有的两个Person实例之间的关系。

　　Person构造函数内部存在一个prototype属性指向了Person原型对象，而Person原型对象内部的constructor(构造函数)属性又指向Person构造函数。Person的每一个实例内部都有一个prototype属性指向Person原型对象。Person的每一个实例仅仅与原型对象存在关系与Person构造函数对象不存在任何关系。在图上我们也可以看出了。

　　虽然name,age,job等属性都是我们通过Person.prototype.name的方式添加进去的。所以这些属性和方法(sayName)都是在原型对象中的。但是我们还是可以调用person1.age、person1.sayName()。这是为什么呢？这是通过查找对象属性的过程来实现的。详细的查找过程如下：

　　每当代码读取某个对象的某个属性的时候，都会执行一次搜索，目标是给定名称的属性。搜索本身从对象的实例开始(图中person1、person2)。如果在实例中找到该属性，就直接返回，不执行下面的操作。如果在实例中没有找到给定名称的属性，就继续搜索实例Prototype指针指向的原型对象，在原型对象中查找指定名称的属性。找到就返回该属性。

　　虽然可以通过实例访问原型对象中的值，但不能通过对象实例重写原型的值。如果我们在实例中添加一个属性，该属性与原型中的属性同名，那我们就在实例中创建该属性，该属性会屏蔽原型中的同名属性。请看下面的例子：

/**
     * 原型模式
     **/
    function Person() { }
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function () {
        alert(this.name);
    }
    person1 = new Person();
    person2 = new Person();

    person1.name = "Greg";
    alert(person1.name);    //Greg来自实例
    alert(person2.name);    //Nicholas来自原型

    delete person1.name;
    alert(person1.name);    //Nicholas来自原型

　　注意：使用hasOwnproperty()方法可以检测一个属性是否存在于实例中(在实例中返回true)，还是存在于原型中。person1.hasOwnproperty("name")的形式。详细的分析如图：

　　重点：更简洁的原型方法

/**
     * 更加简洁的原型语法
     **/
    function Person() { }
    Person.prototype = {
        constructor: Person,
        name: "Nicholas",
        age: 29,
        job: "Software Engineer",
        sayName: function () {
            alert(this.name);
        }
    }

　　重点：原型的动态性

　　由于在原型中查找值的过程是一次搜索，因此我们对原型所做的修改都会立即实例上反映出来，即使先创建对象，后修改原型对象也是如此。但是如果是重写整个原型对象，情况可能就不一样了。调用构造函数时会为实例添加一个指向最初原型对象的(prototype)指针。但是重写整个原型对象，等于切断了构造函数和原来原型对象之间的关系。看下面的例子：

/**
     * 更加简洁的原型语法
     **/
    function Person() { }

    var friend = new Person();

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

    //var friend = new Person();
    friend.sayName();   //error

　　我们看到这时调用sayName方法会报错。但是如果将实例化语句放到注释处，程序运行正常。下图展示了该例子的相关内幕：

　　通过该图我们知道重写整个原型对象会带来的一些问题。讲了这么多的原型模式，大家应该对这个模式也比较清楚了。但是原型模式并不是完美的。原型模式中的属性对于所有实例都是共享的。这对于函数没有问题。但是对于包含引用类型的属性来说就比较突出了。看下面的例子：

function Person() { }

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

    person1 = new Person();
    person2 = new Person();

    person1.firends.push("Nolos");
    alert(person1.firends);         //"Mark","Nicy","Nolos"
    alert(person2.firends);         //"Mark","Nicy","Nolos"
    alert(person1.firends === person2.firends); //true

　　以上的代码我们看到，我们将friends属性设置为Array类型。作为一个引用类型我们将其放在原型对象中。但是我们给person1的friedns属性添加了一个值。但是friends也影响到了。这就是原型模式存在的问题。

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

　　创建自定义对象的常见方式，就是组合使用构造函数模式和原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。每一个实例都有属于它自己的实例属性的一份副本，同时又引用着原型对象中的共享属性和方法，这样最大限度的节约了内存。看下面的的例子：

/**
     * 组合使用构造函数模式和原型模式
     **/
    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ["Mark", "Nicy"]
    }

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

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

    person1.friends.push("Nolos");

    alert(person1.friends); //"Mark","Nicy","Nolos"
    alert(person2.friends); //"Mark","Nicy"

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