讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript原型链继承机制如何理解【教程】

阿萱酱_1578

阿萱酱_1578

发布时间:2026-01-24 15:48:53

|

220人浏览过

|

来源于php中文网

原创

原型链是JavaScript中对象属性查找的路径,即从实例→构造函数prototype→Object.prototype→null;__proto__是对象隐式原型,prototype是函数显式原型,二者指向一致时继承成立。

javascript原型链继承机制如何理解【教程】

原型链的本质是属性查找路径

JavaScript 中对象访问一个属性时,不是“直接拥有”它,而是沿着 __proto__ 一层层向上找——从实例 → 构造函数的 prototype → Object.prototype → null。这条查找链就是原型链。

关键点在于:__proto__ 是每个对象都有的内部链接(隐式原型),而 prototype 是每个函数才有的属性(显式原型),二者指向同一个对象时,继承才成立。

  • 错误现象:调用 student.sayHello() 报 TypeError: student.sayHello is not a function → 很可能是 Student.prototype 没正确挂载到 Person.prototype
  • 验证方法:用 Object.getPrototypeOf(student) === Person.prototype 或 student.__proto__ === Person.prototype 直接比对
  • 不要手动改 __proto__:它已被标准标记为“仅用于调试”,生产环境应使用 Object.setPrototypeOf() 或更稳妥的 Object.create()

用 Object.create() 实现安全继承

直接赋值 Student.prototype = new Person() 有严重隐患:父类构造函数会执行一次,若它依赖传参或有副作用(比如发请求、修改全局状态),子类还没实例化就触发了。

Object.create(Person.prototype) 只创建一个干净的、以 Person.prototype 为原型的新对象,不执行构造逻辑,这才是现代继承的起点。

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

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
  • 必须补上 Student.prototype.constructor = Student:否则 student.constructor 会指向 Person,破坏实例识别
  • 子类自己的方法要定义在 Student.prototype 上,不能写在构造函数里,否则无法被所有实例共享
  • 父类实例属性(如 this.name)仍需在子类构造函数中用 Person.call(this, name) 显式继承,原型链只管方法和共享属性

class 语法糖背后仍是原型链

class Student extends Person 看起来像 Java,但编译后仍是基于 Object.setPrototypeOf() 和 Person.call() 的组合。它没改变底层机制,只是把容易出错的手动操作封装了。

你可以用 instanceof 验证:如果 student instanceof Person 返回 true,说明 Person.prototype 确实在 student 的原型链上——这是唯一可靠的继承判定依据,不是看有没有 extends 关键字。

  • 注意 Babel 编译后的辅助函数(如 _inherits)会自动处理 constructor 修正和 __proto__ 设置,但你仍得理解它在做什么
  • ES6 super() 在子类构造函数中本质就是 Person.call(this, ...args),漏掉它会导致 this 未初始化而报错
  • 静态方法(static)不进原型链,它们挂在函数本身上,所以 Student.method() ≠ student.method()

原型链过深时的性能与维护风险

每访问一个不在实例上的属性,引擎就得遍历一次原型链。链越长,查找越慢;尤其在高频调用(如动画帧、事件处理器)中,这种开销会被放大。

更隐蔽的问题是:原型上的可变引用类型(比如 Person.prototype.data = [])会被所有实例共享,一个实例 push 后,其他实例也看到变化——这不是 bug,是设计使然,但常被误用。

  • 避免在原型上放数组、对象等引用类型,除非你明确需要共享状态
  • 调试时善用浏览器开发者工具的 “Properties” 面板,展开 [[Prototype]] 查看真实链路,比靠记忆更可靠
  • 大型项目中,过度依赖深层原型链会让代码难以追踪来源,建议优先用组合(composition)代替多层继承
原型链不是抽象概念,它是每次点号(.)访问属性时真实发生的查找动作。真正卡住人的,往往不是“怎么写继承”,而是“为什么这个属性查不到”或“为什么改了一个实例影响了所有”。盯着 __proto__ 和 prototype 的指向关系,比背诵继承模式更管用。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

4156

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

306

2025.12.06

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

3320

2023.08.04

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn