ECMAScript/ES6类

精华

小牛编辑

175浏览

2023-03-14

类是面向对象编程(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;  
    }  
}

1.实例化类的对象

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

语法

var obj_name = new class_name([arguements])

语法

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

2.访问函数

对象可以访问类的属性和函数，使用.点符号(或句点)，用于访问类的数据成员。

语法

obj.function_name();

示例代码：

'use strict'   
class Student {   
   constructor(name, age) {   
      this.n = name;   
      this.a = age;  
   }   
   studentInfo() {   
      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，并传递给构造函数的参数值来初始化这两属性值。

该类中的函数studentInfo将打印属性name和age的值。

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

注意：在类中必须包含构造函数定义，因为默认情况下，每个类都有一个构造函数。

3.static关键字

static关键字用于在类中创建静态函数。静态函数只能通过使用类名来引用。

示例

'use strict'   
class Example {   
   static show() {   
      console.log("Static Function")   
   }   
}   
Example.show() // 不用 new 实例化，直接调用函数。

执行上面示例代码，得到以下结果：

Static Function

4.类继承

在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('Xntutor');   
obj.show()

在上面的示例中，我们声明了一个类：Student。通过使用extends关键字创建一个新类：User，该类与父类Student具有相同的特征。因此可以看到这两个类之间存在继承关系。

执行上面示例代码，得到以下结果：

The name of the student is:  Xntutor

5.继承类型

继承可以分为单级继承，多级继承和多级继承。 ES6不支持多重继承。

5.1.单级继承

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

5.2.多重继承

在多重继承中，一个类可以从几个类中继承。 ES6不支持它。

5.3.多层次继承

在多级继承中，从另一个派生类创建一个派生类。因此，多级继承具有多个父类。

6.方法重写和继承

此功能允许子类提供其父类之一已经提供的方法的特定实现。

以下是方法覆盖定义的一些规则 -

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

下面我们通过以下代码来理解：

'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();

在上面的示例中，超类函数的实现已在子类中更改。执行以上代码后，将获得以下输出：

运行上面示例代码，得到以下结果：

It is the show() method from the child class

7.super关键字

它允许子类调用直接父类的属性，方法和构造函数。它在ECMAScript 2015或ES6中引入。在对象常量和类中的任何方法的定义中，super.prop和super [expr]表达式都是可读的。

语法

super(arguments);

示例

在此示例中，父类的特征已扩展到其子类。这两个类都有其独特的属性。这里使用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();

运行上面示例代码，得到以下结果：

It is the show() method from the parent class
It is the show() method from the child class