JS难点攻克--原型链

去伪存真
893 阅读4分钟

前言

一直对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');

// 内置原型
console.log(f.__proto__ === Bar.prototype); // true

内置原型__proto__

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

原型和构造函数 (2).png

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

image.png

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

image.png

prototype和constructor的关系

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

原型和构造函数 (1).png

__proto__ 、prototype和 constructor关系

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

内置原型.png

小测验

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

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()和Male.print()都没有执行new操作,是构造器调用而非实例调用。

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

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

而Man.__proto__上没有age的定义，尽管Man构造器定义了age属性，可是因为没有执行new操作，所以Man.print() 中的this上下文指代的是Man.__proto__而非Man, 因为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是new出来的实例对象，调用 new 关键字时，主要做了以下4件事情:

  1. 创建一个新的空对象
  2. 执行构造函数，并将空对象的 this 绑定为构造函数的 this
  3. 将空对象的 __proto__ 指向构造函数的 prototype
  4. 如果构造函数手动返回了一个对象，则返回这个对象，否则返回新创建的对象

man1.print()的执行过程是：首先查找man1自身有没有print方法，没有找到，接着去man1的构造函数Man上查找有没有print方法，还是没有找到，于是沿着内置原型链去找，在man1.__proto__指向的构造函数原型对象Man.prototype上没找到print方法, 继续顺着Man.prototype的内置原型__proto__去找, Man.prototype.__proto__指向Object.prototype ， Object.prototype上也没有，继续沿着Object.prototype的内置原型__proto__找， Object.prototype.__proto__指向内置原型链的末端null,null上肯定没有print方法，等于说找遍了内置原型链，也没找到print方法, 所以执行报错，错误如下：

Uncaught TypeError: man1.print is not a function

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

avatar
文章
阅读
粉丝