JS继承之借用构造函数继承和组合继承

JS继承之借用构造函数继承和组合继承

什么是继承?

在面向对象编程中,继承是指从一个类中派生出一个或多个新类的过程。派生类会继承父类的一些属性和方法,同时也可以有自己的一些属性和方法。

在JavaScript中,可以使用各种方式来实现继承,包括原型链继承、构造函数继承、组合继承、Class继承等。

借用构造函数继承

借用构造函数继承是指在子类构造函数中调用父类构造函数,并且使用apply或call方法将this关键字指向子类实例。这种方式可以使子类实例拥有父类构造函数中的实例变量和实例方法。

例如:

function Parent(){
    this.name = "parent";
}
Parent.prototype.sayName = function(){
    console.log(this.name);
}
function Child(){
    Parent.call(this); // 借用构造函数继承
    this.age = 18;
}
var child = new Child();
console.log(child.name); // "parent"
console.log(child.age); // 18
child.sayName(); // TypeError: child.sayName is not a function

上面的例子中,Child构造函数借用Parent构造函数,使得child实例拥有了name属性和age属性。但是child实例并没有继承Parent原型中的sayName方法。

组合继承

组合继承是指使用构造函数继承和原型链继承的组合方式来实现继承。

组合继承首先使用借用构造函数继承来继承实例属性和方法,再通过将子类原型设置为父类实例来继承原型属性和方法。

例如:

function Parent(){
    this.name = "parent";
}
Parent.prototype.sayName = function(){
    console.log(this.name);
}
function Child(){
    Parent.call(this); // 借用构造函数继承
    this.age = 18;
}
Child.prototype = new Parent(); // 原型链继承
Child.prototype.constructor = Child; // 修正constructor
var child = new Child();
console.log(child.name); // "parent"
console.log(child.age); // 18
child.sayName(); // "parent"

上面的例子中,Child构造函数借用Parent构造函数,使得child实例拥有了name属性和age属性。而将Child原型设置为Parent的实例,使得child实例还继承了Parent原型中的sayName方法。

同时,需要修正Child原型的constructor属性,指向Child构造函数本身。

示例说明

示例1

function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
}

function Dog(name) {
  Animal.call(this, name); // 借用构造函数继承
}
Dog.prototype = new Animal(); // 组合继承
Dog.prototype.constructor = Dog; // 修正constructor

var dog = new Dog('Doudou');
console.log(dog.name); // Doudou
dog.eat(); // Doudou is eating.

上面的例子中,Animal构造函数有一个实例属性name和一个原型方法eat。Dog构造函数通过借用构造函数继承Animal的实例属性name,再通过组合继承继承Animal的原型方法eat。最终,dog实例既拥有了Animal的实例属性name,也拥有了Animal的原型方法eat。

示例2

function Shape(x, y) {
  this.x = x;
  this.y = y;
}
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.log('Shape moved to', this.x, this.y);
}

function Circle(x, y, r) {
  Shape.call(this, x, y); // 借用构造函数继承
  this.r = r;
}
Circle.prototype = new Shape(); // 组合继承
Circle.prototype.constructor = Circle; // 修正constructor
Circle.prototype.area = function() {
  return Math.PI * this.r * this.r;
}

var circle = new Circle(0, 0, 10);
circle.move(5, 5); // Shape moved to 5 5
console.log(circle.area()); // 314.1592653589793

上面的例子中,Shape构造函数有两个实例属性x和y,以及一个原型方法move。Circle构造函数继承Shape构造函数的实例属性x和y,再通过组合继承继承Shape构造函数的原型方法move和自己的原型方法area。最终,circle实例既拥有了Shape的实例属性x和y和原型方法move,也拥有了自己的原型方法area。同时,circle可以调用move方法改变自己的位置,还可以获取自己的面积。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS继承之借用构造函数继承和组合继承 - Python技术站

(0)
上一篇 2023年6月26日
下一篇 2023年6月26日

相关文章

  • 解析Android开发优化之:对界面UI的优化详解(三)

    解析Android开发优化之:对界面UI的优化详解(三) 在Android开发中,对界面UI的优化是非常重要的,可以提升用户体验和应用性能。本文将详细讲解如何对界面UI进行优化。 1. 使用合适的布局 选择合适的布局是界面优化的第一步。在Android中,常用的布局有LinearLayout、RelativeLayout、ConstraintLayout等。…

    other 2023年9月5日
    00
  • 详解AngularJS控制器的使用

    当然!下面是关于\”详解AngularJS控制器的使用\”的完整攻略,包含两个示例说明。 详解AngularJS控制器的使用 在AngularJS中,控制器(Controller)是用于处理视图和数据之间交互的组件。下面是使用控制器的步骤和示例说明: 定义控制器:在JavaScript文件中,使用controller函数来定义一个控制器。 示例代码: app…

    other 2023年8月20日
    00
  • Java从服务端下载Excel模板文件的两种方法

    当我们需要在Java服务端下载Excel模板文件时,一般有两种方法可以实现: 方法一:使用绝对路径进行下载 首先,需要在服务器上创建一个目录,用于存储下载的Excel模板文件。然后,使用Java提供的File类获取该目录的绝对路径。最后,将绝对路径和需要下载的Excel模板文件名拼接起来,形成完整的文件路径,并使用File类获取该文件的输入流,从而实现下载操…

    other 2023年6月27日
    00
  • 小米系统1.6破解版下载 小米系统1.6公测版下载地址

    很抱歉,我不能提供关于破解软件或非法下载的信息。我是一个AI助手,受到道德和法律准则的约束,不能支持或鼓励任何非法活动。如果您有其他关于小米系统1.6的问题,我将很乐意为您提供帮助。

    other 2023年8月4日
    00
  • nvstreamsvc.exe应用程序错误弹窗关不掉的解决办法

    下面是详细的攻略解析: 问题描述 当你使用 NVIDIA 显卡驱动程序时,可能会遇到 “nvstreamsvc.exe 应用程序错误” 的弹窗,但你却无法关闭它,这会影响你的正常使用。 解决方法 方法一:重置显卡驱动 按下“Win + R”组合键,打开“运行”对话框,输入命令“devmgmt.msc”并回车,打开“设备管理器”; 找到“显示适配器”下的 NV…

    other 2023年6月25日
    00
  • vue日程/日历管理插件fullcalendar(模仿wps日程)

    Vue日程/日历管理插件FullCalendar攻略 FullCalendar是一个基于jQuery和Moment.js的开源日历插件,用于在Web应用中显示日程和事件。FullCalendar还提供了许多可定制的选项,使您可以轻松地自定义日历的外观和行为。在本攻略中,我们将详细讲解如何在Vue应用程序中使用FullCalendar插件。 FullCalen…

    other 2023年5月9日
    00
  • Windows下编译安装php扩展eAccelerator教程

    Windows下编译安装php扩展eAccelerator 准备工作 下载并安装Visual Studio(如果没有安装的话),建议安装VS2019 Community版本,官网下载地址为:https://visualstudio.microsoft.com/vs/community/ 下载php安装包,如php-7.4.13-Win32-vc15-x64.…

    other 2023年6月26日
    00
  • Win7系统中的命令行sxstrace.exe工具的使用方法

    下面我将详细讲解 Win7系统中的命令行 sxstrace.exe 工具的使用方法: 1. 简介 sxstrace.exe 是 Microsoft Windows 操作系统中的一个命令行工具,它用于跟踪应用程序清单 (Application Manifest) 的加载和解析,它可以帮助开发人员确保应用程序配置正确。同时,当应用程序遭遇“依赖关系不满足 (si…

    other 2023年6月26日
    00
合作推广
合作推广
分享本页
返回顶部