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

JavaScript如何实现继承的

胖磊大大_2816

胖磊大大_2816

发布时间:2023-04-06 08:55:13

|

1402人浏览过

|

来源于php中文网

原创

javascript是一种面向对象的语言,而继承是面向对象编程的一个重要特性。在javascript中,继承的实现方式有多种,本文将介绍其中较为常见的几种方法。

一、原型链继承

原型链继承是JavaScript中最基本的一种继承方式,也是最常用的一种。通过原型链继承,可以实现子类继承父类的属性和方法。

原型链继承的实现方法如下:

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

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    this.age = age;
    Parent.call(this, name);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

上述代码中,我们首先定义了一个父类Parent和一个子类Child。在Child中,我们使用Parent.call(this, name)调用了父类构造函数,并通过Child.prototype = new Parent()将Child的原型指向了Parent,从而实现了继承。在最后,我们创建了两个子类实例child1和child2,并验证了继承的效果。

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

原型链继承的优点是实现简单,容易理解。但它的缺点也很明显,即会造成原型对象中的引用类型属性被所有实例共享。

二、构造函数继承

构造函数继承是一种比较容易理解的继承方式,它通过在子类构造函数中调用父类构造函数实现继承。

构造函数继承的实现方法如下:

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

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // TypeError: child1.sayName is not a function 

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // TypeError: child2.sayName is not a function

上述代码中,我们在子类构造函数Child中使用Parent.call(this, name)调用了父类构造函数,并将this指向子类实例,从而实现了继承。但由于构造函数继承并不会将父类原型中的方法继承下来,因此我们在子类中无法直接调用父类原型中的方法。

构造函数继承的优点是避免了原型链继承中引用类型属性被所有实例共享的问题,但它的缺点也很明显,即无法继承父类原型中的方法。

三、组合继承

组合继承是JavaScript中最常用的一种继承方式,它是将原型链继承和构造函数继承结合起来的一种方式,解决了两者各自的缺点。

组合继承的实现方法如下:

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

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

上述代码中,我们在子类构造函数Child中使用Parent.call(this, name)调用了父类构造函数,并将this指向子类实例,从而实现了继承。同时,我们在子类原型中通过Child.prototype = new Parent()使子类继承了父类的原型,从而继承了父类原型中的方法。

组合继承的优点是继承方式完整,既可以继承父类原型中的方法,又可以避免原型链继承中引用类型属性被所有实例共享的问题。但它的缺点是会调用两次父类构造函数,浪费了一定的内存空间。

四、寄生组合继承

寄生组合继承是组合继承的一种优化方式,它避免了在子类原型中多次调用父类构造函数的问题,从而减少了内存开销。

寄生组合继承的实现方法如下:

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

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

上述代码中,我们在子类原型中使用Object.create()方法创建了一个父类原型的副本,并通过Object.create()的第二个参数重写了子类原型的constructor属性,从而使其指向了子类自身。由于Object.create()方法并不会调用父类构造函数,因此就避免了在子类原型中多次调用父类构造函数的问题。

寄生组合继承的优点是既继承了父类原型中的方法,又避免了在子类原型中多次调用父类构造函数的问题。缺点是实现较为复杂。

总之,JavaScript中实现继承的方法有很多种,每一种方法都有各自的优缺点。在实际开发中,我们应该根据具体情况选择合适的继承方式。

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

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

下载

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

热门AI工具

更多
Loomy
Loomy Hot

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

音述AI
音述AI Hot

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

DeepSeek

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

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

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

WorkBuddy

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

豆包大模型

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

相关专题

更多
go语言 面向对象
go语言 面向对象

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

6955

2025.09.05

java面向对象
java面向对象

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

362

2025.11.27

C++ 面向对象编程与设计模式实践
C++ 面向对象编程与设计模式实践

本专题整合了 C++ 面向对象编程的核心机制,涵盖类的定义与访问控制、构造函数与析构函数、拷贝语义与移动语义、继承与虚函数多态、抽象类与接口、运算符重载、友元函数等关键知识点,同时结合单例模式、工厂模式、观察者模式、策略模式等常用设计模式的 C++ 实现,帮助开发者写出结构清晰、易于维护的面向对象代码。

364

2026.04.09

Java 面向对象与核心编程机制
Java 面向对象与核心编程机制

系统讲解 Java 面向对象编程的核心知识体系,涵盖类的定义与封装、构造方法与 this/super 关键字、继承与方法重写、多态与向上向下转型、抽象类与接口的区别与设计原则、异常处理机制(try-catch-finally / 自定义异常)、泛型的类型参数与通配符、集合框架(List/Set/Map)的使用与遍历方式,帮助开发者全面掌握 Java 程序设计的核心机制与面向对象思维。

243

2026.04.17

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

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

6955

2025.09.05

java面向对象
java面向对象

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

362

2025.11.27

C++ 面向对象编程与设计模式实践
C++ 面向对象编程与设计模式实践

本专题整合了 C++ 面向对象编程的核心机制,涵盖类的定义与访问控制、构造函数与析构函数、拷贝语义与移动语义、继承与虚函数多态、抽象类与接口、运算符重载、友元函数等关键知识点,同时结合单例模式、工厂模式、观察者模式、策略模式等常用设计模式的 C++ 实现,帮助开发者写出结构清晰、易于维护的面向对象代码。

364

2026.04.09

Java 面向对象与核心编程机制
Java 面向对象与核心编程机制

系统讲解 Java 面向对象编程的核心知识体系,涵盖类的定义与封装、构造方法与 this/super 关键字、继承与方法重写、多态与向上向下转型、抽象类与接口的区别与设计原则、异常处理机制(try-catch-finally / 自定义异常)、泛型的类型参数与通配符、集合框架(List/Set/Map)的使用与遍历方式,帮助开发者全面掌握 Java 程序设计的核心机制与面向对象思维。

243

2026.04.17

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

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

精品课程

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

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