0

0

javascript中原型链是什么_它如何实现继承?

狼影

狼影

发布时间:2026-01-13 20:24:02

|

861人浏览过

|

来源于php中文网

原创

原型链是javascript对象继承的核心机制,通过[[prototype]]内部槽隐式连接对象,属性查找沿链向上直至null;object.create()用于安全设置原型,object.setprototypeof()应避免热路径使用。

javascript中原型链是什么_它如何实现继承?

原型链是 JavaScript 中实现对象继承的核心机制,不是语法糖,而是运行时对象间隐式连接的真实引用关系。

原型链的本质:每个对象都有一个 [[Prototype]] 内部槽

这个内部槽指向另一个对象(即它的原型),查找属性或方法时,若当前对象没有该属性,引擎会沿着 [[Prototype]] 链向上逐级查找,直到找到或到达 null(链的终点)。

  • Object.prototype[[Prototype]]null,它是绝大多数对象原型链的终点
  • obj.__proto__ 是访问 [[Prototype]] 的非标准但广泛支持的方式;标准方式是 Object.getPrototypeOf(obj)
  • function.prototype 是函数对象独有的属性,它被赋给用该函数创建的实例的 [[Prototype]](仅限 new 调用)

function 构造函数模拟“类继承”时的原型链设置

传统方式依赖手动修正 Child.prototype[[Prototype]],否则子类无法继承父类原型上的方法。

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayHello = function() {
  return `Hello, ${this.name}`;
};

function Child(name, age) {
  Parent.call(this, name); // 继承实例属性
  this.age = age;
}

// 关键一步:让 Child.prototype 的 [[Prototype]] 指向 Parent.prototype
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // 修复 constructor 指针

const c = new Child('Alice', 10);
console.log(c.sayHello()); // "Hello, Alice" —— 成功从 Parent.prototype 查找
  • 漏掉 Object.create(Parent.prototype)Child.prototype 就只是个空对象,不继承任何方法
  • 漏掉 constructor = Childc.constructor 会错误地指向 Parent
  • ES6 class 语法底层仍走这套逻辑,只是自动处理了上述两步

Object.setPrototypeOf()Object.create() 的实际差异

二者都能建立原型链接,但使用场景和性能影响不同:

未来百科
未来百科

未来百科,为发现全球优质AI工具产品而诞生。

下载

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

  • Object.create(proto) 创建一个新对象,并将其 [[Prototype]] 设为 proto;适合初始化原型对象(如上例中重设 Child.prototype
  • Object.setPrototypeOf(obj, proto) 直接修改已有对象的 [[Prototype]];会触发引擎对 obj 的隐藏类失效,显著影响性能,应避免在热路径中调用
  • 现代代码中,优先用 Object.create() 做一次性原型链搭建,而非动态改写

箭头函数、Object.assign() 和原型链无关

它们不参与原型链构建:

  • 箭头函数没有自己的 prototype 属性,不能用 new 调用,自然不产生原型链关系
  • Object.assign(target, ...sources) 只是浅拷贝可枚举自有属性,不会复制 [[Prototype]],也不会建立原型连接
  • 想“继承”多个对象的行为?得靠组合(mixin)、代理(Proxy)或显式委托调用,不是靠原型链自动合并

真正容易被忽略的是:原型链只在读取属性时起作用;写入或删除操作始终发生在目标对象自身,不会顺着链向上。这意味着看似“继承”的属性,一旦被子对象赋值,就变成了自有属性,遮蔽了原型上的同名属性——这是很多动态覆盖逻辑出 bug 的根源。

热门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新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

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

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

196

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

231

2025.12.24

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

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

249

2023.09.22

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

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

967

2024.03.01

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

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

249

2023.09.22

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

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

967

2024.03.01

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

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

249

2023.09.22

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

43

2026.02.28

热门下载

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

精品课程

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

共58课时 | 5.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

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