ES6类介绍和用法详解

本文概述

从类实例化一个对象
访问功能
静态关键字
类继承
继承类型
方法重写和继承
超级关键字

类是面向对象编程(OOP)的重要组成部分。类用于定义实际对象建模的蓝图, 并将代码组织为可重用和逻辑部分。
在ES6之前, 很难用JavaScript创建一个类。但是在ES6中, 我们可以使用class关键字创建类。我们可以通过类表达式或使用类声明在代码中包含类。
类定义只能包含构造函数和函数。这些组件一起称为类的数据成员。这些类包含将内存分配给类对象的构造函数。类包含负责对对象执行操作的函数。
注意：类的主体仅包含方法, 而不是数据属性。语法：类表达式

var var_name = new class_name {}

语法：类声明

class Class_name{}

让我们看一下类表达式和类声明的图示。
示例-类声明

class Student{constructor(name, age){this.name = name; this.age = age; }}

示例-类表达式

var Student = class{constructor(name, age){this.name = name; this.age = age; }}

从类实例化一个对象像其他面向对象的编程语言一样, 我们可以使用new关键字从类中实例化一个对象。
语法

var obj_name = new class_name([arguements])

例子

var stu = new Student('Peter', 22)

访问功能该对象可以访问类的属性和功能。我们使用” 。” 点符号(或句点), 用于访问类的数据成员。
语法

obj.function_name();

例子

'use strict' class Student { constructor(name, age) { this.n = name; this.a = age; } stu() { console.log("The Name of the student is: ", this.n) console.log("The Age of the student is: ", this. a) } } var stuObj = new Student('Peter', 20); stuObj.stu();

在上面的示例中, 我们声明了一个Student类。该类的构造函数分别包含两个参数name和age。关键字” this” 是指该类的当前实例。我们也可以说上述构造函数初始化两个变量” n” 和” a” 以及传递给构造函数的参数值。
该类中的函数stu()将打印name和age的值。
输出如下

The Name of the student is:PeterThe Age of the student is:20

注意：在类中必须包含构造函数定义, 因为默认情况下, 每个类都有一个构造函数。静态关键字 static关键字用于在类中创建静态函数。静态函数只能通过使用类名来引用。
例子

'use strict' class Example { static show() { console.log("Static Function") } } Example.show() //invoke the static method

输出如下

Static Function

类继承在ES6之前, 继承的实现需要几个步骤。但是ES6通过使用extend和super关键字简化了继承的实现。
继承是从现有实体创建新实体的能力。为创建新类而扩展的类称为超类/父类, 而新创建的类称为子类/子类。
可以使用’ extends’ 关键字从另一个类继承一个类。除了父类的构造函数之外, 子类继承所有属性和方法。
语法

class child_class_name extends parent_class_name{}

一个类通过使用extends关键字从另一个类继承。
例子

'use strict' class Student { constructor(a) { this.name = a; } } class User extends Student { show() { console.log("The name of the student is:"+this.name) } } var obj = new User('Sahil'); obj.show()

在上面的示例中, 我们声明了一名班级学生。通过使用extends关键字, 我们可以创建一个新类User, 该类与父类Student具有相同的特征。因此, 我们可以看到这些类之间存在继承关系。
输出如下

The name of the student is:Sahil

继承类型继承可以分为单级继承, 多级继承和多级继承。 ES6不支持多重继承。
单级继承
它定义为继承, 其中派生类只能从一个基类继承。它允许派生类继承基类的行为和属性, 从而实现代码的可重用性以及向现有代码添加新功能。它使代码的重复性降低。

文章图片
多重继承
在多重继承中, 一个类可以从几个类中继承。 ES6不支持它。

文章图片
多层次继承
在多级继承中, 从另一个派生类创建一个派生类。因此, 多级继承具有多个父类。

文章图片
让我们用下面的例子来理解它。
例子

class Animal{eat(){console.log("eating..."); }}class Dog extends Animal{bark(){console.log("barking..."); }}class BabyDog extends Dog{weep(){console.log("weeping..."); }}var d=new BabyDog(); d.eat(); d.bark(); d.weep();

输出如下

eating...barking...weeping...

方法重写和继承此功能允许子类提供其父类之一已经提供的方法的特定实现。
为方法覆盖定义了一些规则-

方法名称必须与父类中的名称相同。
方法签名必须与父类中的相同。

让我们尝试理解相同的插图：
例子

'use strict' ; class Parent { show() { console.log("It is the show() method from the parent class"); }}class Child extends Parent { show() { console.log("It is the show() method from the child class"); } } var obj = new Child(); obj.show();

【ES6类介绍和用法详解】在上面的示例中, 超类函数的实现已在子类中更改。成功执行以上代码后, 你将获得以下输出：
输出如下

It is the show() method from the child class

超级关键字它允许子类调用直接父类的属性, 方法和构造函数。它在ECMAScript 2015或ES6中引入。在对象常量和类中的任何方法的定义中, super.prop和super [expr]表达式都是可读的。
语法
超级(参数)；
例子
在此示例中, 父类的特征已扩展到其子类。这两个类都有其独特的属性。在这里, 我们使用super关键字来访问父类到子类的属性。

'use strict' ; class Parent { show() { console.log("It is the show() method from the parent class"); }}class Child extends Parent { show() {super.show(); console.log("It is the show() method from the child class"); } } var obj = new Child(); obj.show();

输出如下