javascript_原型链的工作原理

原型链是JavaScript实现继承和属性查找的核心机制,当访问对象属性时,若自身不存在,则沿[[Prototype]]链向上查找直至null;每个函数有prototype指向原型对象,对象通过__proto__(推荐用Object.getPrototypeOf)指向其构造函数的prototype,从而形成链式结构;例如p → Person.prototype → Object.prototype → null;属性查找基于此链进行,修改原型可动态扩展功能,如为Array.prototype添加myPush则所有数组可用;instanceof通过检查构造函数的prototype是否在对象原型链上来判断类型。

javascript_原型链的工作原理

JavaScript 的原型链是实现对象继承和属性查找的核心机制。当访问一个对象的属性时,JavaScript 引擎会先在该对象自身查找,如果找不到,就会沿着原型链向上查找,直到找到属性或到达原型链末端(null)为止。

原型与 prototype 属性

每个函数在创建时都会自动生成一个 prototype 属性,这个属性指向一个对象,称为“原型对象”。这个原型对象默认包含一个 constructor 属性,指向原函数。

而每个对象(除部分特殊情况外)都有一个内部属性 [[Prototype]],可以通过 __proto__ 访问(现代开发中推荐使用 Object.getPrototypeOf())。这个 [[Prototype]] 指向其构造函数的 prototype 对象。

例如:

当你用构造函数创建一个新对象时,这个对象的 [[Prototype]] 就会链接到构造函数的 prototype。

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

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(“Hello, ” + this.name);
};

const p = new Person(“Alice”);
p.sayHello(); // 输出: Hello, Alice

这里 p 自身没有 sayHello 方法,但 JavaScript 会在 Person.prototype 中找到它。

原型链的形成

原型链的本质是一连串通过 [[Prototype]] 连接的对象。当一个属性在当前对象找不到时,就会去它的原型上找,如果原型上也没有,就继续查找原型的原型,直到某一步的原型为 null 为止。

所有普通对象的最终原型通常是 Object.prototype,而它的 [[Prototype]] 是 null,标志着链的结束。

常见的原型链结构:p → Person.prototype → Object.prototype → null 数组实例:arr → Array.prototype → Object.prototype → null 函数:fn → Function.prototype → Object.prototype → null

属性查找与继承

JavaScript 的继承基于原型链实现。子对象能访问父对象原型上的方法和属性,这就是“原型继承”。

可以通过修改原型来动态扩展已有对象的功能。

比如:

Array.prototype.myPush = function(val) {
  this[this.length] = val;
  return this.length;
};

所有数组都可以使用 myPush 方法,因为它们的原型链都指向 Array.prototype。

注意:给原型添加属性会影响所有继承该原型的对象,需谨慎操作。

instanceof 与原型链

instanceof 运算符就是通过原型链判断对象是否由某个构造函数创建的。

p instanceof Person 实际是检查 Person.prototype 是否出现在 p 的原型链上。

如果在链中找到匹配的 prototype,返回 true,否则 false。

基本上就这些。原型链让 JavaScript 实现了灵活的对象继承机制,理解它有助于掌握对象行为和属性查找逻辑。不复杂但容易忽略细节。

以上就是javascript_原型链的工作原理的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 12:31:30
下一篇 2025年12月21日 12:31:43

相关推荐

  • JavaScript对象按值排序:深入理解与最佳实践教程

    本教程深入探讨了在JavaScript中对带有数字键的对象按值进行排序的挑战与解决方案。文章解释了JavaScript对象(特别是数字键)的排序特性,并强调了将对象转换为数组进行排序的最佳实践。通过提供详细的代码示例,教程展示了如何将对象转换为键值对数组或语义化对象数组进行排序,以满足在前端展示有序…

    2025年12月21日
    000
  • 在React组件中实现大文本内容滚动至指定位置的教程

    本教程详细介绍了如何在react组件中处理大量文本的渲染与高亮,并实现滚动到特定文本的功能。文章涵盖了react组件的文本映射、使用第三方高亮库、以及通过vanilla javascript进行dom操作来计算元素位置并实现平滑滚动的集成方案,最终提供了一个完整的react类组件示例,展示了如何结合…

    2025年12月21日
    000
  • 正则表达式高级技巧_匹配复杂模式的实战案例

    掌握高级正则技巧可精准处理嵌套结构、上下文匹配与复杂验证。1. 用递归或模拟平衡组提取括号内容,如Python的regex模块支持(?R)匹配func(a(b(c), d), e)中最外层参数;2. 零宽断言实现上下文过滤,如(? 处理复杂文本时,基础的正则表达式往往不够用。真正体现功力的是在真实场…

    2025年12月21日
    000
  • JavaScript中高效筛选数组:实现多条件过滤(奇数与指定位数)

    本文详细阐述了如何在javascript中高效地筛选数组,以找出同时满足多个特定条件的元素。通过分析传统循环方法的不足,文章重点介绍了如何利用`array.prototype.filter()`方法结合逻辑运算符,简洁而准确地筛选出奇数且位数为六的数字,并强调了在处理数字长度时进行类型转换的重要性。…

    2025年12月21日
    000
  • JavaScript WebGL_javascript三维图形

    WebGL是基于JavaScript的3D图形API,通过canvas调用GPU渲染图形。它基于OpenGL ES 2.0,使用GLSL编写顶点和片段着色器处理图形渲染。首先获取canvas的WebGL上下文,设置视口和清屏颜色。然后定义顶点数据并传入GPU缓冲区,编写着色器程序并链接到着色器程序。…

    2025年12月21日
    000
  • JavaScript日期时间操作_JavaScript时间处理指南

    JavaScript中使用原生Date对象可创建、获取、格式化日期时间,通过get方法提取信息,手动拼接或toLocaleString()格式化,相减计算时间差,set方法设置偏移,比较大小直接用关系运算符,处理时区建议用UTC方法和ISO格式时间字符串,也可引入date-fns等库优化操作。 Ja…

    2025年12月21日
    000
  • JavaScriptRollup配置_JavaScript模块打包方案

    Rollup适合打包JavaScript模块因其支持Tree Shaking、输出多种模块格式并兼容ES6。它通过rollup.config.js配置入口与出口,结合resolve和commonjs等插件处理依赖,实现高效代码打包;多格式输出可同时生成es、cjs、umd文件,并通过package.…

    2025年12月21日
    000
  • 代理与反射API应用_实现数据绑定与验证

    通过Proxy和Reflect实现数据绑定与验证,可高效构建响应式界面:1. 使用Proxy拦截属性读写,实现双向绑定;2. 结合Reflect确保操作一致性;3. 在set中集成校验逻辑,实时反馈错误信息。 在现代前端开发中,数据绑定与验证是构建响应式用户界面的核心需求。借助 JavaScript…

    2025年12月21日
    000
  • javascript_ES6新特性详解

    ES6引入let/const实现块级作用域,箭头函数简化语法并绑定外层this,模板字符串支持嵌入变量,解构赋值提取数据,默认与剩余参数优化函数设计,扩展运算符操作数组对象,模块化支持import/export,class语法实现继承,Promise处理异步,Map/Set提供新数据结构。 ES6(…

    2025年12月21日
    000
  • 类型检查工具对比_TypeScript与Flow的集成方案

    TypeScript 更适合新项目和追求长期可维护性的团队,因其独立编译、完整类型系统和强大生态支持;Flow 以注释驱动、低侵入性适合渐进迁移旧项目,但工具链和社区活跃度较弱。1. TypeScript 初始化简单,配置清晰,集成度高;2. Flow 对现有 JS 项目影响小,无需修改构建流程;3…

    2025年12月21日
    000
  • JavaScript缓冲区_javascript内存操作

    JavaScript通过ArrayBuffer实现二进制数据操作,需配合TypedArray或DataView使用;TypedArray提供带类型视图(如Uint8Array),支持高效读写;DataView支持字节序控制,适用于网络协议解析;广泛用于文件处理、WebSocket、Canvas、We…

    2025年12月21日
    000
  • JavaScript模板引擎_javascript动态渲染

    JavaScript模板引擎是将数据与HTML分离并动态生成页面内容的工具,支持变量、条件和循环,适用于列表渲染、组件构建等场景;常见库包括Handlebars、Mustache、Underscore/Lodash模板和EJS,各自适用于复杂逻辑或轻量项目;可通过正则实现简易原生模板替换,但复杂结构…

    2025年12月21日
    000
  • JavaScript函数式编程_JavaScript现代开发模式

    函数式编程通过纯函数、不可变数据和函数组合提升%ignore_a_1%与可维护性。1. 纯函数确保输入输出一致且无副作用,便于测试;2. 使用高阶函数如map、filter、reduce实现逻辑复用,结合compose进行函数组合;3. 采用展开运算符、concat等方法保持数据不可变;4. 在Re…

    2025年12月21日
    000
  • JavaScript算法实现_JavaScript编程能力训练

    掌握JavaScript算法需从基础题入手,理解逻辑并动手实践。重点包括字符串操作、数组遍历、回文判断、斐波那契数列;进阶掌握栈、队列、哈希表及递归应用;通过LeetCode、Codewars等平台每日练习,结合调试优化,提升效率与思维能力。 JavaScript算法实现是提升编程能力的关键环节。掌…

    2025年12月21日
    000
  • JavaScriptSessionStorage_JavaScript客户端存储

    SessionStorage是JavaScript提供的临时存储机制,用于在单个浏览器标签页会话期间保存数据,关闭标签页后自动清除。它遵循同源策略,存储容量为5-10MB,仅以字符串形式保存键值对,需用JSON转换复杂数据类型。主要操作包括setItem、getItem、removeItem和cle…

    2025年12月21日
    000
  • JavaScript面向对象编程_javascript核心技术

    JavaScript面向对象编程基于构造函数和原型,ES6引入class语法糖使写法更直观。1. 构造函数用于初始化实例,prototype存储共享方法;2. class中的constructor初始化属性,其他方法挂载到原型;3. 使用extends实现继承,super调用父类构造函数;4. st…

    2025年12月21日
    000
  • 掌握JavaScript模块化_javascript工程实践

    JavaScript模块化通过拆分代码为独立单元提升可维护性与复用性,解决全局污染与依赖混乱问题;采用ES6模块语法实现作用域隔离、明确依赖,并支持懒加载;结合Webpack、Vite等工具处理不同环境下的模块解析与优化,需避免循环依赖并合理组织功能驱动的项目结构,持续演进以构建清晰可控的代码体系。…

    2025年12月21日
    000
  • JavaScript测试驱动开发_javascript质量保证

    测试驱动开发(TDD)是一种先写测试用例再实现功能的开发方法,核心流程为“红-绿-重构”:首先编写一个失败的测试(红),然后编写最简代码使其通过(绿),最后优化代码结构并保持测试通过(重构)。在JavaScript项目中,TDD通过Jest、Mocha+Chai、Vitest或Cypress等工具实…

    2025年12月21日
    000
  • JavaScript事件委托机制_javascript事件处理

    事件委托利用事件冒泡机制,在父元素绑定监听器来处理子元素事件。通过在父级监听事件并检查event.target,可识别实际触发元素并执行对应操作,避免为每个子元素重复绑定。例如为ul绑定点击事件,判断e.target是否为li来统一处理列表项点击,即使后续动态添加的li也能生效。该技术减少内存占用、…

    2025年12月21日
    000
  • JavaScript动态导入功能_javascript模块加载

    动态导入是使用import()表达式在运行时按需加载模块,返回Promise,支持异步加载。适用于路由分割、条件加载等场景,提升性能。与静态导入的编译时同步加载不同,动态导入可在函数内调用,实现代码分割。需注意构建工具支持和错误处理。现代浏览器兼容性良好,配合Babel可支持旧环境。合理使用可优化加…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信