一文掌握JavaScript 中类的用法

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 JavaScript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

这篇文章瑶琴带大家学习一个重要的概念：类（class）。在 JavaScript 中，ES6 引入了类（class）的概念，使得面向对象编程更加简洁和易于理解，一起来深入学习吧。

1.类的定义

可以将类视为一种模板或蓝图，用于创建对象。类描述了对象应该具有的属性和方法。对象是类的实例，通过实例化类来创建。

假设我们有一个类叫做Animal，它描述了动物的一般特征和行为。我们可以将这个类定义为：

class Animal { 
    constructor(name, age) { 
        this.name = name; 
        this.age = age; 
    } 
    speak() { 
        console.log(`${this.name} makes a sound.`); 
    }
}

在这个类中，我们定义了两个属性：name 和 age，以及一个方法 speak()，用于让动物发出声音。

现在，我们可以使用这个类来创建具体的动物对象。比如，我们创建一个名叫“小猫”的猫对象，这一步也叫做类的实例化。

let cat = new Animal('小猫', 2);

在这里，我们通过 new 关键字和 Animal 类创建了一个名为 cat 的猫对象。这个对象具有 name 属性为“小猫”，age 属性为 2，并且具有 speak()方法，可以让它发出声音。
 

所以，类是对象的模板，用于创建具有相似特征和行为的对象。对象则是类的实例，具有类定义的属性和方法。通过实例化类，我们可以创建多个具有相同特征和行为的对象。

2.类的构造函数

类的构造函数通过 constructor 方法来定义，用于初始化对象的状态。

class Animal { 
    constructor(name) { 
        this.name = name; 
    } 
}

3.类的方法

在类中可以定义各种方法，方法是对象的行为。

class Animal { 
    constructor(name) { 
        this.name = name; 
    } 
    sayHello() { 
        console.log('Hello, my name is ' + this.name); 
    } 
}

4. 类的继承

使用 extends 关键字可以实现类的继承，子类可以继承父类的属性和方法。

class Dog extends Animal { 
    constructor(name, breed) { 
    super(name); 
        this.breed = breed; 
    } 
}

5. super 关键字

在子类的构造函数中使用 super 关键字来调用父类的构造函数，初始化子类实例.

class Dog extends Animal { 
    constructor(name, breed) { 
        super(name); 
        this.breed = breed; 
    } 
}

6. 类的静态方法

使用 static 关键字可以定义一个静态方法，静态方法属于类而不是实例。

class Animal { 
    static info() { 
        console.log('This is an animal'); 
    } 
} 
Animal.info(); // 输出：This is an animal

7.类的访问器属性

使用 get 和 set 关键字定义访问器属性，用于对类的属性进行读取和设置。

class Animal { 
    constructor(name) { 
        this._name = name; 
    } 
    get name() { 
        return this._name; 
    } 
    set name(value) { 
        this._name = value; 
    } 
}

8.类的实例检查

使用 instanceof 关键字可以检查一个对象是否为指定类的实例。

let myDog = new Dog('Buddy', 'Golden Retriever'); 
console.log(myDog instanceof Dog); // 输出：true 
console.log(myDog instanceof Animal); // 输出：true

对于初学者来说，今天的内容会显得吃力，这篇文章关于类的知识点介绍详细，结合上面的示例，可以一步步实践并理解。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。