随着 JavaScript 的不断发展，面向对象编程（Object-Oriented Programming，OOP）在前端开发中也越来越重要。ES6 中引入了 class 关键字，使得 JavaScript 中的 OOP 更加容易理解和实现。ES12 中又新增了一些特性，让我们更加便捷地构建类和进行 OOP 编程。
本文将介绍 ES12 中的面向对象编程，包括如何使用 ES12 构建类、如何继承、如何使用私有字段和方法等。通过本文的学习，你将更好地掌握 JavaScript 中的 OOP 编程，提高自己的开发能力。
ES12 中的类
在 ES12 中，我们可以使用 class 关键字来定义类。一个类可以包含属性和方法，可以使用 constructor 函数来初始化属性。下面是一个简单的类的示例：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-上面的代码定义了一个 Person 类，包含 name 和 age 两个属性和一个 sayHello 方法。我们可以创建一个 Person 的实例并调用 sayHello 方法：
const p = new Person("Tom", 20);
p.sayHello(); // 输出：Hello, my name is Tom, I'm 20 years old.继承
在 OOP 中，继承是一个非常重要的概念。ES12 中的类也支持继承，可以使用 extends 关键字来实现继承。下面是一个继承的示例：
-- -------------------- ---- -------
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- ---- --- -- ----- -- -----------------
-
-上面的代码定义了一个 Student 类，继承自 Person 类。Student 类新增了一个 grade 属性，并重写了 sayHello 方法。我们可以创建一个 Student 的实例并调用 sayHello 方法：
const s = new Student("Jerry", 18, 80);
s.sayHello(); // 输出：Hello, my name is Jerry, I'm 18 years old, and my grade is 80.私有字段和方法
在 ES12 中，我们可以使用 # 符号来定义私有字段和方法。私有字段和方法只能在类内部访问，外部无法访问。下面是一个私有字段和方法的示例：
-- -------------------- ---- -------
----- ------ -
--------
------------------- -
------------ - -------
-
-------------- -
------ ------------ - --
-
--------- -
------ ------- - ------------ -- --
-
--------- -
----- -------- - --------------------
----- ---- - ---------------
-------------------- ---------------- --------- ------------ ----- ----------
-
-上面的代码定义了一个 Circle 类，包含一个私有字段 radius 和一个私有方法 getDiameter，以及一个公共方法 getArea 和一个公共方法 getInfo。我们可以创建一个 Circle 的实例并调用 getInfo 方法：
const c = new Circle(5); c.getInfo(); // 输出：Radius: 5, Diameter: 10, Area: 78.53981633974483 console.log(c.#radius); // 报错：Uncaught SyntaxError: Private field '#radius' must be declared in an enclosing class console.log(c.#getDiameter()); // 报错：Uncaught SyntaxError: Private field '#getDiameter' must be declared in an enclosing class
总结
ES12 中的面向对象编程使得 JavaScript 中的 OOP 更加容易理解和实现。我们可以使用 class 关键字来定义类，使用 extends 关键字来实现继承，使用 # 符号来定义私有字段和方法。通过本文的学习，你已经掌握了 ES12 中的 OOP 编程，可以更加便捷地构建类和进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506a43b95b1f8cacd265962