引言
在 JavaScript 中，对象的继承是通过原型链实现的。在 ES6 中，我们可以使用 class 关键字来定义类，从而实现面向对象编程。然而，使用 class 关键字定义类时，我们也需要了解一些关于原型链的知识，比如 proto 和 constructor。在本文中，我们将详细介绍 ES6 下的 proto、constructor、class 的使用，并提供示例代码以帮助读者更好地理解。
什么是 proto？
在 JavaScript 中，每个对象都有一个指向它原型的引用，即proto。原型是一个对象，它包含了对象的属性和方法，当对象访问一个属性或方法时，如果该对象本身没有该属性或方法，JavaScript 引擎会沿着该对象的原型链向上查找，直到找到为止。
我们可以使用 Object.getPrototypeOf() 方法来获取一个对象的原型。比如：
const obj = {};
console.log(Object.getPrototypeOf(obj)); // 输出 {}上述代码中，obj 对象的原型是空对象 {}。
什么是 constructor？
在 JavaScript 中，每个函数都有一个 prototype 属性，它是函数的一个对象，除了含有函数的属性和方法之外，它还包含了一个 constructor 属性，指向该函数本身。
function Person() {}
console.log(Person.prototype.constructor === Person); // 输出 true可以看到，Person.prototype.constructor 指向了 Person 函数本身。
ES6 下的 class
在 ES6 中，我们可以使用 class 关键字来定义类。class 关键字的使用类似于传统面向对象编程语言中的类。它引入了一个新的概念，即类构造函数。类构造函数具有以下特征：
- 类构造函数的名称必须是大写开头的驼峰式命名。
- 类构造函数中使用
constructor方法来初始化对象的属性。 - 类的属性和方法都可以定义在类的体中。
- 类的方法可以使用
get和set关键字定义属性的访问器。
下面是一个示例：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ----------------
-
--- ---------- -
------ --------- - - -----
-
--- -------------- -
----- ----- - ------------ ---
--------- - ---------
-
-
----- ---- - --- -------------- ----
---------------- -- -- ------- -- ---- -- ------
--------------------------- -- -- ----- ----
------------- - ----- -------
----------------------- -- -- ------在上述示例中，我们定义了一个 Person 类，它具有 name 和 age 两个属性，以及 sayHello()、fullName和 fullName() 三个方法。
class 的原型
当我们通过 class 关键字声明一个类时，JavaScript 引擎会自动为它创建一个原型对象，类的实例都从该原型对象继承属性和方法。我们可以使用 Object.getPrototypeOf() 方法来获取类的原型对象。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ----------------
-
-
----- ---- - --- -------------- ----
----------------------------------------- -- -- ------ --上述示例中，类的原型对象是 Person {}。
原型链
在 JavaScript 中，所有的对象都有一个原型对象，包括函数。函数的原型对象是 Function.prototype。Function.prototype 的原型对象是 Object.prototype。因此，所有对象的原型链都以 Object.prototype 结束。
在 ES6 的 class 中，我们也可以使用继承来实现类之间的代码共享和代码重用。class 的继承是通过 extends 关键字实现的。子类使用 super 关键字访问父类的构造函数和原型对象。
下面是一个示例：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
-------------- -- - ----------------
-
-
----- --- ------- ------ -
----------------- -
------------
-
-
----- --- - --- -----------
--------------- -- -- -- -- - -----
--------------------------------------------------------------- -- -- ------ --上述示例中，我们定义了一个 Animal 类，它具有 name 属性和 sayHello() 方法。然后我们定义了一个 Dog 类，它继承了 Animal 类并使用 super 关键字调用了父类的构造函数。最后我们创建了一个 Dog 对象，并使用 Object.getPrototypeOf(Object.getPrototypeOf(dog)) 获取了该对象的原型对象。
总结
本文详细介绍了 ES6 下的 proto、constructor、class 的使用。我们了解了对象的原型、函数的原型和类的原型等概念，以及类的构造函数、继承和原型链等特性。希望本文可以帮助读者更好地理解 ES6 下的前端开发技术，并为其提供代码示例和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9117948841e9894560034