[js高手之路]一步步图解javascript的原型(prototype)对象,原型链

咱们接着上文继续，咱们经过原型方式，解决了多个实例的方法共享问题，接下来，咱们就来搞清楚原型(prototype)，原型链的前因后果.

1         function CreateObj(uName) {
2             this.userName = uName;
3         }
4         CreateObj.prototype.showUserName = function(){
5             return this.userName;
6         }
7         var obj1 = new CreateObj('ghostwu');
8         var obj2 = new CreateObj('卫庄');

1，每一个函数都有一个原型属性(prototype) ， 这个属性是一个指针，指向构造函数的原型对象( CreateObj.prototype)， 如上图中的第1根绿色的线

2，在默认状况下，全部原型对象都会自动得到一个constructor属性，该属性的做用上文已经解释过，该属性包含一个指向prototype属性所在的函数，如上图的第2根绿色的线

3，全部的实例( 经过构造函数new出来的， 原型对象[ 如CreateObj.prototype, 上图我尚未画出来]等 )都包含一个隐式原型(__proto__)，该指针指向实例的构造函数的原型对象,

如上图中的第3根线和第4根线. obj1的构造函数是CreateObj, CreateObj的原型对象是CreateObj.prototype, obj2同理，因此:

obj1.__proto__ === CreateObj.prototype //true

obj2.__proto__ === CreateObj.prototype //true

4，写在构造函数中， 为this赋值的属性和方法， 在画图的过程当中，把他们画在对象上面，如userName这个是给对象赋值的属性，因此在obj1和obj2这两个对象上都会存在一个属性userName

5，写在原型对象上的方法或者属性，应该把他们画在原型对象上，如

CreateObj.prototype.showUserName = function(){

return this.userName;

}

showUserName这个方法就要画在图中CreateObj.prototype上面

6，当一个对象访问属性和方法的时候，他的访问规则叫（就近原则）, 规则以下：

当实例上面，存在属性或者方法时，直接用实例上面的，

若是实例上面不存在属性和方法，就会沿着实例的__proto__指针指向的原型对象继续往上查找，若是找不到，值就是undefined.

console.log( obj1.showUserName() ); //ghostwu

console.log( obj2.showUserName() ); //卫庄

在obj1,obj2上面是不存在showUserName这个方法的，因此会顺着__proto__查找到CreateObj.prototype原型对象上的showUserName方法

若是，把CreateObj.prototype原型对象上的showUserName注释掉，那么obj1.showUserName和obj2.showUserName就会报错

// CreateObj.prototype.showUserName = function(){

// return this.userName;

// }

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function(){
 4                 return '100';
 5             }
 6         }
 7         CreateObj.prototype.showUserName = function(){
 8             return this.userName;
 9         }
10 
11         var obj1 = new CreateObj('ghostwu');
12         var obj2 = new CreateObj('卫庄');
13 
14         console.log( obj1.showUserName() ); //100
15         console.log( obj2.showUserName() ); //100

 若是在构造函数中为this添加一个showUserName方法， 那么obj1和obj2就会直接调用this上面的，由于这两个方法会被画在图中的实例上，因此：

console.log( obj1.showUserName === obj2.showUserName ); //false

如今，你应该能明白，把属性和方法写在构造函数的原型对象(prototype)上以后，能实现多个实例属性和方法的共享的原理了吧

 

什么是原型链?

在前面，我有说过，全部的实例（包括原型对象）都有一个隐式原型__proto__，那么CreateObj.prototype这个原型对象，他的__proto__指向谁呢？

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function () {
 4                 return '100';
 5             }
 6         }
 7         CreateObj.prototype.showUserName = function () {
 8             return this.userName;
 9         }
10 
11         console.log( CreateObj.prototype.__proto__ ); //指向Object.prototype
12         console.log( CreateObj.prototype.__proto__ === Object.prototype ); //true

CreateObj.prototype.__proto__指向的是Object.prototype, 经过 全等运算符 (===) 测试以后为true

Object.prototype.__proto__ 指向的是NULL

这就是原型链，经过隐式原型把一些构造函数层层的串起来，经过上面这个图，就知道，为何自定义的对象能调用toString, valueOf,等方法了吧？

由于全部的对象都是继承自Object.