随着 JavaScript 的广泛应用和不断发展,ECMAScript 2015(以下简称 ES6)在语法方面进行了重大的更新,其中包括类和继承的引入。
类的定义
在 ES6 之前,JavaScript 并没有类这个概念,只有对象、函数等构造器。而 ES6 中引入了类的概念,让 JavaScript 更加面向对象化。
一个最基本的类定义语法如下:
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ----------------
-
-接下来我们详细解释上述代码的意思。首先,我们通过 class 关键字定义了一个名为 Person 的类。类包含一个 constructor 方法,它是一个特殊的方法,用来创建并初始化对象。
在上面的代码中,我们在 constructor 方法中定义了两个属性 name 和 age,并使用 this 关键字来将它们绑定到类的实例上。我们还定义了一个 sayHello 方法,它会在控制台输出一条问候语。
类的实例化
在 ES6 中,通过 new 关键字来创建类的实例,实例如下:
let person1 = new Person("Tom", 20);
let person2 = new Person("Jerry", 22);
person1.sayHello(); // 输出 "Hello, my name is Tom."
person2.sayHello(); // 输出 "Hello, my name is Jerry."我们可以根据类创建多个实例,并调用类的方法。上述代码会创建两个名为 person1 和 person2 的实例,并使用 sayHello 方法输出问候语。
继承
JavaScript 中的继承是通过原型链实现的,而 ES6 中引入了更加清晰和直观的继承语法。我们可以通过 extends 关键字定义一个类的子类或派生类,下面是一个例子:
-- -------------------- ---- -------
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
-----------------
---------------- - ----- ------------- -----------
-
-在上述代码中,我们创建了一个 Student 类,它是 Person 类的子类。我们使用 extends 关键字来声明 Student 是 Person 的派生类。此外,我们在 Student 类的构造函数中使用 super 关键字来调用其父类的构造函数,并传递 name 和 age 参数。
我们还重新定义了 sayHello 方法,并在其中使用 super 关键字来调用其父类的同名方法,然后输出学生的年级。
示例代码
以下是一个完整的示例代码,包括类和继承的使用:
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ----------------
-
-
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
-----------------
---------------- - ----- ------------- -----------
-
-
--- ------ - --- ------------- ----
--- ------- - --- ---------------- --- ---
------------------ -- -- ------- -- ---- -- -----
------------------- -- -- ------- -- ---- -- ------- - ---- - ----- - ---------总结
本文介绍了 ES6 中类和继承的使用方法,它们让 JavaScript 更加面向对象化。类的定义包括了构造函数和方法,实例化类使用 new 关键字,继承使用 extends 关键字。希望这篇文章能够帮助读者深入理解 ES6 中的类和继承,并对前端开发有所启发。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6480651048841e9894fdcf89