JavaScript 中,可以使用类继承来创建子类

简介: JavaScript 中,可以使用类继承来创建子类

在 JavaScript 中,可以使用类继承来创建子类,并且还可以使用构造函数和初始化块来初始化对象。让我们一起来看看如何在 JavaScript 中实现子类继承以及对象初始化。

首先,让我们创建一个父类 Animal,并定义它的构造函数和一个初始化块:

class Animal {
   
  constructor(name) {
   
    this.name = name;
    console.log("Animal constructor is called.");
  }

  init() {
   
    console.log("Animal initialization block is called.");
  }
}

接下来,我们将创建一个子类 Dog,它将继承自 Animal 父类,并实现自己的构造函数和初始化块:

class Dog extends Animal {
   
  constructor(name, breed) {
   
    super(name); // 调用父类的构造函数
    this.breed = breed;
    console.log("Dog constructor is called.");
  }

  init() {
   
    super.init(); // 调用父类的初始化块
    console.log("Dog initialization block is called.");
  }
}

现在,我们可以实例化 Dog 类,并观察构造函数和初始化块的调用顺序:

let myDog = new Dog('Buddy', 'Golden Retriever');
myDog.init();

当我们实例化 Dog 类时,会按照以下顺序调用构造函数和初始化块:

  1. 首先调用父类 Animal 的构造函数,打印出 "Animal constructor is called."。
  2. 然后调用子类 Dog 的构造函数,打印出 "Dog constructor is called."。
  3. 接着调用父类 Animal 的初始化块,打印出 "Animal initialization block is called."。
  4. 最后调用子类 Dog 的初始化块,打印出 "Dog initialization block is called."。

这样,我们就成功地实现了子类继承和对象初始化的功能。在实际开发中,这种方式可以帮助我们更好地管理对象的构造和初始化过程,从而提高代码的可维护性和可读性。

多态性(Polymorphism)是面向对象编程中的一个核心概念,它允许对象以多种形式存在。当不同类的对象可以通过相同的接口进行操作时,多态性就发挥了作用。在 JavaScript 中,多态性通常通过继承和方法重写(Override)来实现。

我们可以通过一个例子来展示多态性在 JavaScript 中的应用。

首先,定义一个基类 Animal 以及它的一个方法 speak

class Animal {
   
  constructor(name) {
   
    this.name = name;
  }

  speak() {
   
    console.log(`${
     this.name} makes a sound.`);
  }
}

然后,我们定义两个子类 DogCat,并分别重写 speak 方法:

class Dog extends Animal {
   
  speak() {
   
    console.log(`${
     this.name} barks.`);
  }
}

class Cat extends Animal {
   
  speak() {
   
    console.log(`${
     this.name} meows.`);
  }
}

现在,我们可以创建一些动物对象,并调用它们的 speak 方法:

let animals = [new Dog('Buddy'), new Cat('Whiskers')];

animals.forEach(animal => animal.speak());

在这个例子中,我们创建了一个包含 DogCat 对象的数组。尽管它们是不同的类,但我们可以使用相同的接口(即 speak 方法)来操作它们。运行这段代码会输出:

Buddy barks.
Whiskers meows.

这就是多态性的一个简单示例。通过多态性,我们可以编写更灵活和可扩展的代码,因为我们可以针对基类编程,而无需关心具体的子类实现。

多态性应用场景

多态性在实际开发中有很多应用场景,例如:

  1. 接口和抽象类:定义一个通用接口或抽象类,不同的子类实现具体的行为。
  2. 策略模式:使用不同的策略对象来完成某个任务,不同的策略对象实现相同的接口。
  3. 工厂模式:工厂方法返回基类类型的对象,而实际的对象可以是任何具体的子类。

通过合理应用多态性,可以使代码更加通用、灵活和易于维护。

目录
相关文章
|
14天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
34 7
|
14天前
|
JavaScript 前端开发
在 JavaScript 中,实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括:1) 原型链继承,利用原型查找,实例共享原型属性;2) 借用构造函数,避免共享,但方法不在原型上复用;3) 组合继承,结合两者优点,常用但有额外开销;4) ES6 的 class,语法糖,仍基于原型链,提供直观的面向对象编程。
22 7
|
10天前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
24 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
11天前
|
JavaScript 前端开发
JavaScript进阶-原型链与继承
【6月更文挑战第18天】JavaScript的原型链和继承是其面向对象编程的核心。每个对象都有一个指向原型的对象链,当查找属性时会沿着此链搜索。原型链可能导致污染、效率下降及构造函数与原型混淆的问题,应谨慎扩展原生原型、保持原型结构简洁并使用`Object.create`或ES6的`class`。继承方式包括原型链、构造函数、组合继承和ES6的Class继承,需避免循环引用、方法覆盖和不当的构造函数使用。通过代码示例展示了这两种继承形式,理解并有效利用这些机制能提升代码质量。
|
8天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
9 1
|
11天前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
16 2
|
11天前
|
存储 JavaScript 前端开发
【JavaScript】JavaScript 中的 Class 类:全面解析
【JavaScript】JavaScript 中的 Class 类:全面解析
17 1
|
14天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
|
24天前
|
存储 移动开发 JavaScript
uni-app 64聊天类chat.js封装(一)
`uni-app` 是一个使用 Vue.js 开发所有前端应用的框架,可以编译到iOS、Android、H5以及各种小程序等多个平台。当你提到“64聊天类`chat.js`封装”时,我假设你希望了解如
|
29天前
|
JavaScript Java 测试技术
基于ssm+vue.js的新闻类网站附带文章和源代码设计说明文档ppt
基于ssm+vue.js的新闻类网站附带文章和源代码设计说明文档ppt
19 2