JS难点攻克--原型链

前言

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

JS原型链

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

结合下面的例子,我们梳理一下 __proto__prototypeconstructor的关系。

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内置的构造函数ObjectFunction,Array,String,Number,Boolean,Date,RegExp,Error__proto__都是Function.prototype。而Function.prototype指向Object.prototype,如下图所示:

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

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

prototypeconstructor的关系

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

__proto__prototypeconstructor关系

__proto__prototypeconstructor的关系,是上面两幅图的叠加,感觉prototypeconstructor的关系还是很好理清,主要是加入__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.__protoFunction.prototype都没有定义age属性, 所以Male.print()执行之后输出undefined;


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

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

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

相关推荐
小小尚@13 分钟前
WebGIS/ECharts 地图开发|MapLand 在线行政区划边界一键下载 GeoJSON 工具
前端·javascript·echarts
葡萄城技术团队18 分钟前
工业数据可视化:使用活字格 AIcoding + Three.js 构建轻量化三维设备监控大屏
开发语言·javascript·信息可视化
默_笙1 小时前
🚍 一条 Todo 的奇幻漂流:TypeScript 全栈类型安全的"护照检查"
前端·javascript
计算机魔术师1 小时前
NVIDIA 以 129.3 亿美元收购 Hugging Face
前端
平头哥技术团队1 小时前
Day 01 | 用 HTML 写第一个网页:双击就能在浏览器打开
前端
weixin_422555422 小时前
el-menu子菜单点击就被激活,恢复之前的激活状态
javascript·vue.js·elementui
计算机魔术师2 小时前
两年翻45倍!英伟达靠买买买建成千亿投资帝国
前端
paopaokaka_luck2 小时前
基于springboot3+vue3的精准扶贫管理系统(AI 问答、ECharts 图形化分析)
前端·人工智能·echarts
l1m0_3 小时前
智能电动自行车管理后台实战:AI生成页面与React组件化技巧
前端·react.js·ui·ai·设计
Patrick_Wilson3 小时前
为什么gitlab的MR会默认有一个merge commit
前端·git·gitlab