JS难点攻克--原型链

前言

一直对原型链这一块，感到比较晦涩。理解起来比较困难不说，实际业务还很少用到。每次看完之后，没多久就忘了。针对这种特点的知识点，就得花时间梳理一下，做成在线笔记。需要用的时候，查看一下在线文档，现在我们进入正题。

JS原型链

js对象通过键名查找对象属性值的过程是：首先会从对象自身属性开始查找，如果查不到就会去原型对象__proto__中去查找，如果原型对象也没有就会把当前的原型对象当作实例对象，继续通过__proto__去当前原型对象的原型对象中去找，由此形成一条链条，直到在__proto__链条上中找到或__proto__的指向为null时停止；要想搞清楚原型链，就得理清 __proto__ 、prototype和 constructor三者的关系。

结合下面的例子，我们梳理一下 __proto__ 、prototype和 constructor的关系。

// 构造函数
function Bar(){
    this.name=name;
}

// 原型对象
Bar.prototype.say=function(){
    console.log(this.name);
}
// 实例对象
const f=new Bar('bar1');

内置原型__proto__

每个实例对象（本例是f）都有内置原型__proto__，指向了创建该对象的构造函数原型(本例中是Bar.prototype)。构造函数原型也有内置原型__proto__（本例是Object.prototype），这条链条的终点是null。通过 __proto__ 将对象和原型联系起来组成原型链，就可以扩展对象的属性。JS内置的构造函数Object，Function,Array,String,Number,Boolean,Date,RegExp,Error的__proto__都是Function.prototype。而Function.prototype指向Object.prototype,如下图所示：

而Object.prototype具有的方法和属性如下图所示：

根据原型链查找原理，JS内置的9大构造函数生成的实例对象，应该都有这些方法和属性。这里用Boolean类型的实例对象验证一下JS内置的构造函数是不是具有Object.prototype的toString方法。如下图所示，确实有。

prototype和constructor的关系

上面我们看到,Object.prototype打印输出了一个constructor属性，这个属性指向哪里呢? 答案是Object构造器。constructor指向的都是构造函数。prototype指向函数的原型对象，只有函数才有该属性。

__proto__ 、prototype和 constructor关系

__proto__ 、prototype和 constructor的关系，是上面两幅图的叠加，感觉prototype和 constructor的关系还是很好理清，主要是加入__proto__关系之后，关系图看着有点不清晰了。所以重点是要理解__proto__的指向关系。

小测验

做做下面这道题，检测一下学习效果：

function Man(){
   this.age= 20;
}

function Male() {
   this.age= 25;
}

Man.__proto__.print = function(){ 
   console.log(this.age);
}

Man.print();
Male.print(); 

var man1 = new Man();
man1.print();

Man.print()的执行过程是：Man构造函数上并没有print方法,所以去Man的内置原型__proto__去找,找到了print方法定义:

Man.__proto__.print = function(){ 
   console.log(this.age);
}

而Man.__proto__上没有age的定义，所以Man.print()执行之后输出undefined;

---

Male.print()的执行过程是：Male构造函数上并没有print方法, 所以去Male的内置原型__proto__去找, 从文中的第一幅图可以看出 ，Male.__proto__和Man.__proto__都指向Function.prototype, 也就是

Man.__proto__ === Function.prototype === Male.__proto__

Man.__proto__定义了print方法, 所以在Male.__proto__上能找到print方法, 而Male.__proto__, Man.__proto和Function.prototype都没有定义age属性， 所以Male.print()执行之后输出undefined;

---

man1.print()的执行过程是：man1构造函数原型对象Man.prototype上并没有print方法, 所以去Man.prototype的内置原型__proto__去找, Man.prototype.__proto__指向Object.prototype ， Object.prototype上也没有，继续沿着Object.prototype.__proto__找， 找到了__proto__内置原型链的末端null,也没找到，所以执行报错：

Uncaught TypeError: man1.print is not a function

这个小测验中的三道题你都做对了吗？如果没有完全做对，再回头看看原文，尤其是内置原型那幅图。