一篇文章轻松搞懂原型对象和原型链

头疼的原型对象和原型链

我想不少刚接触Javascript的新手对于原型对象（prototype)和原型链(__proto__)的区别和含义都表示真尼玛操蛋，下面就让我来结合简单的例子来让你彻底明白什么是原型对象，什么是原型链。

prototype和__proto__的区别

不要想那么多，你先要知道prototype是函数才有的属性，__proto__是所有对象都有的属性。

var person = { name:'test',age:'20'}
console.log(person.prototype)   // 输出undefined
console.log(person.__proto__)   // 输出Object {}

function fun(){console.log("fun")}
console.log(fun.prototype)      // 输出Object {}
console.log(fun.__proto__)      // 输出function () {}

什么是原型对象（prototype）？

原型对象的用途是为每个实例对象存储共享的方法和属性。通俗的讲，一个对象的原型对象是被继承自它的对象共享的，如B继承自A，当访问B中的属性时，会先找B自己的实例属性，找不到就会到A的原型对象里面去找。注意，B不会去自己的原型对象里面去找，也不会去A的实例属性集合中找，让我们看个例子就明白了：

function Person(){
    this.name = "Person";               
    this.age = 100;                     
}
Person.printName = function(){          //存于Person的实例属性中
    console.log(this.name);
}
Person.prototype.printAge = function(){ //存于Person的原型对象中
    console.log(this.age);
}
Person.prototype.name = "oPerson";      //存于Person的原型对象中

console.log(Person.name);               //"Person"
console.log(Person.printName);          //printName函数，因为printName属于Person的实例属性
console.log(Person.printAge);           //undefined，说过了对象不会访问自己的原型对象的

var person = new Person();
person.prototype.age = 50;  // 这样写是会报错的，因为person不是一个函数，所以没有原型对象
console.log(person.name);   // "Person",person继承自Person，自然也继承了name和age属性
console.log(person.age);    // "100",person继承自Person，自然也继承了name和age属性

person.printAge();          //100,person中没有找到就去Person的原型对象里面找咯
person.printName();         //报错,person实例属性中没有，Person原型对象中也没有，我能怎么办？

什么是原型链（__proto__）？

上面说了，如果B继承自A，那么访问B的属性时，就会依次查找B的实例属性和A的原型对象，那么问题来了？B怎么知道自己的上一级是谁？肯定要用个变量存起来吧？这个变量就是__proto__，一个对象的__proto__指向上一级的prototype，两者是完全相等的。Object的__proto__为null。那么什么是原型链？我们知道B的__proto__指向A的prototype，A的__proto__指向Object的prototype，Object的__proto__指向null，这样一串B->A->Object的链子就叫原型链！

person.__proto__ === Person.prototype   // true，可见两者是完全相同的
Person.__proto__ === Function.prototype // true,可见Person继承自Function