ES6 - 类

面向对象是一种遵循现实世界建模的软件开发范式。面向对象将程序视为对象的集合，这些对象通过称为方法的机制相互通信。ES6 也支持这些面向对象的组件。

面向对象编程概念

首先，让我们了解

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

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

在 ES6 之前，创建类是一件麻烦事。在 ES6 中，可以使用 class 关键字创建类。

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

语法：声明类

class 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 ])

其中，

new 关键字负责实例化。
表达式的右侧调用构造函数。如果构造函数是参数化的，则应向其传递值。

示例：实例化一个类

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

Setter 和 Getter

Setter

当尝试设置属性的值时，将调用 setter 函数。set 关键字用于定义 setter 函数。定义 setter 函数的语法如下所示 -

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

prop是要绑定到给定函数的属性的名称。val是变量的别名，该变量保存尝试分配给属性的值。使用 ES6，表达式可以用作要绑定到给定函数的属性名称。

示例

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      set rollno(newRollno){
         console.log("inside setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //setter is called
   s1.rollno = 201
   console.log(s1)
</script>

以上示例定义了一个名为 Student 的类，其中包含三个属性，即rno、fname 和 lname。setter 函数rollno()用于设置 rno 属性的值。

上述代码的输出将如下所示 -

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside setter
Student {rno: 201, fname: "Sachin", lname: "Tendulkar"}

示例

以下示例演示了如何使用表达式作为具有setter 函数的属性名称。

<script>
   let expr = 'name';
      let obj = {
      fname: 'Sachin',
      set [expr](v) { this.fname = v; }
   };
   console.log(obj.fname);
   obj.name = 'John';
   console.log(obj.fname);
</script>

上述代码的输出将如下所示 -

Sachin
John

Getter

当尝试获取属性的值时，将调用getter 函数。get 关键字用于定义 getter 函数。定义 getter 函数的语法如下所示 -

{get prop() { ... } }
{get [expression]() { ... } }

prop是要绑定到给定函数的属性的名称。

表达式 - 从 ES6 开始，您还可以使用表达式作为要绑定到给定函数的属性名称。

示例

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      get fullName(){
         console.log('inside getter')
         return this.fname + " - "+this.lname
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //getter is called
   console.log(s1.fullName)
</script>

以上示例定义了一个名为 Student 的类，其中包含三个属性，即rno、fname 和 lname。getter 函数fullName()连接fname和lname并返回一个新字符串。

上述代码的输出将如下所示 -

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside getter
Sachin - Tendulkar

示例

以下示例演示了如何使用表达式作为具有 getter 函数的属性名称 -

<script>
   let expr = 'name';
   let obj = {
      get [expr]() { return 'Sachin'; }
   };
   console.log(obj.name);
</script>

上述代码的输出将如下所示 -

Sachin

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 类扩展了该类。由于类之间存在继承关系，因此子类，即 Circle 类可以隐式访问其父类的属性，即 area。

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

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 关键字用于在父类 - PrinterClass 中调用 doPrint() 函数定义。

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

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

打印页面