0

0

javascript如何实现继承_ES5和ES6方式有何不同【教程】

狼影

狼影

发布时间:2026-02-02 17:47:02

|

172人浏览过

|

来源于php中文网

原创

ES5用Object.create模拟原型继承最稳妥,需用Object.create(Parent.prototype)创建原型、修复constructor、调用Parent.call(this)继承实例属性;ES6 class是语法糖,super()自动初始化this并建立原型链,但约束更严格。

javascript如何实现继承_es5和es6方式有何不同【教程】

ES5 用 Object.create 模拟原型继承最稳妥

ES5 没有原生 class,靠修改构造函数的 prototype 和借用 Object.create 实现继承链。核心是让子类实例的 __proto__ 指向父类原型,同时不污染父类实例。

常见错误是直接赋值 Child.prototype = Parent.prototype,这会导致子类改原型时影响父类;或忘记修复 constructor 指针,导致 instance.constructor === Parent 而非 Child

正确做法:

  • Object.create(Parent.prototype) 创建干净的原型对象
  • 手动赋值 Child.prototype.constructor = Child
  • 在子类构造函数中用 Parent.call(this, ...args) 继承实例属性
function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() { return 'hi'; };

function Child(name, age) {
  Parent.call(this, name); // 继承实例属性
  this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 继承原型方法
Child.prototype.constructor = Child; // 修复 constructor

ES6 class 语法糖本质仍是原型继承

class 不是新机制,只是对 ES5 原型继承的封装。它强制要求子类构造函数必须调用 super(),否则报错 ReferenceError: Must call super constructor in derived class before accessing 'this'

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

关键差异在于:ES6 的 super() 不仅调用父构造函数,还初始化了 this(即绑定了原型链),而 ES5 中 Parent.call(this) 只处理属性,原型链需额外设置。

注意点:

稿定AI社区
稿定AI社区

在线AI创意灵感社区

下载
  • super() 必须在使用 this 前调用,顺序错误直接报错
  • 静态方法和 getter/setter 会被正确继承,但需确保父类也有对应定义
  • 不能在子类 constructor 外访问 super.xxx(如直接在方法里写 super.method() 是合法的,但不能在顶层写)
class Parent {
  constructor(name) {
    this.name = name;
  }
  say() { return 'hi'; }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 必须第一句
    this.age = age;
  }
}

ES5 和 ES6 继承在 new.targetinstanceof 行为一致

两者都保持正确的原型链:子类实例 instanceof Childinstanceof Parent 都为 trueObject.getPrototypeOf(child) === Child.prototype,再往上是 Parent.prototype

区别在于元信息层面:new.target 在 ES6 class 构造函数中能准确指向当前被 new 的类(包括子类),而 ES5 构造函数中 new.target 兼容性差,且无法自然表达“谁是真正被实例化的类”。

这意味着如果你依赖 new.target 做抽象基类校验(比如禁止直接 new 父类),ES6 更可靠。

箭头函数、bind 和继承混用容易破坏 this 绑定

无论 ES5 还是 ES6,如果在父类方法中用了箭头函数,该方法无法被子类重写——因为箭头函数没有自己的 this,且绑定发生在定义时,不会随调用上下文改变。同样,用 bind 固定 this 后的方法也无法被子类通过原型链覆盖。

典型陷阱:

  • 父类写 this.handleClick = () => {...},子类在 prototype 上定义同名方法无效
  • 父类用 someMethod.bind(this) 返回绑定函数并赋给实例属性,子类无法通过原型链拦截
  • ES6 中在 constructor 里用 this.xxx = () => {},等价于上一条

需要可继承的行为,必须定义在 prototype 上,且用普通函数。

ES6 的 extends 看似简单,但底层约束更严格;ES5 手动操作原型链看似繁琐,反而留出更多控制空间。实际项目中,如果目标环境支持,优先用 ES6;但调试时得清楚它背后仍是 Object.create + call + constructor 修复那一套。

相关文章

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

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

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门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绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

223

2025.12.24

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

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

490

2024.01.03

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

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

17

2025.12.06

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

53

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

13

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

8

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

3

2026.02.02

热门下载

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

精品课程

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

共58课时 | 4.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

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

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