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.
下一章:ES6 Promise
Promise是一种实现JavaScript的异步编程的干净的方式。在Promise之前,Callbacks被用来实现异步编程。让我们从使用回调了解什么是异步编程及其实现开始。 了解回调函数可以作为参数传递 ...