图解原型原型链

图解原型原型链

原型 ？在“类”中（也就是函数中）的prototype就指向一个原型对象，在实例中，__proto__就指向的是一个构造它的那个“类”（函数）的原型，通过protoype与__proto__就会形成一个原型链，对于一个实例来说，就是谁构造的我，我的__proto__就指向谁的原型，直到最顶层的Object，对于“类”（函数）来说，我的prototype指向的是我自己的原型，我里面也有__proto__这个属性，谁构造的我，我指向谁的原型，直到最顶层的Object

说了是图解，那就用图来说，下面的是我的JavaScript代码，我所要展示的图是基于它的，所以也需要认真看一看，补充一点吧，我想我喜欢firefox的原因就是它的控制台的变量视图这个东西，如果你想实际的验证一下的话，推荐在firefox下查看，这会让你更加清楚原型和原型链

function superClass() {
  this.name = 'alias';
  this.age = 18;
}

superClass.prototype.getAge = function() {
  return this.age;
}

function sub() {
  this.subAge = 8;
}

sub.prototype = new superClass();

sub.prototype.getSubAge = function() {
  return this.subAge;
}

console.log(sub);
console.log(new superClass());
console.log(superClass);
console.log(new sub());

对上面的代码，简单做一个分析，不要认为很难，其实没那么难。首先我写了一个superClass的函数，这个函数内部中我写了两个属性，然后再给它的原型上添加了一个原型（superClass.prototype就指向的是原型对象）方法，又写了一个sub这个函数，sub.prototype = new superClass();，可能你没看懂这句话，这句话意思是说，我通过new superClass()得到了一个superClass的实例对象，我让sub.prototype指向了这个实例对象，这里记住，prototype是指针，那么这个实例是怎样的呢？这个跟new关键字就有关系了，这个实例执行了superClass的构造方法，也会通过__proto__这个内置指针指向superClass的原型

图解部分：

这是用变量视图打开的sub

这是用变量视图打开的superClass的实例

这是用变量视图打开的superClass

这是用变量视图打开的sub的实例

所以你在分析原型的时候，心里要可以自己画出相应的图，许多问题就没有那么难了，比如 “继承”