0

0

javascript中的继承如何实现_有哪些方法?

夜晨

夜晨

发布时间:2025-12-17 23:00:13

|

958人浏览过

|

来源于php中文网

原创

javascript继承主要通过原型链实现,es6前无class语法,es6引入class/extends语法糖但底层仍基于原型链和构造函数,常见方式有原型链继承、构造函数继承、组合继承和es6 class继承。

javascript中的继承如何实现_有哪些方法?

JavaScript 中的继承主要通过原型链实现,没有传统面向对象语言中的 class 继承语法(ES6 之前),但 ES6 引入了 classextends 语法糖,底层仍是基于原型链和构造函数。常见实现方式有以下几种:

1. 原型链继承

让子构造函数的 prototype 指向父构造函数的一个实例。

优点:简单,能复用父类方法;
缺点:所有子实例共享父类实例的引用属性,无法向父构造函数传参。

示例:

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

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载
function Animal(name) {
  this.name = name;
  this.colors = ['black', 'white'];
}
Animal.prototype.say = function() {
  return `I'm ${this.name}`;
};

function Dog() {}
Dog.prototype = new Animal(); // 关键:继承原型
Dog.prototype.constructor = Dog;

const d1 = new Dog();
const d2 = new Dog();
d1.colors.push('brown');
console.log(d2.colors); // ['black', 'white', 'brown'] ← 共享了引用类型

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

在子构造函数中用 callapply 调用父构造函数。

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

示例:

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

function Animal(name) {
  this.name = name;
  this.colors = ['black', 'white'];
}
Animal.prototype.say = function() {
  return `I'm ${this.name}`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 关键:继承实例属性
  this.breed = breed;
}

const d = new Dog('Xiaohei', 'Shepherd');
console.log(d.name); // 'Xiaohei'
console.log(d.say); // undefined ← 原型方法没被继承

3. 组合继承(最常用)

结合前两种:原型链继承方法 + 构造函数继承属性。

优点:兼顾属性独立与方法复用;
缺点:父构造函数被调用两次(一次在设置原型时,一次在子构造函数内)。

示例:

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

function Animal(name) {
  this.name = name;
  this.colors = ['black', 'white'];
}
Animal.prototype.say = function() {
  return `I'm ${this.name}`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 第一次调用
  this.breed = breed;
}
Dog.prototype = new Animal(); // 第二次调用 ← 可优化
Dog.prototype.constructor = Dog;

const d = new Dog('Wangcai', 'Poodle');
console.log(d.say()); // 'I'm Wangcai'
console.log(d.colors); // ['black', 'white'](不共享)

4. ES6 class 继承(推荐现代写法)

本质是组合继承的语法糖,内部自动处理原型和构造调用,更简洁安全。

关键点:
– 必须在子类 constructor 中调用 super()
super 既可调用父类构造函数,也可访问父类原型方法;
– 支持 static 方法、get/setnew.target 等。

示例:

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

class Animal {
  constructor(name) {
    this.name = name;
    this.colors = ['black', 'white'];
  }
  say() {
    return `I'm ${this.name}`;
  }
  static info() {
    return 'Animal base class';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // ← 必须先调用,初始化 this
    this.breed = breed;
  }
  bark() {
    return `${this.say()} and I bark!`;
  }
}

const d = new Dog('Husky', 'Siberian');
console.log(d.bark()); // 'I'm Husky and I bark!'
console.log(Dog.info()); // 'Animal base class'

基本上就这些。日常开发优先用 class + extends,清晰、语义强、工具友好;理解原型链继承有助于调试和深入掌握 JS 机制。

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

231

2025.12.24

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

57

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

62

2025.11.27

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

57

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

62

2025.11.27

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

57

2025.09.05

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

48

2026.02.28

热门下载

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

精品课程

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

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

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