深入理解JavaScript类与面向对象编程
资源摘要信息:"JavaScript-Classes-OOP"
JavaScript中的类是自ES6(ECMAScript 2015)引入的特性,它提供了一种创建构造函数和对象的新语法。类可以看作是创建和管理对象的蓝图或模板。JavaScript的类实际上是基于原型继承的语法糖,这使得基于原型的继承看起来更像传统的面向对象编程(OOP)语言,如Java或C++。
面向对象编程(OOP)是一种编程范式,它使用“对象”来设计应用和计算机程序。在OOP中,对象可以包含数据和代码,这些代码称为方法。对象中的数据通常被称为属性。OOP的关键概念包括类、对象、继承、多态和封装。
JavaScript类的创建和使用涉及以下几个关键点:
1. 类声明和类表达式:类可以通过类声明和类表达式两种形式来创建。类声明使用`class`关键字,后跟类名。类表达式可以是命名的也可以是匿名的。
```javascript
// 类声明
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
// 命名类表达式
const Square = class Square {
constructor(sideLength) {
this.sideLength = sideLength;
2. 构造函数:在JavaScript类中,`constructor`方法是一个特殊的方法,用于创建和初始化类创建的对象。一个类只能有一个构造函数。
3. 继承:继承允许一个类继承另一个类的属性和方法。在JavaScript中,可以使用`extends`关键字来创建一个类,该类继承自另一个类。被继承的类称为超类(superclass),继承的类称为子类(subclass)。
```javascript
class Animal {
constructor(name) {
this.name = name;
speak() {
console.log(`${this.name} makes a noise.`);
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
4. 类的方法:在类内部可以定义方法,这些方法可以直接写在类的主体中。类的方法可以使用`this`关键字访问对象的属性。
5. 静态方法和属性:在类内部可以定义静态方法和静态属性。这些方法和属性只能通过类本身来访问,而不能通过实例化对象来访问。
```javascript
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2)); // 输出:7.071...
6. 使用new关键字创建实例:通过使用`new`关键字,可以基于类的定义创建一个新对象。
```javascript
const rectangle = new Rectangle(20, 10);
7. 类的访问器属性:可以为类定义获取(getter)和设置(setter)访问器属性,允许你在获取和设置属性值时执行代码。
```javascript
class Temperature {
constructor(celsius) {
this.celsius = celsius;
get fahrenheit() {
return this.celsius * 1.8 + 32;
set fahrenheit(value) {
this.celsius = (value - 32) / 1.8;