- ECMAScript/ES6版本
- ECMAScript/ES6开发环境安装
- ECMAScript/ES6语法
- ECMAScript/ES6散布运算符
- ECMAScript/ES6 Rest参数
- ECMAScript/ES6变量
- ECMAScript/ES6运算符
- ECMAScript/ES6循环
- ECMAScript/ES6决策定制
- ECMAScript/ES6函数
- ECMAScript/ES6箭头函数
- ECMAScript/ES6生成器
- ECMAScript/ES6 IIFE(立即调用函数表达式)
- ECMAScript/ES6数组
- ECMAScript/ES6数组方法
- ECMAScript/ES6数组解构
- ECMAScript/ES6映射/Map
- ECMAScript/ES6集合/Set
- ECMAScript/ES6对象
- ECMAScript/ES6对象解构
- ECMAScript/ES6类
- ECMAScript/ES6字符串
- ECMAScript/ES6模板文字
- ECMAScript/ES6事件
- ECMAScript/ES6 Cookies
- ECMAScript/ES6对话框
- ECMAScript/ES6页面重定向
- ECMAScript/ES6 Number对象
- ECMAScript/ES6 void关键字
- ECMAScript/ES6页面打印
- ECMAScript/ES6 Boolean对象
ECMAScript/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; } }
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
扫描二维码
程序员编程王