首页 > web前端 > js教程 > 正文

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

夜晨
发布: 2025-12-20 19:52:02
原创
128人浏览过
JavaScript原型链是对象属性和方法查找的机制,通过[[Prototype]]隐式原型向上追溯至Object.prototype(终点为null);构造函数的prototype属性被实例的[[Prototype]]指向以实现共享;继承可通过Object.create或class extends语法糖实现,本质均为原型链连接。

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

JavaScript 原型链是对象之间实现属性和方法共享与查找的机制,它让对象能“沿着一条链”向上访问其构造函数的 prototype 对象,直到找到目标属性或到达链末端(null)。

原型链的核心:每个对象都有一个隐式原型

在 JavaScript 中,几乎每个对象内部都有一个隐藏属性 [[Prototype]](可通过 __proto__ 访问,但不推荐直接使用)。这个属性指向该对象的“原型对象”。当访问一个对象上不存在的属性时,引擎会自动顺着 [[Prototype]] 向上查找——这就是原型链的起点。

  • 普通对象的 [[Prototype]] 默认指向 Object.prototype
  • 数组对象的 [[Prototype]] 指向 Array.prototype,而 Array.prototype[[Prototype]] 又指向 Object.prototype
  • Object.prototype[[Prototype]]null,链在此终止

构造函数与 prototype 属性的关系

当你定义一个函数(如 function Person(name) { this.name = name; }),它会自动获得一个 prototype 属性。这个属性是一个对象,初始时只有 constructor 指回该函数。当你用 new Person() 创建实例时,该实例的 [[Prototype]] 会指向 Person.prototype

  • Person.prototype 是所有 Person 实例共享的原型对象
  • 把方法挂到 Person.prototype 上,就能被所有实例复用,节省内存
  • 例如:Person.prototype.sayHi = function() { return 'Hi, I am ' + this.name; };,之后 new Person('Alice').sayHi() 就能调用

原型链如何实现继承?

继承的本质就是让子类型的实例既能访问自身属性,也能访问父类型的属性和方法。最基础的方式是:将子类型的 prototype 设置为父类型的实例。

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

pollinations
pollinations

属于你的个性化媒体引擎

pollinations 247
查看详情 pollinations
  • 例如:Student.prototype = new Person();,这样 Student 实例就能沿链访问 Person.prototype 上的方法
  • 但这种方式会执行父构造函数,可能带来副作用(比如初始化了不需要的属性),且无法传递参数给父类
  • 更安全的做法是用 Object.create(Person.prototype),只继承原型,不调用构造函数
  • 别忘了修复 constructor:Student.prototype.constructor = Student;,否则它会指向 Person

现代写法:class 和 extends 是语法糖

ES6 的 class 并没有改变原型链本质,只是让继承写法更清晰。下面代码:

class Student extends Person { constructor(name, grade) { super(name); this.grade = grade; } }

实际仍通过设置 Student.prototype.__proto__ === Person.prototype 来建立原型链,并在内部调用 Object.setPrototypeOf(Student.prototype, Person.prototype)

基本上就这些。原型链不是魔法,它是一套明确、可追踪的属性查找规则,理解它才能真正掌握 JS 的面向对象行为。

以上就是javascript原型链是什么_它如何实现继承?的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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