讲师中心 微信公众号

工具推荐

视频效率加速
Laper
Laper

剧本策划到成片协作

AniShort
AniShort

AI短剧协同制作平台

Seko
Seko

AI短剧一键生成成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

javascript如何实现继承_有哪些不同的继承方式?

大枫吖_8525

大枫吖_8525

发布时间:2025-12-13 23:43:02

|

570人浏览过

|

来源于php中文网

原创

JavaScript继承有5种方式:1.原型链继承(共享引用属性);2.构造函数继承(私有属性但无原型方法);3.组合继承(功能全但父构造函数调用两次);4.寄生组合继承(只调用一次父构造,ES6底层实现);5.class extends(语法糖,推荐日常使用)。

javascript如何实现继承_有哪些不同的继承方式?

JavaScript 实现继承的核心是让子类能访问并复用父类的属性和方法,同时支持实例化和原型链的正确连接。ES6 之前主要靠手动模拟,ES6 引入 class 和 extends 后语法更简洁,但底层仍基于原型机制。目前主流有 5 种实用继承方式,各有适用场景。

1. 原型链继承

将父类的实例赋给子类的 prototype,子类实例通过原型链向上查找父类方法和共享属性。

优点:简单、复用父类方法;缺点:所有子类实例共享父类引用类型属性(如数组、对象),无法向父类构造函数传参。

function Parent() {
  this.colors = ['red', 'blue'];
}
Parent.prototype.sayHi = function() { console.log('Hi'); };

function Child() {}
Child.prototype = new Parent(); // 关键:继承原型
Child.prototype.constructor = Child; // 修复 constructor

const c1 = new Child();
c1.colors.push('green');
const c2 = new Child();
console.log(c2.colors); // ['red', 'blue', 'green'] ← 被意外修改

2. 构造函数继承(经典借用构造函数)

在子类构造函数中用 call 或 apply 调用父类构造函数,实现属性“私有化”继承。

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

优点:避免引用类型共享,支持向父类传参;缺点:只能继承实例属性,无法继承原型上的方法(如 sayHi)。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}

function Child(name, age) {
  Parent.call(this, name); // 关键:借用父类构造逻辑
  this.age = age;
}

const c1 = new Child('Alice', 25);
c1.colors.push('green');
const c2 = new Child('Bob', 30);
console.log(c2.colors); // ['red', 'blue'] ← 独立副本
// c1.sayHi(); // ❌ 报错:没有继承原型方法

3. 组合继承(最常用)

结合前两种:原型链继承方法 + 构造函数继承属性。既复用方法,又保证实例属性独立。

Java调试
Java调试

通过 JDWP 实现 Java 远程调试:连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。 术语注解 JDWP:Java Debug Wire Protocol,Java 调试有线协议(Java 远程调试底层通信协议) remote JVM:远程 Java 虚拟机 step through code:代码单步调试(步入 / 步过 / 步出调试) inspect variables:变量查看 / 变量检视 stac

下载

优点:功能完整、语义清晰;缺点:父类构造函数被调用两次(一次在设置原型时,一次在子类中 call)。

  • 第一次:Child.prototype = new Parent() → 执行 Parent 构造函数
  • 第二次:Parent.call(this, ...) → 再次执行 Parent 构造函数

4. 寄生组合继承(推荐)

优化组合继承,只调用一次父类构造函数。核心是用 Object.create(Parent.prototype) 创建干净的原型对象,再赋给子类 prototype。

这是 ES6 class 的底层实现逻辑,也是 Babel 编译 extends 时采用的方式。

function inheritPrototype(Child, Parent) {
  const prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}

function Parent(name) { this.name = name; }
Parent.prototype.sayHi = function() { console.log('Hi'); };

function Child(name, age) {
  Parent.call(this, name); // 只在这里调用 Parent
  this.age = age;
}
inheritPrototype(Child, Parent); // 关键:干净地继承原型

const c = new Child('Tom', 28);
c.sayHi(); // ✅ 正常输出
console.log(c instanceof Parent); // ✅ true

5. ES6 class extends(语法糖,推荐日常使用)

本质仍是寄生组合继承,但由引擎自动处理,代码更易读、支持 super、静态方法、getter/setter 等。

注意:class 必须用 new 调用,且子类构造函数中必须先调用 super()(否则报错)。

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayHi() { console.log('Hi'); }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 必须!等价于 Parent.call(this, name)
    this.age = age;
  }
  sayAge() { console.log(this.age); }
}

const c = new Child('Lisa', 22);
c.sayHi();  // ✅
c.sayAge(); // ✅

基本上就这些。开发中优先用 class extends;需要兼容老环境或深入理解原理时,掌握寄生组合继承就够了。不复杂但容易忽略细节——比如忘记修复 constructor,或 super() 调用时机不对,都会导致行为异常。

相关文章

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

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

下载

相关标签:

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

热门AI工具

更多
Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

Laper
Laper Hot

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

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

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

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

WorkBuddy

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

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
es6新特性
es6新特性

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

305

2023.07.17

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

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

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

395

2025.12.24

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

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

4596

2024.01.03

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

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

326

2025.12.06

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

0

2026.11.12

Go-Zero安装与goctl环境配置教程
Go-Zero安装与goctl环境配置教程

本专题围绕Go-Zero的安装与工具链配置展开,讲清Go版本要求、goctl安装方式、代理镜像、protoc依赖与环境变量设置,说明多版本共存、升级回退与CI流水线安装的做法,并整理安装阶段的常见报错与验证步骤。

0

2026.11.12

Go-Zero零基础入门教程
Go-Zero零基础入门教程

本专题整理Go-Zero的入门知识,从框架定位、环境准备到跑通第一个API服务,讲清目录分层、配置加载、日志与中间件的基本用法,并对比Gin、Kratos的差异,帮助Go开发者建立整体认知,判断它是否适合当前项目。

0

2026.11.12

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

120

2026.11.06

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

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