0

0

javascript原型链如何工作?【教程】

夢幻星辰

夢幻星辰

发布时间:2026-01-16 22:05:02

|

345人浏览过

|

来源于php中文网

原创

javascript原型链是属性访问的真实查找路径,读取时沿__proto__向上搜索至null,写入仅作用于自身;__proto__、prototype、constructor职责不同,混用易致链断裂;class是语法糖,本质仍基于原型链。

javascript原型链如何工作?【教程】

JavaScript 原型链不是“继承机制的模拟”,它就是对象查找属性的真实路径——每次读取 obj.prop,引擎都会顺着 obj.__proto__ 一层层向上找,直到找到或抵达 null

属性访问时原型链如何被触发

原型链只在「读取属性」或「调用方法」时动态启用,写入或删除操作默认只作用于对象自身(除非属性是 setter 或 configurable: false)。

  • 访问 obj.name:先查 obj 自身属性,没找到 → 查 obj.__proto__ → 再查 obj.__proto__.__proto__,依此类推
  • 赋值 obj.name = 'x':直接在 obj 上新建或覆盖属性,**不修改原型**
  • in 操作符和 for...in 会遍历整个原型链上的可枚举属性;而 Object.hasOwn(obj, 'name')(或旧版 obj.hasOwnProperty('name'))只检查自身

__proto__prototypeconstructor 的关系容易混淆

三者职责完全不同,混用会导致链断裂或意外行为:

  • obj.__proto__ 是每个对象都有的内部属性,指向其原型对象(即构造函数的 prototype
  • Fn.prototype 是函数独有的属性,仅当该函数被用作构造函数(new Fn())时,新对象的 __proto__ 才会指向它
  • Fn.prototype.constructor 默认回指 Fn,但手动重写 Fn.prototype = {...} 后这个指向会丢失,需显式修复:Fn.prototype.constructor = Fn
function Person(name) {
  this.name = name;
}
Person.prototype.say = function() { return 'hi'; };

const p = new Person('Alice');
console.log(p.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

Object.create(null) 创建无原型对象的后果

这类对象没有 __proto__,也不继承任何方法(如 toStringhasOwnProperty),常用于实现纯哈希表或避免原型污染,但必须小心使用:

Favird No-Code Tools
Favird No-Code Tools

无代码工具的聚合器

下载

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

  • obj.toString() 会报 TypeError: obj.toString is not a function
  • Object.hasOwn(obj, key) 仍可用(它是静态方法,不依赖 obj 的原型)
  • 不能用 obj instanceof Something,因为 instanceof 依赖原型链查找
  • 若需基础方法,可手动挂载:obj.toString = Object.prototype.toString

ES6 class 并未改变原型链本质

class 只是语法糖,底层仍是基于 prototype__proto__。所有 class 定义的方法都放在 ClassName.prototype 上,实例的 __proto__ 依然指向它。

  • 静态方法(static)挂在类本身上,不是原型链的一部分;实例无法访问
  • 继承(extends)实际设置的是子类的 __proto__ 指向父类(实现静态继承),同时子类 prototype.__proto__ 指向父类 prototype(实现实例方法继承)
  • 不要试图用 class A extends null —— 这会让子类 prototype.__proto__null,导致实例无法访问 Object.prototype 方法
class Animal {
  speak() { return 'sound'; }
}
class Dog extends Animal {
  bark() { return 'woof'; }
}

const d = new Dog();
console.log(d.__proto__ === Dog.prototype); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true

真正难的不是理解“链”本身,而是判断某个属性到底落在哪一层——尤其当多个库修改 prototype、或使用 Object.setPrototypeOf() 动态变更时,链可能在运行时被悄悄改写。调试时优先用 Object.getPrototypeOf(obj) 而非 obj.__proto__,更安全也更标准。

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

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

232

2025.12.24

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

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

254

2023.09.22

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

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

1089

2024.03.01

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

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

870

2024.01.03

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

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

30

2025.12.06

function是什么
function是什么

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

499

2023.08.04

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

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

精品课程

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

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

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