在前端开发中，面向对象编程已经成为了解决代码可维护性、复用性等问题的重要方法。在ES5及以前，JavaScript中的面向对象编程主要依靠原型对象和构造函数实现，然而在ES6中，JavaScript引入了Class关键字，使得ES6中的面向对象编程更加完备和易用。接下来我们来对比一下ES5和ES6中的面向对象编程。
ES5中的面向对象编程
在ES5中，JavaScript中的对象是通过原型链来实现继承的。每个对象都有一个prototype属性，它指向了其原型对象。如果在原型对象中添加了某个属性或方法，那么这个属性或方法也会被对象所共享。
构造函数
构造函数是ES5中面向对象编程的重要部分。通过构造函数，我们可以创建一个具有某些特定属性和方法的对象。
-- -------------------- ---- -------
-------- ------------ ---- -
--------- - -----
-------- - ----
---------- - ---------- -
------------------- -- ---- -- - - --------- - -- --- - -- - - -------- - - ----- -------
-
-
--- ------- - --- --------------- ----
---------------- -- --------- -- ---- -- ------ --- - -- -- ----- -----上述代码中，我们定义了一个名为Person的构造函数，通过它可以创建一个Person对象。通过this关键字，我们可以将参数name和age赋值给Person对象的相应属性，speak方法也被添加到Person对象中。通过new关键字调用构造函数，我们可以创建一个新的Person对象，实现了面向对象编程的封装、继承和多态。
原型对象
在ES5中，每个对象都有一个prototype属性，它指向了其原型对象。这个原型对象也是一个普通对象，可以添加属性和方法。
-- -------------------- ---- ------- -------- ------------ ---- - --------- - ----- -------- - ---- - ---------------------- - ---------- - ------------------- -- ---- -- - - --------- - -- --- - -- - - -------- - - ----- ------- - --- ------- - --- --------------- ---- ---------------- -- --------- -- ---- -- ------ --- - -- -- ----- -----
上述代码中，我们将speak方法添加到Person对象的原型对象中。这样，所有Person对象都可以使用该方法，实现了面向对象编程的封装、继承和多态。另外，通过原型对象的继承链，我们可以方便地实现属性和方法的重写，从而实现了面向对象编程的多态。
ES6中的面向对象编程
在ES6中，JavaScript引入了Class关键字，使得面向对象编程更加完善和易用。使用Class关键字，我们可以更加简洁地定义类和类的继承。
Class定义类
在ES6中，我们可以通过Class关键字来定义类。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
------------------- -- ---- -- ------------- --- - -- ----------- ----- -------
-
-
--- ------- - --- --------------- ----
---------------- -- --------- -- ---- -- ------ --- - -- -- ----- -----上述代码中，我们使用Class关键字定义了一个名为Person的类。类中使用了constructor方法定义了构造函数，并在其中使用this关键字将参数name和age赋值给了实例对象。类中还定义了一个speak方法，通过${}语法可以更加方便地输出字符串。
继承
向ES6中的类中添加继承关系也十分简单。
-- -------------------- ---- -------
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
------- -
------------------------- -- -------- -- ----- -----------------
-
-
--- -------- - --- -------------- --- ----
----------------- -- ----------
----------------- -- ----上述代码中，我们定义了一个名为Student的子类，继承自Person类。在构造函数中使用super关键字调用父类构造函数，并添加了子类特有的属性grade和方法study。我们可以看到，除了使用super关键字调用父类构造函数以外，子类的定义和普通类并没有什么区别。
总结
ES6中的Class关键字使得JavaScript的面向对象编程更加完善和易用。使用Class关键字，我们可以更加简洁地定义类和类的继承。当然，ES5中的面向对象编程方式仍然可以使用，但它们不如ES6中的Class关键字易用和直观。在开发中，应该尽量使用ES6中的面向对象编程方式，以提高代码的可维护性、复用性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b14e8968c7c53b0d712a8