当前位置: 首页 > news >正文

js原型链原理与查找机制

JavaScript中的原型链是实现继承的机制,它是基于对象的。每个对象都有一个内部指针(proto),指向它的原型对象(prototype)。原型对象也是一个对象,同样具有自己的原型对象,形成一个链式结构,称为原型链。

原型链的作用是在查找对象属性时,先从对象本身查找,如果找不到,则沿着原型链向上查找,直到找到该属性或者原型链的顶端(Object.prototype)为止。

原型链的查找机制是从下往上查找,即先从对象本身查找属性,如果找不到,则沿着原型链向上查找。如果最终还找不到,则返回undefined。

下面是一个详细解析和代码示例:

// 定义一个对象
var obj = {name: "John",age: 25
};// 使用 Object.create() 方法创建一个新对象,并将 obj 设置为它的原型对象
var newObj = Object.create(obj);// 在 newObj 中添加一个属性
newObj.gender = "Male";// 查找属性
console.log(newObj.name); // 输出: "John",从原型链上找到了属性console.log(newObj.age); // 输出: 25,从原型链上找到了属性console.log(newObj.gender); // 输出: "Male",在对象本身找到了属性console.log(newObj.address); // 输出: undefined,无法在对象本身和原型链上找到属性

在上面的代码中,我们定义了一个对象 obj,然后使用 Object.create(obj) 创建了一个新的对象 newObj,并将 obj 设置为它的原型对象。在 newObj 中,我们添加了一个属性 gender

在查找属性时,我们先从对象本身查找 name 属性,但是在 newObj 中并没有找到,于是沿着原型链向上查找,在 obj 中找到了 name 属性,并输出了结果。

同样地,查找 age 属性时,在 newObj 中找不到,于是沿着原型链向上查找,在 obj 中找到了 age 属性,并输出了结果。

而在查找 gender 属性时,在 newObj 中找到了,所以直接输出了结果。

最后,查找 address 属性时,在 newObj 和原型链上都找不到,所以返回了 undefined。

通过以上的示例和解析,可以看出 JavaScript 的原型链是一种非常灵活和强大的继承机制,它使得我们可以在对象之间共享属性和方法,并且可以简化代码的编写。

相关文章:

  • 2024年十大数据集成工具和软件应用场景解析
  • 将Typora中图片从指定路径移动到当前文件夹下(准确位置为:XX.md文件所在目录/XX.assets/)
  • 如何正确操作工业高温烤箱
  • 谷粒商城实战(042集群学习-mysql集群-主从同步)
  • ChatGPT原理及其应用场景
  • 【Sa-Token|1】Sa-Token使用教程
  • 【LocalDate】获取两个日期间相差的年数、月数、天数
  • 如何做电子骑缝章?
  • 代理配置SQUID
  • 在树莓派上查看资源使用情况
  • PaddleTS的时序预测模型模块模块
  • Android的布局有哪些?
  • Linux安装并配置Java
  • PostgreSQL性能优化之分区表 #PG培训
  • 琪朗护眼大路灯推荐入手吗?书客、琪朗、雷士落地灯测评大比拼!
  • 实现windows 窗体的自己画,网上摘抄的,学习了
  • 【前端学习】-粗谈选择器
  • 【刷算法】从上往下打印二叉树
  • angular组件开发
  • Java IO学习笔记一
  • java中的hashCode
  • Laravel 中的一个后期静态绑定
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • PHP那些事儿
  • vue-cli在webpack的配置文件探究
  • 浮动相关
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 计算机常识 - 收藏集 - 掘金
  • 蓝海存储开关机注意事项总结
  • 前端学习笔记之观察者模式
  • 全栈开发——Linux
  • 一个完整Java Web项目背后的密码
  • 用 Swift 编写面向协议的视图
  • 在Docker Swarm上部署Apache Storm:第1部分
  • ()、[]、{}、(())、[[]]命令替换
  • (02)vite环境变量配置
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (2)MFC+openGL单文档框架glFrame
  • (2024,Vision-LSTM,ViL,xLSTM,ViT,ViM,双向扫描)xLSTM 作为通用视觉骨干
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (ZT)一个美国文科博士的YardLife
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (搬运以学习)flask 上下文的实现
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (十一)图像的罗伯特梯度锐化
  • (四)Controller接口控制器详解(三)
  • (转)母版页和相对路径
  • .naturalWidth 和naturalHeight属性,
  • .net FrameWork简介,数组,枚举
  • .NET Framework杂记
  • .net MySql
  • .net 按比例显示图片的缩略图