js核心基础之理解原型对象以及原型继承（一）

首先，我们的理解什么是原型对象，才能更好的理解什么叫原型链以及原型继承。

在JS中，只要你创建了一个新函数，就会根据规定为该函数创建一个prototype的属性，这个属性指向函数的原型对象。而在默认情况下，所有的原型对象均会有一个constructor属性，这个属性也是一个指针，指向构造函数。

例如：User是一个构造函数，User有个属性prototype，这个属性指向User的一个原型对象Prototype User，而这个原型对象Prototype User默认也有一个属性constructor，Prototype User的constructor又指向构造函数User。简单来说就是你指向我，我指向你。

再用原型模式创建对象的形式来仔细说明一下：
我们创建一个Person构造函数，（在这里多说一句，有人好像对构造函数不理解，说的直白点，构造函数就是一个用来构造对象的函数，与普通函数没有什么两样）

// 定义构造函数 Person
function Person(){}

// 在构造函数上的prototype属性上定义属性和方法：
Person.prototype.name='zhy';
Person.prototype.age=20;
Person.prototype.job='SE';
Person.prototype.sayName=function () {
    return this.name;
}

再实例化两个对象：

var p1=new Person();
var p2=new Person();

console.log(p1.sayName());//'zhy'
console.log(p2.sayName());//'zhy'

下图是各个对象之间的关系：

从上图我们可以看到，构造函数Person有一个prototype属性，属性prototype指向一个对象，这个对象是构造函数Person的原型对象，而原型对象又有一个默认的属性constructor，属性constructor又回指了构造函数Person。
p1和p2是两个实例对象，它们均只有一个内部属性[[prototype]]，这个属性在JS没办法直接访问，但在几大主流浏览器中都支持一个属性__proto__访问，不过要明白的是：

console.log( p1.__proto__ );  // {name: 'zhy', age: 20, job: 'SE', sayName: ƒ, constructor: ƒ}
console.log( p2.__proto__ );  // {name: 'zhy', age: 20, job: 'SE', sayName: ƒ, constructor: ƒ}

ECMAScript 5中新增了一个函数，Object.getPrototypeOf()

console.log(Object.getPrototypeOf(p1) === p1.__proto__); // true

返回的均是构造函数Person的原型对象，与构造函数之间没有什么联系。
虽然，无法访问到内部属性[[prototype]]，但是可以通过isPrototypeOf()方法来确定对象之间是否存在这个关系。
从本质上讲，如果内部属性[[prototype]]指向调用isPrototypeOf ()方法的对象，则返回true。

A isPrototypeOf B:
A是B的原型

console.log( Person.prototype.isPrototypeOf(p1)); // true
console.log( Person.prototype.isPrototypeOf(p2)); // true

看到这里，可能有人会有疑问，构造函数明明是个空的，除了默认的一个prototype属性，啥都没有，而且构造出来的实例上除了一个内部属性[[prototype]]，也是啥都没有，为什么访问p1.sayName会有返回值？

这是因为，当你访问一个对象的属性时，如果该对象存在这个属性，则返回这个属性，如果没有则从它的原型上面找，如果有，则返回原型对象上的属性，如果再没有则返回一个undefined。
第一步：从该对象上查找该属性，有：返回该属性，没有则第二步；
第二步：从该对象的原型对象上查找，有：则返回属性，没有则返回undefined

但是，当你想为一个对象添加属性时，情况就发生改变了。
第一步：检查当前对象是否有该属性，没有：添加赋值，有：修改为新值，不会改到原型对象上的值

也就是说，添加该属性，只会阻止我们访问原型对象上的同名属性，即使设为null和undefined，也不行万一你心血来潮又想访问怎么办？很简单，删除当前对象上的属性即可：

delete p1.name;

原型模式优缺点见下篇

原型模式优缺点

本文参考《JavaScript高级程序设计》