初涉JavaScript模式 (5) : 原型模式 【一】

什么是原型模式？

原型模式（prototype）是指用原型实例指向创建对象的种类，并且通过拷贝这些原型创建新的对象。--引自JavaScript设计模式

我们创建的每一个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象包含了所有由指向他的构造函数所生成的实例的共享属性和方法。说的通俗点，就是一个对象包含了一些属性和方法，而所有prototype为这个对象的构造函数所创建的实例都可以共享这个对象的属性和方法。直接上代码：

```javascript
           function Animal(type){
               this.type = type;
           }
           Animal.prototype.sayType = function(){
               console.log("我是一只"+this.type);
           };
           var tom = new Animal("Cat");
           var jerry = new Animal("Mouse");
           tom.sayType();   // "我是一只Cat"
          jerry.sayType(); // "我是一只Mouse"
          console.log(tom.sayType === jerry.sayType); //true
```

以上代码说明了每个实例都拥有了原型上的方法，这也就是Javascript基于原型的继承

我在上一篇中提过，构造函数模式一个缺点是每个实例的方法都是一个新的Function实例（虽然可以解决，但是也让我们的代码丝毫没有封装性，详细请看上一篇），而原型模式正好解决了我们的问题，而且原型模式更符合我们封装的需求。

理解原型对象

无论什么时候，只有我们创建了一个新的函数，JS就会给这个新函数创建一个prototype属性，该属性指向这个新函数的原型对象。在默认情况下，所有的原型对象都会自动获得一个constructor属性，该属性包含一个指向这个函数本身的指针，上代码：

```javascript
        function Animal(type){
            this.type = type;
        }
        console.log(Animal.prototype.constructor == Animal); //true
```

我们要注意的是prototype只会取得constructor属性，至于其他方法和属性则都是从Object继承而来的，示例如下:

```javascript
           function Animal(type){
               this.type = type;
           }
           var obj = new Object();
           console.dir(Animal.prototype);
           console.dir(obj);
```

运行结果如下图所示：

而同样的我们可以给prototype添加其他自定义的方法和属性（原型模式的共享），当调用构造函数创建一个新实例后，该实例内部将包含一个指针，指向构造函数的原型对象。ECMA-262第五版管这个指针叫做[[prototype]],需要注意的在JS中是没有标准的方式访问[[prototype]]，但Firefox，Safari，Chrome在每个对象上都支持一个属性__proto__，该属性指向创建这个实例的构造方法的原型对象，需要注意的是即便我们在以后改变了prototype，也不会改变这个属性。（详细请看上一篇）。在其他的实现中，这个属性对脚本是完全不可见的。

虽然我们没有标准的方式去访问到实例的[[prototype]]，但可以通过isPrototypeOf()方法来确定实例直接是否存在这种关系。从本质上讲，如果[[prototype]]指向调用isPrototypeOf()的实例，那么这个方法就会返回true，代码如下：

```javascript
           function Animal(type){
               this.type = type;
           }
           var tom = new Animal("Cat");
           Animal.prototype = {};
           var jerry = new Animal("Mouse");
           console.log(Animal.prototype.isPrototypeOf(tom)); //false
           console.log(Animal.prototype.isPrototypeOf(jerry)); //true
```

以上代码说明，isPrototypeOf()能够正确的检测出实例的[[prototype]]指向。

ECMAScript5 增加了一个新的方法Object.getPrototypeOf(),在所有支持的实现中，这个方法返回[[prototype]]的值。(只支持IE9+，FF3.5+，Safari5+，Opera12+，Chrome)

JavaScript对象属性查找

每当我们读取一个对象的属性时，都会执行一次搜索，他会现在对象本身查看有木有符合给定名字的属性，如果没有他会去找该对象的原型对象，一直找下去，直到找到为止，如果到了Object.prototype还没找到则会返回undefined，代码如下：

```javascript
           function Man(name){
               this.name = name;
               this.sayName = function(){
                   console.log(this.name);
               };
           }
           function Person(){
               this.type = "人类"
               this.sayType = function(){
                  console.log("我是人");
              };
          }
          function X(){
              this.say = function(){
                  console.log("XXXXX");
              }
          }
          Object.prototype.sayHello = function(){
              console.log("Hello Moto!");
          }
          Person.prototype = new X();
          Man.prototype = new Person();
          var wr = new Man("WeiRan");
          wr.sayName(); //WeiRan
          wr.sayType(); //我是人
          wr.say();      //XXXXX
          wr.sayHello();//Hello Moto
          wr.sayLast(); //Uncaught TypeError: Object #<X> has no method 'sayLast'
          console.log(wr.xxx); //undefined
```

而我们新建另外一个实例，也会依次执行这样的步骤，而这正是多个实例共享原型所保存的属性和方法的基本原理。

覆盖原型的方法和属性

废话不多说，直接上代码：

```javascript
           function Animal(type,name){
               this.type = type;
               this.name = name;
           }
           Animal.prototype.say = function(){
                   console.log("我是一只叫做"+this.name+"的"+this.type);
           };
           var tom = new Animal("Cat","tom");
           var jerry = new Animal("Mouse","jerry");
          tom.say = function(){
              console.log("我偏不说~~~~");
          };
          tom.say();   //我偏不说~~~~
          jerry.say(); //我是一只叫做jerry的Mouse
```

在这个例子中，我们发现在tom实例中，say给我们override的方法给替代了，而在jerry实例中，我们发现也能正常的访问prototype。这是因为，当为一个对象添加一个属性，这个属性会屏蔽原型对象中保存的同名属性。需要注意的是屏蔽而非覆盖，我们override的方法或则属性这是阻止我们访问原型中的同名属性，而并没有修改原型对象中同名属性的值。即使我们在实例中设置这个属性为null，undefined，也不会恢复其指向原型的链接，从而让我们重新访问原型中的属性。

如果我们想重新恢复该属性指向原型的链接，我们可以用delete删除该属性，就可以再次访问到该原型的同名属性了。

检测属性是否存在与实例中

使用hasOwnProperty()方法可以检测一个属性是否存在与实例中，直接上代码：

```javascript
           function Animal(type,name){
               this.type = type;
               this.name = name;
           }
           Animal.prototype.say = function(){
                   console.log("我是一只叫做"+this.name+"的"+this.type);
           };
           var tom = new Animal("Cat","tom");
           console.log(tom.hasOwnProperty("name")); //true
          console.log(tom.hasOwnProperty("say"));  //false
```

后记

这这是原型模式的第一部分，估计会分三部分。由于这段时间工作需求比较紧，可能没办法保证一天一篇，但是一周我对自己的要求是最少三篇。文中如果发现有错或则我的理解不对，请告诉我，共同进步。