深入js原型与继承

在JS中，函数也是一种对象，他也是属性的集合，你也可以对函数进行自定义属性，每个函数都有一个属性叫做prototype。这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。

prototype既然作为对象，属性的集合，不可能就只弄个constructor来玩玩，肯定可以自定义的增加许多属性。例如这位Object大哥，人家的prototype里面，就有好几个其他属性。

除了Object，我们也可以自定义一个函数，然后为它的prototype上新增属性或方法。

   function Fn() { }
        Fn.prototype.name = '田鸣达';
        Fn.prototype.getYear = function () {
            return 1993;
        };
    var fn = new Fn();
        console.log(fn.name);   //田鸣达
        console.log(fn.getYear());  //1993

我们创建了一个Fn函数，给它的prototype新增了name属性和getYear方法。于是，通过new Fn()创建的空对象fn则可以获取到这些定义的属性和方法。（原因稍后讲）

说到prototype，就要提到__proto__,每个对象都有一个隐藏的属性__proto__，可称为隐式原型。javascript不希望开发者用到这个属性值，有的低版本浏览器甚至不支持这个属性值。但是你不用管它，直接写出来就是了。

可以看到，创建的空对象obj中有__proto__属性，这个属性打印出来一看，发现和Object的prototype对象一样。那么到底是不是一样呢？答案是一样的，为什么呢？因为通过new 操作符创建（var obj= { } 与new Object() 是一样的）的对象，这个对象的__proto__属性就会指向构造函数的prototype对象，即obj.__proto__=Object.prototype 。我们知道，obj对象可以访问toString方法，可是obj明明是一个空对象啊，因为js中访问属性或方法时，先在当前对象中找，找不到则通过__proto__属性向上查找，此时obj.__proto__=Object.prototype,所以最后访问的toString是Object.prototype上的。

说到这里，也就可以理解上文  fn对象为什么可以访问name和getYear了，虽然fn上啥也没有，但是通过new Fn()创建的fn，它的__proto__=Fn.prototype，所以最后可以找到位于Fn.prototype上的name和getYear.

前面说了每个对象都有隐藏的__proto__属性，那么Fn.prototype也是一个对象，它也是有这个属性的，它的__proto__会指向Object.prototype,综上所述，会得到如下图所示的结构：

从上图，已经可以看出原型链的关系，对象优先查找自身属性和方法，如果没有就是通过__proto__属性一直向上查找，如fn.toString其实是Object.prototype上的方法。

js的继承中有一种方法就是通过原型链来实现的。

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Cat(){ 
}
Cat.prototype = new Animal();   //注意这里，通过new Animal创建的新对象的__proto__指向了构造函                                                        
                                //数即Animal的prototype,这样原型链就连起来了

Cat.prototype.name = 'cat';    

//　Test Code
var cat = new Cat();
console.log(cat.name);   //cat
console.log(cat.eat('fish'));  
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

需要注意的是，new Animal创建的新对象，它的__proto__为构建函数即Animal的prototype，然后又把这个新对象赋值给Cat.prototype ,所以 Cat.prototype.__proto__=Animal.prototype。于是就通过原型链的向上查找实现了继承。