快速搞懂『原型、原型链』【JavaScript基础专题】

掌握名称对应和它们的从属关系

  1. 对应名称
  • prototype: 原型
  • proto:原型链(原型的链接点)
  1. 从属关系
  • prototype -> 从属于函数,函数的原型属性,就是一个对象{}
  • proto ->Object的一个属性 也是一个对象{}
  • 对象的proto保存着该对象的构造函数的prototype

从属关系与原型链的基本认知

简单理解,原型链是什么? 原型链就是以一个对象为基准,以__proto__为连接的一个链条,一直到Object.prototype为止。

深入认识原型链、原型与原型链继承

举个例子 :创建一个Test函数,里面有a属性,值为1,通过Test.prototype.b=2,结果为:Test.prototype对应的__proto__也是一个对象,新增了一个b属性,值为2

这个链条长这样,顶层一直到Object.prototype 既然这样我们是否可以通过Object.prototype.c = 3增加一个c?

我们可以通过test对象之间访问到a,b,c。也就是说,我们能否访问到这些值,与是不是构造他的函数是没有关系的,也就是说并不是说我构造了你,你就只能继承我,我们可以通过原型继承,__proto__上保存了Test.prototype这个对象,这个对象里面有b...当我们在test里面找不到c的时候就会通过Test.prototype上去找,这个上面也找不到,我们就去Object.prototype上找,即:原型链可以从底层到高层一步步继承,当底层能够找到时,就不会再接着往上找了(沿着proto去找链上的任意一个原型属性,里面只要有我们要的值,就拿下来,没有就接着往上找)(原型链继承)

Function与Object的特殊性

Test底层是由Function构造来的,那么Test.proto也就全等于Function.prototype,Test的proto对应了他的原型

这里的Function的proto 全等于他的prototype是底层指定好了的

Object本身就是一个函数,因此这里他等于Function的prototype是合情合理的,据此我们就能推出

判断属性是否存在方法

hasOwnproperty方法看对象上是否有这个属性,ab本身有,c是通过继承来的

如果想看看链条上有没有呢? in

相关推荐
JavaGuide几秒前
Github 史诗级故障,与此同时,Cursor 版「GitHub」正式上线!
前端·后端
郭邯2 分钟前
用 AI 写了一个经纬度格式转换工具,从需求到落地的完整过程
前端
不一样的少年_4 分钟前
修了 Bug、做了重构,为什么老板还是觉得你没产出?
前端·后端·程序员
马可家的菠萝7 分钟前
Vue3 + Canvas 手绘笔记工程化实践:别把画布只当成一张 PNG
前端·vue.js·算法
IMPYLH15 分钟前
HTML 的 <h1>–<h6> 元素
前端·javascript·html
IMPYLH18 分钟前
HTML 的 <head> 元素
前端·html
卸任38 分钟前
AI英语学习助手:从翻译工具到 AI 英语学习助手
前端·electron
计算机魔术师39 分钟前
A股人形机器人第一股来了!宇树科技8月19日上市,一签或赚20万
前端
PedroQue991 小时前
Vue Router 4.x风格导航守卫全面升级
前端·uni-app
cindershade1 小时前
前端大文件上传完整方案:分片上传、断点续传、秒传与失败重试
前端