0

0

JavaScript原型链继承机制深入剖析

幻影之瞳

幻影之瞳

发布时间:2025-10-25 20:51:02

|

489人浏览过

|

来源于php中文网

原创

JavaScript继承基于原型链,通过构造函数的prototype与实例的[[Prototype]]链接实现属性查找;经典继承方式是将子类原型设为父类实例,但存在引用共享、无法传参等问题;因此推荐寄生组合式继承,即在子类构造函数中用call调用父类构造函数继承实例属性,并用Object.create(Parent.prototype)设置子类原型以避免共享,再修正constructor指向,兼顾效率与安全性,也是ES6 class编译后的默认实现。

javascript原型链继承机制深入剖析

JavaScript 的继承机制和其他面向对象语言不同,它基于原型链(Prototype Chain)实现。理解原型链是掌握 JavaScript 面向对象编程的核心。

原型与原型链的基本概念

在 JavaScript 中,每个函数都有一个 prototype 属性,这个属性指向一个对象,即该函数的原型对象。原型对象中包含可以被实例共享的属性和方法。

每个通过构造函数创建的对象都会有一个内部链接指向构造函数的原型对象,这个链接称为 [[Prototype]]。在大多数环境中可通过 __proto__ 访问(不推荐直接使用),或通过 Object.getPrototypeOf() 获取。

当访问一个对象的属性时,JavaScript 引擎会先在该对象自身查找,若未找到,则沿着 [[Prototype]] 链向上查找,直到找到属性或链结束(即到达 null)。这条查找路径就是原型链。

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

实现原型链继承的方式

最经典的原型链继承方式是将子类的原型设置为父类的一个实例:

  • 定义父构造函数,并在其 prototype 上添加方法
  • 定义子构造函数
  • 将子构造函数的 prototype 指向父构造函数的实例
  • 修正子构造函数 prototype 的 constructor 指向

示例代码:

function Parent() {
  this.name = 'parent';
}
Parent.prototype.getName = function() {
  return this.name;
};

function Child() {
  this.type = 'child';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

这里使用 Object.create() 创建一个以 Parent.prototype 为原型的新对象,避免了直接赋值带来的副作用(如执行父构造函数)。

BibiGPT-哔哔终结者
BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

下载

原型链继承的局限性

虽然原型链是 JavaScript 继承的基础,但它存在几个明显问题:

  • 引用类型属性会被所有实例共享:如果父构造函数的原型上有引用类型属性(如数组),子实例修改会影响其他实例
  • 无法向父构造函数传参:在创建子实例时不能动态传递参数给父构造函数
  • 仅通过原型链继承无法实现多继承

因此实际开发中通常结合借用构造函数(call/apply)、组合继承或寄生组合式继承来弥补这些缺陷。

现代继承模式推荐:寄生组合式继承

这是目前最理想的继承方式,它结合了构造函数借用和原型链的优点,同时避免重复调用父构造函数。

核心思路:

  • 在子构造函数中通过 call 调用父构造函数,继承实例属性
  • 使用 Object.create 创建父原型的副本作为子原型,避免实例间共享引用
  • 修复 constructor 指向

这种模式高效且安全,也是 Babel 等编译工具转换 ES6 class 继承的默认实现方式。

基本上就这些。原型链是 JavaScript 独特而强大的机制,深入理解有助于写出更清晰、可维护的代码。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

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

103

2023.07.17

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

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

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

222

2025.12.24

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

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

236

2023.09.22

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

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

458

2024.03.01

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

56

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

52

2025.11.27

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

56

2025.09.05

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

158

2026.01.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号