ES6 - 类

ES6 类

面向对象是一种遵循真实世界建模的软件开发范例。“对象取向”将程序视为通过称为方法的机制彼此通信的对象集合。ES6也支持这些面向对象的组件。

面向对象的编程概念

首先，让我们理解

  • 对象 - 对象是任何实体的实时表示。根据Grady Brooch的说法，每个物体都有3个特征
    • 状态 - 由对象的属性描述。
    • 行为 - 描述对象如何操作。
    • 标识 - 区分对象与一组类似对象的唯一值。
  • 类 - OOP方面的类是创建对象的蓝图。一个类封装了对象的数据。
  • 方法 - 方法促进对象之间的通信。

让我们将这些面向对象的概念转化为现实世界中的概念。例如：汽车是具有数据（品牌，型号，车门数量，车辆编号等）和功能（加速，换挡，打开车门，打开前大灯等）的物体。

在ES6之前，创建一个课是一件非常繁琐的事情。可以使用ES6中的class关键字创建类。

类可以通过声明它们或使用类表达式包含在代码中。

语法：声明一个类

lass Class_name {  
}

语法：类表达式

var var_name = new Class_name {  
}

class关键字后面跟着类名称。命名一个类时，必须考虑标识符的规则（已经讨论过）。

类定义可以包括以下内容 -

  • 构造函数 - 负责为类的对象分配内存。
  • 函数 - 函数表示对象可以采取的操作。他们有时也被称为方法。

这些组件被称为该类的数据成员。

注 - 类体只能包含方法，而不能包含数据属性。

示例：声明一个类

class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

示例：类表达式

var Polygon = class {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

上面的代码片段表示一个未命名的类表达式。一个命名的类表达式可以写成。

var Polygon = class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}

注 - 与变量和函数不同，类不能被挂起。

创建对象

要创建类的实例，请使用new关键字，然后使用类名称。以下是相同的语法。

var object_name= new class_name([ arguments ])

因此：

  • 新的关键字负责实例化。
  • 表达式的右侧调用构造函数。如果参数化构造函数应该传递值。

示例：实例化一个类

var obj = new Polygon(10,12)

访问函数

一个类的属性和功能可以通过该对象来访问。使用“.”点符号（称为句点）来访问类的数据成员。

//accessing a function
obj.function_name()

示例：将它们放在一起

'use strict'
class Polygon {
   constructor(height, width) {
      this.h = height;
      this.w = width;
   }
   test() {
      console.log("The height of the polygon: ", this.h)
      console.log("The width of the polygon: ",this. w)
   }
}

//creating an instance  
var polyObj = new Polygon(10,20);
polyObj.test();

上面给出的例子声明了一个类'Polygon'。该类的构造函数分别具有两个参数 - 高度和宽度。'this'关键字引用类的当前实例。换句话说，上面的构造函数用传递给构造函数的参数值初始化两个变量h和w。类中的test（）函数打印高度和宽度的值。

为了使脚本正常工作，创建了类Polygon的一个对象。该对象由polyObj变量引用。该函数然后通过这个对象调用。

在成功执行上述代码时，会显示以下输出。

The height of the polygon:  10
The width of the polygon:  20

Static 关键字

static关键字可以应用于类中的函数。静态成员由类名引用。

示例

'use strict'
class StaticMem {
   static disp() {
      console.log("Static Function called")
   }
}
StaticMem.disp() //invoke the static metho

注 - 包含构造函数定义不是强制性的。默认情况下，每个类都有一个构造函数。

在成功执行上述代码时，会显示以下输出。

Static Function called

instanceof 操作符

如果对象属于指定的类型，则instanceof运算符返回true。

示例

'use strict'
class Person{ }
var obj = new Person()
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

在成功执行上述代码时，会显示以下输出。

obj is an instance of Person True

类继承

ES6支持继承的概念。继承是程序从现有实体（这里是一个类）创建新实体的能力。扩展来创建更新类的类称为父类/超类。新创建的类称为子/子类。

一个类使用'extends'关键字从另一个类继承。子类继承除父类的构造函数之外的所有属性和方法。

以下是相同的语法。

class child_class_name extends parent_class_name

示例：类继承

'use strict'
class Shape {
   constructor(a) {
      this.Area = a
   }
}
class Circle extends Shape {
   disp() {
      console.log("Area of the circle:  "+this.Area)
   }
}
var obj = new Circle(223);
obj.disp()

上面的例子声明了一个Shape类。该类由Circle类扩展。因为在类之间存在继承关系，所以子类即圆类获得对其父类属性（即区域）的隐式访问。

在成功执行上述代码时，会显示以下输出。

Area of Circle: 223

继承可以被分类为：

  • 单一继承 - 每个类最多可以从一个父类继承。
  • 多继承 - 一个类可以继承多个类。ES6不支持多重继承。
  • 多级 - 考虑下面的例子。
'use strict'
class Root {
   test() {
      console.log("call from parent class")
   }
}
class Child extends Root {}
class Leaf extends Child   

//indirectly inherits from Root by virtue of inheritance {}
var obj = new Leaf();
obj.test()

类Leaf通过多级继承来从Root和Child类派生属性。

在成功执行上述代码时，会显示以下输出。

call from parent class

类继承和方法重写

方法重写 是子类重新定义超类方法的机制。以下例子说明了相同的情况

'use strict' ;
class PrinterClass {
   doPrint() {
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass {
   doPrint() {
      console.log("doPrint() is printing a string…");
   }
}
var obj = new StringPrinter();
obj.doPrint();

在上面的例子中，子类已经改变了超类功能的实现。

在成功执行上述代码时，会显示以下输出。

doPrint() is printing a string…

Super 关键字

ES6使子类能够调用其父类数据成员。这是通过使用super关键字来实现的。super关键字用于引用类的直接父级。

考虑下面的例子 -

'use strict'
class PrinterClass {
   doPrint() {
      console.log("doPrint() from Parent called…")
   }
}  
class StringPrinter extends PrinterClass {
   doPrint() {
      super.doPrint()
      console.log("doPrint() is printing a string…")
   }
}
var obj = new StringPrinter()
obj.doPrint()

类StringWriter中的doPrint（）重新定义，发出对其父类版本的调用。换句话说，super关键字用于调用父类中的doPrint（）函数定义 - PrinterClass。

在成功执行上述代码时，会显示以下输出

doPrint() from Parent called.
doPrint() is printing a string.