JS难点攻克--原型链

前言

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

JS原型链

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

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

js 复制代码
// 构造函数
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__的指向关系。

小测验

做做下面这道题,检测一下学习效果:

js 复制代码
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方法定义:

js 复制代码
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, 也就是

js 复制代码
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,也没找到,所以执行报错:

js 复制代码
Uncaught TypeError: man1.print is not a function

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

相关推荐
拆房老料9 分钟前
【第四部分:Agentic 智能体设计模式】16. 一个 Prompt 搞不定复杂任务?试试 Prompt Chaining
java·前端·人工智能·设计模式·prompt
曹牧5 小时前
C#:空合并运算符
java·前端·数据库
小羊没烦恼!6 小时前
铁道部新客票系统设计(二)
开发语言·前端·数据库·python·oracle·c#·php
智能直播9 小时前
RK3518:1.5G 内存 + 8G 存储,如何跑起硬件编解码、Web、AI 识别、绿幕特效
前端·人工智能·5g
掘金酱10 小时前
【10.24 特别活动】AI 时代,程序员的新饭碗在哪里?
前端·人工智能·后端
excel10 小时前
多进程环境下使用 PM2 部署 Socket.IO:需要注意什么
前端
IT_陈寒10 小时前
Redis的原子性竟然失效了?记一次分布式锁翻车实录
前端·人工智能·后端
_菜鸟果果12 小时前
高德地图 JS API 2.0 在国产 Linux/ARM 电脑上渲染失败 的排查与解决
linux·开发语言·javascript
时间的情敌12 小时前
《回顾 2018 前端:Vue2 成熟期,Webpack4 发布,PWA 大火》
前端