JavaScript 原型链:理解原型继承与属性查找机制

JavaScript通过原型链实现继承,对象属性查找会沿原型链向上搜索。每个构造函数有prototype指向原型对象,实例通过__proto__链接到原型,共享其属性和方法。例如Person构造函数的原型添加greet方法,其实例john可调用该方法,实际访问的是Person.prototype中的定义。属性查找顺序为:先实例自身,再逐级向上遍历原型链,直至Object.prototype或null结束。修改原型会影响所有实例,体现动态性;但实例添加同名属性会屏蔽原型属性。ES6的class是语法糖,底层仍基于原型,可用Object.create()、Object.setPrototypeOf()等操作原型链。原型链本质是由__proto__连接的对象链,属性查找机制构成JavaScript继承核心。

javascript 原型链:理解原型继承与属性查找机制

JavaScript 的对象继承机制基于原型链,而不是像 Java 或 C++ 那样使用类继承。理解原型链是掌握 JavaScript 面向对象编程的关键。当你访问一个对象的属性时,JavaScript 引擎会先在该对象自身查找,如果找不到,就会沿着原型链向上查找,直到找到属性或到达原型链末端(null)为止。

原型与构造函数的关系

每个函数在 JavaScript 中都有一个 prototype 属性,这个属性指向一个对象,即“原型对象”。当用构造函数创建实例时,实例的内部会连接到该原型对象。

例如:

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

这里,johnPerson 的实例,它本身没有 greet 方法,但能调用该方法,是因为 JavaScript 在 john.__proto__(即 Person.prototype)中找到了它。

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

属性查找机制:沿原型链向上搜索

当你访问对象的一个属性时,JavaScript 执行以下步骤:

先检查对象自身是否拥有该属性(通过 Object.hasOwn()in 操作符可判断) 如果没有,就查找其原型(__proto__Object.getPrototypeOf(obj)) 如果原型中也没有,继续查找原型的原型,形成一条链 直到某一步原型为 null,查找结束,返回 undefined

例如:

console.log(john.toString()); // 调用的是 Object.prototype.toString

john 没有 toStringPerson.prototype 也没有,但它继承自 Object.prototype,所以能找到该方法。原型链结构如下:

john → Person.prototype → Object.prototype → null

修改原型会影响所有实例

因为所有实例共享同一个原型对象,修改原型会动态反映到所有实例上。

比如:

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

即使实例是在修改前创建的,也能访问新增属性。这体现了原型的动态性。

但要注意:给实例添加同名属性会屏蔽原型中的属性,不会修改原型。

john.greet = function() { console.log("Hi!"); };john.greet(); // Hi! (不再访问原型)

现代语法中的原型操作

ES6 提供了更清晰的操作方式:

class 语法只是语法糖,底层仍是原型 Object.create(proto) 可直接指定原型创建对象 Object.setPrototypeOf()Object.getPrototypeOf() 安全读写原型

例如:

const animal = { eats: true };const rabbit = Object.create(animal);console.log(rabbit.eats); // trueconsole.log(Object.getPrototypeOf(rabbit) === animal); // true

基本上就这些。原型链本质是一条由 __proto__ 连接的对象链条,属性查找就是从当前对象一步步往上找的过程。掌握这一点,就能理解 JavaScript 继承的核心逻辑。不复杂但容易忽略细节。

以上就是JavaScript 原型链:理解原型继承与属性查找机制的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 02:23:24
下一篇 2025年12月21日 02:23:39

相关推荐

  • JS错误处理怎么编写_JS trycatch异常捕获与处理方法详解

    JavaScript中通过try…catch捕获异常,结合finally清理资源、throw抛出自定义错误,并利用错误类型实现精准处理,异步操作则需配合async/await或Promise.catch(),确保程序稳定运行。 JavaScript 中的错误处理是保证程序稳定运行的重要环…

    2025年12月21日
    000
  • JavaScript中for…of与for…in循环区别_javascript技巧

    for…in遍历对象的可枚举属性名,包括继承属性,适用于对象;for…of遍历可迭代对象的值,如数组、字符串等,不适用于普通对象。 for…of 和 for…in 是 JavaScript 中两种不同的循环语法,虽然写法相似,但用途和行为有本质区别。理…

    2025年12月21日
    000
  • JS注解支持哪些类型_ JS注解支持的类型定义与分类说明

    JavaScript虽无原生注解,但通过Babel或TypeScript可使用实验性装饰器语法实现类、方法、属性、参数及访问器的装饰,广泛应用于Angular、NestJS等框架中。 JS本身并不原生支持“注解”(Annotation)语法,像Java或TypeScript中的装饰器(Decorat…

    2025年12月21日
    000
  • 如何创建一个表格排序插件_JavaScript表格排序功能插件开发与优化教程

    答案:通过创建TableSorter类实现表格排序插件,先绑定表头点击事件,再根据数据类型排序并更新DOM,最后优化性能。 实现一个轻量高效的 JavaScript 表格排序插件,关键在于结构清晰、兼容性强和易于扩展。以下是一个完整的开发与优化教程,帮助你从零开始构建一个实用的表格排序功能插件。 插…

    2025年12月21日
    000
  • 使用Shadow DOM实现样式封装

    Shadow DOM是Web Components标准的一部分,通过创建独立的DOM树实现样式和结构的隔离。使用Element.attachShadow()方法可将Shadow DOM附加到元素上,并通过mode属性控制访问权限。示例中定义了MyComponent类,在constructor中创建S…

    2025年12月21日 好文分享
    000
  • 使用JavaScript实现语音识别与合成_Web API

    首先实现语音识别,通过webkitSpeechRecognition捕获用户语音并转文本,需设置语言、监听结果与错误事件;再实现语音合成,利用SpeechSynthesisUtterance将文本转语音,可配置语言、语速、音调等参数,并通过speak()播放。 语音识别与合成在现代Web应用中越来越…

    2025年12月21日
    000
  • JavaScript与Spring事件机制结合的使用方法

    JavaScript与Spring事件机制通过HTTP、WebSocket或消息队列实现间接结合。1. REST API:前端触发请求,Spring接收后发布事件并处理;2. WebSocket:Spring通过STOMP向JS推送事件,实现双向通信;3. 消息中间件:Spring将事件发至Kafk…

    2025年12月21日
    000
  • JavaScript LocalStorage存储限制

    LocalStorage存储限制因浏览器而异,通常为5MB,Chrome、Firefox、Edge等支持约5MB每源,Safari在隐私模式可能禁用,iOS Safari限制更严,IE8+为10MB但行为不一;超出限制会触发QuotaExceededError异常,因此调用setItem时应使用tr…

    2025年12月21日
    000
  • js数组中reduce的用法

    reduce方法用于将数组归并为单一值,通过回调函数累计结果,常用于求和、计数、扁平化等场景。 reduce 是 JavaScript 数组中的一个高阶方法,用于将数组的所有元素“归并”成一个单一的值。它通过依次处理每个元素,并累计一个结果,非常适合用来求和、计数、扁平化数组等场景。 基本语法 ar…

    2025年12月21日
    000
  • 使用JavaScript实现一个简单的依赖注入_js架构

    答案:依赖注入容器通过外部传入依赖实现解耦,JavaScript 实现包含注册、解析功能,支持单例与嵌套依赖,可管理类或函数服务。 依赖注入(Dependency Injection, DI)是一种设计模式,用于实现控制反转(IoC),让对象的依赖由外部传入,而不是在内部创建。这种方式提高了代码的可…

    2025年12月21日
    000
  • JS函数如何定义函数调试技巧_JS函数调试技巧定义与断点设置方法

    JS函数可通过函数声明、表达式、箭头函数和构造函数定义;2. 调试时可用开发者工具设断点或插入debugger语句暂停执行,便于检查状态。 在JavaScript开发中,函数是程序的核心组成部分。掌握如何定义函数以及有效的调试技巧,能大幅提升开发效率和代码质量。下面介绍JS函数的定义方式以及实用的调…

    2025年12月21日
    000
  • JavaScript RESTful API设计与实现

    答案:使用Node.%ignore_a_1%和Express可快速构建RESTful API,通过GET、POST、PUT、DELETE操作实现用户资源的增删改查,结合路由模块化、统一响应格式、输入验证与错误处理提升API质量,确保语义清晰、结构规范、易于维护。 在现代Web开发中,JavaScri…

    2025年12月21日
    000
  • js垃圾回收的场景优化

    JavaScript垃圾回收通过标记-清除算法自动释放无用对象,优化需及时断开无效引用。1. 解除事件监听与定时器避免残留回调;2. 闭包中避免长期持有大对象,使用后置null;3. 移除DOM后清除引用,缓存用WeakMap/WeakSet防泄漏;4. WeakMap键对象可被回收,适合元数据存储…

    2025年12月21日
    000
  • js数组中filter方法的使用

    filter()方法创建新数组包含满足条件的元素,体现不可变性;语法为arr.filter(callback, thisArg),callback接收element、index、array参数;常用于筛选数字、对象属性或去重;可与map、sort等链式调用处理数据,如先过滤成人用户再提取姓名;原数组…

    2025年12月21日
    000
  • JavaScript中的URLSearchParams对象使用_javascript网络请求

    URLSearchParams是JavaScript中用于处理URL查询参数的内置对象,可解析、构造、修改和遍历查询字符串。支持通过查询字符串、键值对对象或当前URL创建实例,自动编码确保合法性。提供get、getAll、append、set、delete、has和toString等方法,便于动态操…

    2025年12月21日
    000
  • JavaScript轮播图导航箭头点击无响应问题排查与修复

    本教程旨在解决javascript轮播图导航箭头点击失效的问题。核心原因在于js代码中用于事件监听的buttons变量未正确定义,导致foreach方法无法执行。文章将详细指导如何正确选取dom中的按钮元素,并将返回的类数组对象转换为标准数组,以便成功绑定点击事件,从而实现轮播图的正常导航功能。 在…

    2025年12月21日
    000
  • 使用JavaScript实现一个简单的日历组件_javascript UI组件

    答案:该日历组件通过原生JavaScript实现,包含年月切换、当月日期生成及跨年处理。结构上分为头部按钮、标题和主体表格,支持动态渲染并补全首尾空白单元格,结合CSS美化样式,可嵌入网页展示当前月份日期,逻辑清晰且便于扩展功能。 实现一个简单的日历组件,可以展示当前月份的日期,并支持切换年份和月份…

    2025年12月21日
    000
  • JS数组如何映射_JavaScript数组map方法使用与转换数据案例

    JavaScript数组的map方法用于创建一个新数组,其结果是对原数组每个元素调用提供的函数后返回的值。它不会修改原始数组,而是返回一个经过转换的新数组。该方法常用于数据转换、界面渲染或准备接口数据。基本语法为array.map(function(currentValue, index, arr)…

    2025年12月21日
    000
  • JavaScript中的内存泄漏与排查方法_javascript性能优化

    内存泄漏在JavaScript单页应用中可能导致性能下降或崩溃。常见类型包括:意外的全局变量、未解绑的事件监听器、闭包引用、定时器回调和DOM引用未释放。使用Chrome DevTools的堆快照、内存分配时间线、Detached DOM树和Performance面板可定位泄漏。预防策略有:避免全局…

    2025年12月21日
    000
  • Canvas像素级图像替换的性能优化指南

    本文旨在解决html canvas中大规模像素级图像替换的性能瓶颈和潜在的图像缩放问题。通过引入离屏canvas技术和直接操作像素数据(`getimagedata`与`putimagedata`),我们将展示如何高效、准确地将特定颜色区域替换为另一张图像的纹理,显著提升渲染性能并避免不必要的`dra…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信