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

如何在JavaScript中实现继承?

小涛酱_9505

小涛酱_9505

发布时间:2025-05-07 08:09:01

|

902人浏览过

|

来源于php中文网

原创

javascript中实现继承的主要方式有:1.原型链继承,2.构造函数继承,3.组合继承,4.原型式继承,5.寄生式继承,6.寄生组合式继承,7.es6类继承。寄生组合式继承和es6类继承是目前最推荐的做法,它们在性能和可维护性上表现较好。

如何在JavaScript中实现继承?

在JavaScript中实现继承有好几种方式,每一种都各有优缺点。在开始之前,我们要明白,JavaScript是一种基于原型的语言,而不是基于类的语言,尽管ES6引入了class语法,但它仍然是基于原型实现的。今天,我将分享几种实现继承的方法,并结合自己的经验来探讨它们的优劣。

首先,我们要搞清楚继承的本质:子类可以使用父类的属性和方法,并且可以根据需要重写或扩展这些方法。在JavaScript中,这可以通过原型链来实现。

原型链继承

原型链继承是JavaScript中最基础的继承方式。它的核心思想是让子类的原型指向父类的实例,从而继承父类的属性和方法。

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

function Parent(name) {
    this.name = name || 'Parent';
}

Parent.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
};

function Child(name) {
    Parent.call(this, name); // 调用父类构造函数
    this.name = name || 'Child';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是简单直观,但也有缺点:子类实例共享父类原型上的引用类型属性,这可能导致意外的共享状态。此外,子类无法向父类构造函数传递参数,除非在子类构造函数中手动调用父类构造函数。

构造函数继承

为了解决原型链继承中的共享问题,我们可以使用构造函数继承。这种方法通过在子类构造函数中调用父类构造函数来实现。

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

function Child(name) {
    Parent.call(this, name); // 继承父类属性
    this.name = name || 'Child';
}

const child1 = new Child('Child 1');
const child2 = new Child('Child 2');

child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
console.log(child2.colors); // ['red', 'blue', 'green']

这种方法的优点是每个实例都有自己的属性,不会共享引用类型属性。但缺点是无法继承父类原型上的方法和属性。

组合继承

为了结合原型链和构造函数继承的优点,我们可以使用组合继承。这种方法既能继承父类原型上的方法,又能确保每个实例有自己的属性。

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

Parent.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
};

function Child(name) {
    Parent.call(this, name); // 继承属性
    this.name = name || 'Child';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是既能继承父类原型上的方法,又能确保每个实例有自己的属性。但缺点是父类构造函数被调用了两次,可能会导致性能问题。

原型式继承

原型式继承是Douglas Crockford提出的一种继承方式,它通过克隆一个对象来实现。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

const parent = {
    name: 'Parent',
    colors: ['red', 'blue', 'green'],
    sayName: function() {
        console.log(`My name is ${this.name}`);
    }
};

const child = object(parent);
child.name = 'Child';
child.sayName(); // 输出: My name is Child

这种方法的优点是简单,但缺点是所有实例共享同一个原型,引用类型属性会共享。

寄生式继承

寄生式继承是在原型式继承的基础上,增强对象的继承方式。

function createAnother(original) {
    const clone = Object.create(original);
    clone.sayHi = function() {
        console.log('Hi');
    };
    return clone;
}

const parent = {
    name: 'Parent',
    colors: ['red', 'blue', 'green'],
    sayName: function() {
        console.log(`My name is ${this.name}`);
    }
};

const child = createAnother(parent);
child.name = 'Child';
child.sayHi(); // 输出: Hi
child.sayName(); // 输出: My name is Child

这种方法的优点是可以增强对象,但缺点是每次创建对象都要重新定义方法,性能可能不如预期。

寄生组合式继承

寄生组合式继承是目前公认的最佳继承方式,它结合了寄生式继承和组合继承的优点,避免了组合继承中父类构造函数被调用两次的问题。

function inheritPrototype(child, parent) {
    const prototype = Object.create(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

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

Parent.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
};

function Child(name) {
    Parent.call(this, name); // 继承属性
    this.name = name || 'Child';
}

inheritPrototype(Child, Parent);

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是高效且灵活,缺点是实现起来相对复杂。

ES6类继承

ES6引入了class语法,使得继承更加直观和易于理解,但它仍然是基于原型链实现的。

class Parent {
    constructor(name) {
        this.name = name || 'Parent';
        this.colors = ['red', 'blue', 'green'];
    }

    sayName() {
        console.log(`My name is ${this.name}`);
    }
}

class Child extends Parent {
    constructor(name) {
        super(name); // 调用父类构造函数
        this.name = name || 'Child';
    }
}

const child = new Child('Little Child');
child.sayName(); // 输出: My name is Little Child

这种方法的优点是语法简洁,易于理解,但本质上仍然是基于原型链的。

总结与建议

在实际开发中,选择哪种继承方式取决于具体需求和项目背景。寄生组合式继承和ES6类继承是目前最常用且推荐的做法。它们在性能和可维护性上都有较好的表现。

我曾经在一个大型项目中使用了寄生组合式继承,结果发现它在处理复杂的继承关系时非常高效,但需要团队成员有一定的JavaScript基础知识。如果团队成员对原型链不熟悉,可能会导致一些理解上的困难。

在选择继承方式时,要考虑以下几点:

  • 性能:寄生组合式继承和ES6类继承在性能上表现较好。
  • 可读性:ES6类继承的语法更直观,适合新手。
  • 灵活性:寄生组合式继承在处理复杂继承关系时更灵活。

希望这篇文章能帮助你更好地理解JavaScript中的继承方式,并在实际开发中做出更明智的选择。如果你有任何问题或建议,欢迎留言讨论。

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

墨刀AI
墨刀AI Hot

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

PixTV
PixTV Hot

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

DeepSeek

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

Laper
Laper Hot

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

WorkBuddy

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

豆包大模型

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

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
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

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

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

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

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

80

2026.09.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript OOP调试技巧视频教程
JavaScript OOP调试技巧视频教程

共5课时 | 1.1万人学习

李炎恢XHTML视频教程
李炎恢XHTML视频教程

共92课时 | 23.1万人学习

第三期培训_PHP开发
第三期培训_PHP开发

共116课时 | 32.5万人学习

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

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