面向对象与原型（三）

原型

每个 JavaScript 对象都有一个与之相关联的另一个 JavaScript 对象（或null，但这是罕见的）。 第二个对象被称为原型，第一个对象从原型继承属性。

换句话说：每个 JS 对象一定有一个对应的原型对象，并从原型对象继承属性和方法。

默认时，原型对象是空对象。

默认情况下，每一个原型对象都有一个 constructor 属性，这个属性指向 prototype 所属的方法。默认时，原型对象通过 constructor 指向函数，函数通过 prototype 指向原型对象。

函数的原型

每一个函数都是 Function 的实例。所以下面两个输出都返回的是 true。

```javascript
alert(Object.__proto__ == Function.prototype)
function Demo(){}
alert(Demo.__proto__ == Function.prototype)
```

Object 是系统内置的一个方法 ，所以它的 __proto__ 就是 Function.prototype。在这个时候，它与自己定义的 Demo 方法是一样的。

prototype

创建函数时，JS 会自动为这个函数添加 prototype 属性，值是空对象。用于存储该函数实例化出的对象所共享的属性与方法。这个对象就是原型对象，简称原型。

prototype 是函数的属性，对象中没有该属性

1. 任何对象都会从其原型对象中继承方法与属性。因此，当调用到对象中不存在的某个方法或属性时，会延着其原型一级级的往上查找，直到找到或到达原型链的顶层。

   function Demo () {
   }
   Demo.prototype.name = function(){
       alert('prototype function')
   }
   var d = new Demo()
   var d2 = new Demo()
   alert(d.name == d2.name) // true
   d.name()
   d2.name()
   alert(d.hasOwnProperty('name')) // false
   alert(d2.hasOwnProperty('name')) // false
   d.name = function(){
      alert('d.name')
   }
   d.name()
   d2.name()
   

   • 初始时，d 与 d2 中都没有 name 方法，调用时两者都会找到原型对象中的 name 方法，所以两者相等，且输出的结果一样，都是 prototype function。

   • 对 d 的 name 方法进行重新定义，使 d 中有一个 name 方法（但这并不影响 d2 中没有 name 方法），所以再次输出时，d 输出的是 d.name，而 d2 输出的依旧是 prototype function。

2. 原型也可以当作一个普通的对象，它与普通对象的区别在于：原型中的属性与方法是别的实例所共有的。

3. 如果函数只是当作普通函数，其原型对象没有什么用。

4. 使用原型可以扩展类的功能。

   String.prototype.ex = function(){
       alert('this is ex');
   }
   'str'.ex() // 本身 String 没有 ex 功能，但通过原型扩展了 String 的功能
   

自定义原型对象

可以手动的为 prototype 指定一个对象。如下：

function Demo () {
}

var cp =  {
    age:'fdafdasfasdf'
};

Demo.prototype= cp; // 将 cp 对象指定成 Demo 的原型对象

var d = new Demo()
alert(d.age) // Demo 的实例 d 具有原型对象中所定义的一切属性与方法
alert(Demo.prototype.constructor == Demo) //false
alert(Demo.prototype.constructor == Object) //true

指定原型对象后，原型对象的 constructor 属性便不会指向构造函数。

为达到默认情况下 constructor 依旧指向原来的构造函数，可以手动为原型对象添加上 constructor 属性，使其指向构造函数。即将 cp 的初始化改为如下形式：

var cp =  {
    age:'fdafdasfasdf',
    constructor:Demo // 手动指定 constructor 指向 Demo
};

__proto__

1. 每一个函数都有一个 prototype 属性，用于指向原型。而一旦你把这个函数当作构造函数调用，那么 JS 就会帮你创建该构造函数的实例，实例继承构造函数 prototype 的所有属性和方法（实例通过设置自己的 __proto__ 指向承构造函数的 prototype 来实现这种继承）。因此，对象的 __proto__ 指向自己构造函数的 prototype。

   function Demo(){
   
   }
   var p = {}
   Demo.prototype = p;
   var d = new Demo()
   document.write(Demo.prototype == d.__proto__) // true
   document.write(Demo.prototype == p) //  true
   

2. 原型链的最顶层对象是 Object.prototype，也就是 Object 的原型对象。并且该对象的 __proto__ 属性值为 null。也就是说 Object 的原型对象没有原型。

   alert(Object.prototype.__proto__) // null
   

比较

1. prototype 是函数的一个属性, 它指向函数的原型.
2. __proto__ 是对象的内部属性, 它指向构造函数的原型, 对象依赖它进行原型链查询.
3. prototype 只有函数才有, 其他(非函数)对象不具有该属性. 而 __proto__ 是对象的内部属性, 任何对象都拥有该属性。所以每一个函数也都具有 __proto__ 属性——因为函数也是对象。