Js之原型模式

我们创建的每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，此对象的用途是包含可以由特定类型的所有实例共享的属性和方法。按字面意思理解，prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享其包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。例子：
           

function Person（）{

}
Person.prototype.name="wf";
Person.prototype.age=;
Person.prototype.job="software engineer";
Person.prototype.sayName=function(){
    alert(this.name);
};
var person1=new Person();
person1.sayName();//"wf"
var person2=new Person();
person2.sayName();//"wf"
alert(person1.sayName==person2.sayName);//true
           

在此我们将sayName()方法和所有属性直接添加到了Person的prototype 属性中，构造函数变成了空函数。即使如此仍可以通过调用构造函数来创建新对象，而且新对象还具有相同的属性和方法。但与构造函数不同的是，新对象的属性和方法是由所有的实例来共享。换句话说，person1和person2访问的都是同一组属性和同一个sayName（）函数。要理解原型模式的工作原理，必须先理解ECMAScript中的原型对象的性质。
           

理解原型对象

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。前面例子，Person.prototype.constructor指向Person，而通过这个构造函数，我们还可以继续为原型对象添加其他属性和方法。
   创建了自定义的构造函数后，其原型对象默认只会取得constructor属性；至于其他方法则都是从Object继承而来。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问[[Prototype]]，但Firefox、Safari、Chrome在每个对象上都支持一个属性`__proto__`;而在其他实现中，这个属性对脚本则是完全不可见的。要明确的是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例和构造函数之间。以前面使用的Person构造函数和Person.prototype创建的实例代码为例，下图展示了各个对象之间的关系。
           

上图展示了Person构造函数、Person的原型属性和Person的两个实例之间的关系。在此，

Person.prototype

指向了原型对象，Person.prototype.constructor又指回了Person。原型对象中除了包含constructor属性之外，还包括后来添加的其他属性。Person的每个实例Person1 和Person2都包含一个内部属性，该属性仅仅指向了Person.prototype;换句话说，他们与构造函数没有直接的关系。注意，虽然两个实例都不包含属性和方法，但我们却可以调用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);//"wf"
           

Object.getPrototypeOf()返回的对象实际就是这个对象的原型。每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。若在实例对象中找到了具有给定名字的属性，则返回该属性的值；若没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性，若在原型对象中找到了给定名字的属性，则返回该属性的值。
    虽然可以通过对象实例访问保存在原型中的值，但却不能对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。
           

function Person（）{    
          }
          Person.prototype.name="wf";
          Person.prototype.age=;
          Person.prototype.job="software engineer";
          Person.prototype.sayName=function(){
          alert(this.name);
          };
       var person1=new Person();
       var person2=new Person();
       person1.name="greg";
       alert(person1.name);//"greg"---来自实例
       alert(person2.name);//"wf"---来自原型
           

当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。换句话说，添加这个属性只会阻止我们去访问原型中的那个属性，但不会修改那个属性。即使将这个属性设置为null，也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过使用delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性。
    ```
      function Person（）{    
      }
      Person.prototype.name="wf";
      Person.prototype.age=29;
      Person.prototype.job="software engineer";
      Person.prototype.sayName=function(){
      alert(this.name);
      };
       var person1=new Person();
       var person2=new Person();
       person1.name="greg";
       alert(person1.name);//"greg"---来自实例
       alert(person2.name);//"wf"---来自原型
       delete person1.name;
       alert(person1.name);//"wf"---来自原型
           

我们使用delete操作符删除了person1.name,之前他保存的“greg”值屏蔽了同名的原型属性。把它删除之后就恢复了对原型中name属性的连接。
           使用hasOwnProperty()方法可以检测一个属性是存在于实例中还是存在于原型中。这个方法（丛Object继承来的）只在给定属性存在于实例中时，才会返回true。
                   ```
          function Person（）{    
          }
          Person.prototype.name="wf";
          Person.prototype.age=;
          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);//"wf"---来自原型
           alert(person2.hasOwnProperty("name"));//false
           delete person1.name;
           alert(person1.name);//"wf"---来自原型
           alert(person1.hasOwnProperty("name"));//false