讲师中心 微信公众号
AI工具推荐 视频效率加速

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

夜婷同学_4211

夜婷同学_4211

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

|

232人浏览过

|

来源于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) 只处理属性,原型链需额外设置。

注意点:

Java Maven Secondary Analysis
Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目,确定二次开发范围、类数量、模块分布及生产相关指标。

下载
  • 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.target 和 instanceof 行为一致

两者都保持正确的原型链:子类实例 instanceof Child 和 instanceof Parent 都为 true,Object.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大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

相关专题

更多
es6新特性
es6新特性

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

265

2023.07.17

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

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

386

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

355

2025.12.24

C++ 智能指针与现代内存管理
C++ 智能指针与现代内存管理

深入讲解 C++ 现代内存管理的核心工具——智能指针,涵盖 unique_ptr 独占所有权语义、shared_ptr 引用计数机制与循环引用问题、weak_ptr 弱引用的应用场景、make_unique/make_shared 工厂函数的性能优势、自定义删除器的编写、RAII 资源管理思想的实践,以及从裸指针迁移到智能指针的重构策略,帮助开发者编写安全无泄漏的现代 C++ 代码。

339

2026.04.23

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

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

3596

2024.01.03

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

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

286

2025.12.06

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

40

2026.10.08

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

140

2026.09.30

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

140

2026.09.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn