JavaScript原型与原型链深入理解_javascript核心

答案:JavaScript通过原型和原型链实现继承,构造函数的prototype指向原型对象,实例的__proto__指向构造函数的prototype,形成查找链条。当调用方法时,先在实例查找,若未找到则沿原型链向上搜索,直到Object.prototype为止;修改原型可影响所有实例,体现动态继承机制。

javascript原型与原型链深入理解_javascript核心

JavaScript 的原型与原型链是理解语言对象机制的核心。很多人初学时会被 prototype__proto__constructornew 搞得晕头转向,其实只要理清它们之间的关系,就能掌握 JS 面向对象的底层逻辑。

原型(Prototype)是什么?

在 JavaScript 中,函数天生拥有一个名为 prototype 的属性,它是一个对象,用于存放可以被实例继承的属性和方法。这个属性只存在于函数上,尤其是构造函数。

例如:

function Person(name) {  this.name = name;}Person.prototype.sayHello = function() {  console.log("Hello, I'm " + this.name);};const p1 = new Person("Alice");p1.sayHello(); // 输出: Hello, I'm Alice

这里,sayHello 并没有定义在 p1 实例上,而是通过原型被访问到。每个通过 new Person() 创建的实例都能共享这个方法。

立即学习“Java免费学习笔记(深入)”;

__proto__ 与原型链的连接

每个 JavaScript 对象都有一个内部属性 [[Prototype]],在大多数浏览器中可通过 __proto__ 访问(不推荐直接使用,但有助于理解)。这个属性指向创建该对象的构造函数的 prototype 对象。

继续上面的例子:

console.log(p1.__proto__ === Person.prototype); // trueconsole.log(Person.prototype.__proto__ === Object.prototype); // trueconsole.log(Object.prototype.__proto__); // null

这形成了一条链条:从实例 p1 向上查找,先找自身属性,找不到就去 Person.prototype,再找不到就去 Object.prototype,最后到 null 结束。这条链就是原型链

构造函数、原型、实例三者的关系

记住这个核心公式:

实例的 __proto__ 指向构造函数的 prototype 构造函数的 prototype 是一个对象,包含可共享的方法和属性 构造函数的 prototype.constructor 默认指向该构造函数本身

图示关系如下:

p1.__proto__ === Person.prototypePerson.prototype.constructor === PersonPerson.prototype.__proto__ === Object.prototype

当你调用 p1.toString(),虽然 p1 没有定义,Person.prototype 也没有,但 Object.prototype 有,所以能成功调用——这就是原型链的查找机制。

深入理解继承的本质

JavaScript 的继承不是基于类的复制,而是通过原型链实现的动态查找。这种机制带来了灵活性,也容易造成误解。

比如,修改原型会影响所有实例:

Person.prototype.age = 25;console.log(p1.age); // 25

即使实例已经创建,也能访问新增的属性,因为查找是在运行时沿着原型链进行的。

但要注意:如果在实例上添加同名属性,会屏蔽原型上的值:

p1.age = 30;console.log(p1.age); // 30(来自实例)console.log(Person.prototype.age); // 25(原型未变)

基本上就这些。原型和原型链不是魔法,而是 JS 对象系统的基础设计。搞懂了 prototype__proto__ 和对象查找机制,你就掌握了 JavaScript 动态继承的钥匙。

以上就是JavaScript原型与原型链深入理解_javascript核心的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1533791.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 01:03:19
下一篇 2025年12月21日 01:03:33

相关推荐

  • 如何使用 JavaScript 启用/禁用 HTML 按钮

    本教程旨在解决在使用 JavaScript 控制 HTML 按钮的启用和禁用状态时遇到的常见问题。我们将通过一个实际示例,详细讲解如何根据文本框的输入内容动态地控制按钮的状态,确保代码逻辑正确,并提供排查问题的思路。 理解 HTML 按钮的 disabled 属性 HTML 按钮的 disabled…

    2025年12月21日
    000
  • JavaScript 代码分割:动态导入实现按需加载

    动态导入指使用import()函数在运行时异步加载模块,返回Promise,实现按需加载。构建工具识别import()并拆分代码为独立chunk,用于路由级、功能级或第三方库分割。例如点击按钮或进入页面时才加载对应模块,减少首屏体积。结合懒加载可显示加载状态,提升用户体验。需注意避免过度分割、命名c…

    2025年12月21日
    000
  • 使用JS实现一个简单的状态管理库_javascript状态管理

    答案:该文章介绍了一个基于发布-订阅模式的极简状态管理库实现,包含state、getters、mutations和actions四大核心功能。通过Proxy实现响应式数据监听,状态变更时自动触发订阅回调,支持同步提交与异步操作,并提供了getter计算属性和订阅机制。代码简洁,适用于学习原理或小型项…

    2025年12月21日
    000
  • JavaScript可选链操作符安全访问

    可选链操作符(?.)提供了一种安全访问嵌套属性的方式,能避免因对象节点为null或undefined导致的错误;例如user?.address?.city在address不存在时返回undefined而非报错;它支持属性访问obj?.prop、动态键名obj?.[expr]和函数调用func?.(a…

    2025年12月21日
    000
  • JavaScript防抖与节流函数原理与实现_javascript性能优化

    防抖和节流是前端优化高频事件的两种手段。防抖通过延迟执行,仅在事件停止触发后执行一次,适用于搜索联想等场景;节流则以固定频率执行,适合滚动监听等需定期响应的场景。两者均通过控制函数执行频率提升性能。 在前端开发中,频繁触发的事件(如窗口滚动、输入框输入、鼠标移动等)会带来性能问题。为了解决这类问题,…

    2025年12月21日
    000
  • JavaScript Source Map调试映射技术

    Source Map是映射压缩代码与原始源码位置关系的JSON文件,包含sources、names、mappings等信息,通过构建工具生成并在浏览器中加载,实现错误堆栈和断点的还原,提升调试效率;生产环境建议上传至私有服务器以兼顾错误追踪与代码安全。 前端开发中,JavaScript 经常会被压缩…

    2025年12月21日
    000
  • JavaScript服务器端Node.js架构

    Node.js基于V8引擎实现服务端JavaScript运行,采用事件驱动、非阻塞I/O模型,适合高并发实时应用;其核心架构包括单线程事件循环、libuv异步处理、CommonJS模块系统;常见模式有MVC、分层、微服务及中间件管道;技术栈涵盖Express/Koa/NestJS框架、npm/yar…

    2025年12月21日
    000
  • 前端实现可访问性(ARIA)的JavaScript支持_js无障碍

    答案:JavaScript与ARIA结合可提升前端可访问性,通过动态更新aria属性、管理焦点与键盘导航,实现菜单、模态框、实时区域等组件的无障碍支持,关键在于状态同步与语义化增强。 在现代前端开发中,实现可访问性(Accessibility,简称 a11y)是确保所有用户,包括使用辅助技术(如屏幕…

    2025年12月21日
    000
  • React Native中高效下载和管理大量PDF文件以实现离线访问

    本教程将指导如何在react native应用中高效下载和本地存储大量pdf文件,以支持离线访问。我们将探讨使用`react-native-blob-util`进行文件下载,并结合`react-native-fs`进行本地文件系统管理,包括目录创建、文件移动和更新策略,确保应用能稳定处理百余个pdf…

    2025年12月21日
    000
  • JavaScript计算机视觉开发

    JavaScript在计算机视觉中应用广泛,主要通过TensorFlow.js实现模型推理与训练,结合WebRTC获取视频流,利用Canvas进行实时图像处理,并借助OpenCV.js执行传统算法。典型应用包括人脸检测、手势识别、OCR文字提取及背景虚化,常用模型如BlazeFace、Hand Po…

    2025年12月21日
    000
  • ECMAScript 规范中的 for 循环:深入理解其执行机制与作用域管理

    本文深入探讨了 ECMAScript 规范中 `for` 循环的执行机制,重点解析了其如何通过词法环境(LexicalEnvironment)管理作用域,特别是 `let` 和 `const` 声明的变量如何为每次迭代创建独立的绑定。我们将剖析 `ForLoopEvaluation`、`ForBod…

    2025年12月21日
    000
  • 前端工程化与JavaScript构建流程自动化

    前端工程化通过标准化和自动化提升开发效率与协作能力,核心是JavaScript构建流程的自动化。1. 模块化处理:使用ES Module或CommonJS规范组织代码,由Webpack、Vite等工具进行依赖解析与打包;2. 语法转换:通过Babel将ES6+转为ES5以兼容旧浏览器;3. 代码压缩…

    2025年12月21日
    000
  • ECMAScript 规范深度解析:for 循环的词法环境与迭代机制

    本文深入探讨了 ecmascript 规范中 `for` 循环的内部工作机制,特别是其如何通过词法环境(lexicalenvironment)实现 `let` 和 `const` 变量的块级作用域。我们将解析 `forloopevaluation`、`forbodyevaluation` 和 `cr…

    2025年12月21日
    000
  • JavaScript事件循环与微任务队列

    JavaScript通过事件循环实现异步,先执行同步代码,再处理回调;宏任务(如setTimeout)每轮取一个,微任务(如Promise.then)在宏任务后立即清空。输出顺序为1→4→3→2,因微任务优先级高;但滥用微任务可能阻塞UI更新或引发“微任务风暴”,需合理选择执行时机。 JavaScr…

    2025年12月21日
    000
  • 使用JavaScript实现一个简单的虚拟DOM_javascript框架原理

    虚拟DOM通过JS对象描述DOM结构,利用h函数创建VNode,render函数生成真实DOM,patch函数对比新旧节点实现最小化更新,提升频繁UI操作的性能。 虚拟DOM的核心思想是用JavaScript对象来描述真实DOM结构,通过对比新旧虚拟DOM的差异,最小化地更新真实DOM。这种方式能显…

    2025年12月21日
    000
  • 前端长列表渲染性能优化方案_js性能优化

    虚拟滚动通过仅渲染可视区域内容,显著减少DOM数量,提升长列表性能;结合分页或懒加载降低初始负载,利用元素池化复用节点,并将计算任务移至Web Worker,避免主线程阻塞,确保流畅交互。 前端长列表在数据量大时容易导致页面卡顿、内存占用过高,影响用户体验。核心问题是浏览器需要渲染大量 DOM 节点…

    2025年12月21日
    000
  • JavaScript实现前端导出Excel表格_javascript实战

    使用SheetJS库可实现前端导出Excel,支持JSON数据或HTML表格转换,通过XLSX.utils.json_to_sheet生成工作表,XLSX.writeFile触发下载,兼容中文字段并可设置列宽、合并单元格等基础样式,结合FileSaver.js可提升浏览器兼容性,适用于报表系统等场景…

    2025年12月21日
    000
  • JavaScript 无法禁用 HTML 按钮?原因及解决方案

    本文旨在解决 JavaScript 无法正确禁用或启用 HTML 按钮的问题。通过分析常见错误原因,提供详细的代码示例和调试技巧,帮助开发者轻松实现按钮的动态控制,提升用户交互体验。文章重点讲解了`disabled`属性的正确用法,以及如何结合输入框内容动态控制按钮状态。 在 Web 开发中,经常需…

    2025年12月21日
    000
  • JavaScript实现前端自动化构建流程_javascript工程化

    前端自动化构建通过Node.js与工具链提升开发效率,使用Webpack、Gulp等实现打包、压缩、编译,集成ESLint、测试及CI/CD部署,确保代码质量与流程可控。 前端自动化构建是现代JavaScript工程化的重要组成部分,它能帮助开发者提升开发效率、减少人为错误,并确保代码质量。通过Ja…

    2025年12月21日
    000
  • JavaScript中遍历对象的几种方式_javascript对象

    答案:JavaScript中遍历对象常用方法包括for…in、Object.keys()、Object.values()、Object.entries()、Object.getOwnPropertyNames()和Reflect.ownKeys(),每种方法适用不同场景。 在JavaSc…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信