0

0

JavaScript如何实现继承的

PHPz

PHPz

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

|

1362人浏览过

|

来源于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指向子类实例,从而实现了继承。但由于构造函数继承并不会将父类原型中的方法继承下来,因此我们在子类中无法直接调用父类原型中的方法。

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

三、组合继承

阳光订餐系统
阳光订餐系统

欢迎使用阳光订餐系统,本系统使用PHP5+MYSQL开发而成,距离上一个版本1.2.8发布已经有一年了。本系统集成了留言本,财务管理,菜单管理,员工管理,安全管理,WAP手机端等功能,并继续继承1.X老版本简单、实用、美观的特点,在老版本上的基础上做了如下更新:1.更简洁的前台与后台,菜单及功能布局更合理。2.更合理的文件结构,合理适度的模板机制以及OO运用,更易于理解的代码,更适于二次开发;3.

下载

组合继承是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工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

56

2025.09.05

java面向对象
java面向对象

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

52

2025.11.27

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

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

56

2025.09.05

java面向对象
java面向对象

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

52

2025.11.27

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

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

56

2025.09.05

java面向对象
java面向对象

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

52

2025.11.27

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

8

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

8

2026.01.30

热门下载

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

精品课程

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

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