JS中的类？class语法糖??? 两分钟秒了

前言

JS中有类？我们都知道JavaScript是基于原型的语言，并没有内置的类概念。但从ES6开始，JavaScript引入了class关键字作为语法糖，它提供了一种更简洁、更类似于传统面向对象编程的语法来创建对象。

class关键字在语法上类似于许多其他基于类的语言，如Java或C++，但JavaScript的类仍然是基于原型的。

正文

class语法糖有哪些基本用法？

一，定义类

在JavaScript中，你可以使用class关键字来定义一个类。类是一个抽象的概念，它描述了具有相同属性和方法的对象的集合。在类中一定有一个构造器函数constructor，我们可以在constructor中接收参数，将我们需要的参数都加进去。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and my age is ${this.age}`);
    }
}

在上面的例子中，我们定义了一个名为MyClass的类，它有一个构造函数（constructor）和一个方法（sayHello）。构造函数在创建类的实例 时被调用，它接受一个参数name并将其存储在实例上。sayHello方法用于打印一条问候信息。

二， 创建类的实例

创建类的实例就是将类实例化，我们使用new关键字调用类的构造函数来创建一个新的对象，这个对象就是该类的实例。

这个新创建的对象会继承类的所有属性和方法（除非它们是静态的），并且可以有自己的状态（即实例属性和方法）。这里以我自己为例

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and my age is ${this.age}`);
    }
}
let p = new Person('绵绵冰', 18);//调用然后传入参数
console.log(p);

p.sayHello();

在上面的例子中，我在class类里面传入了参数，定义了一个sayHello方法；我将这个类实例化为p，这个p可以访问我在类中定义的方法

类的实例对象可以访问类中的方法，就像原型一样

类的原型机制

为什么类能实现这样的功能呢？当然和原型离不开关系，因为我们都知道JS是基于原型的语言。js的类也是基于原型的。

他的运行机制主要有三步：

1.类定义

因为当你定义一个类时，实际上你定义了一个构造函数（通过class关键字），并且在这个构造函数上挂载了一些属性和方法。这些属性和方法实际上是定义在构造函数的prototype对象上的。

2.创建实例

当你使用new关键字创建类的实例时，JavaScript引擎会执行以下步骤：

• 创建一个新的空对象。
• 将这个新对象的__proto__设置为类的prototype对象。
• 执行构造函数，并将this绑定到新创建的对象上。
• 如果构造函数返回了一个对象，那么这个对象将成为new表达式的返回值；否则，返回新创建的对象。

3.访问属性和方法

由于实例的__proto__指向了类的prototype对象，所以当你尝试访问实例上的一个属性或方法时，JavaScript会首先在实例自身上查找。如果找不到，它会继续在实例的原型链上查找，直到找到为止，或者直到原型链的末尾（即Object.prototype）

三，继承类

既然JS中的类也是基于原型的，那么就一定和原型一样有类似的继承方法。

在JS中，我们可以使用extends关键字来让一个类继承另一个类的属性和方法。这允许你创建更复杂的类结构，并实现代码的重用。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and my age is ${this.age}`);
    }
}

class Person2 extends Person {
    constructor(name, age) {
        super(name); // 调用父类的构造函数  
        this.age = age;
    }

    introduce() {
        console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
    }
}

const p2 = new Person2('绵绵冰2', 25);
p2.sayHello();
p2.introduce(); 

在上面的例子中，p2就继承了p的class里面的属性和方法，并且添加了新的方法introduce来介绍自己。

四， 静态方法

在JavaScript中，我们可以使用static关键字来定义静态方法。静态方法是挂载在类上的方法，而不是类的实例上。这意味着我我们可以直接通过类名来调用静态方法，而不需要创建类的实例。

class greet {
    static greet() {
        console.log('Hello from a static method!');
    }
}

greet.greet(); // 输出: Hello from a static method!

在这个例子中，我们定义了一个名为greet的类，并在其上定义了一个静态方法greet。我们直接通过类名调用了这个方法，而无需创建类的实例。

五，类中访问器

这是一种特殊类型的方法，用于读取和写入对象的属性。访问器由getter和setter方法组成。getter方法是一个没有参数的方法，用于返回与对象属性相关联的值。setter方法则接收一个参数（即要写入属性的值），并用于修改与对象属性相关联的值。

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    // getter方法，用于读取_name属性  
    get name() {
        return this._name;
    }
    get age() {
        return this._age;
    }
    // setter方法，用于设置_name属性  
    set age(newAge) {
        this._age = newAge;
    }

    set name(newName) {
        this._name = newName;
    }
}

const person = new Person('绵绵冰', 18);

// 使用getter方法读取属性  
console.log(person.name);
console.log(person.age);

// 使用setter方法设置属性  
person.name = '绵绵冰2号';
person.age = 20;

// 再次使用getter方法读取属性，验证setter方法是否生效  
console.log(person.name);
console.log(person.age);

在上面这个简单的例子中，我们通过get方法拿到了name和age并且将他们转化为了私有属性（使用下划线前缀表示私有属性，尽管在JavaScript中并不是真正的私有），再通过set将这些属性设置为新的属性值。但是这个简单的例子存在一些问题，我们需要对传入的参数进行一些判断

• 使用 typeof判断输入参数的类型
• 使用 trim()移除字符串开头和结尾的空白符
• 判断经过trim处理后的字符是不是一个空字符，不是空字符返回true
• 使用 &&将两个判断连接，只有当这两个判断都为true时，整个表达式才会返回true
• 否则console.error

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
    get name() {
        return this._name;
    }
    get age() {
        return this._age;
    }
    set name(newName) {
        // 在这里添加一些验证逻辑  
        if (typeof newName === 'string' && newName.trim() !== '') {
            this._name = newName;
        } else {
            console.error('无效');
        }
    }
    set age(newAge) {
        if (typeof newAge === 'number' && newAge >= 0) {
            this._age = newAge;
        } else {
            console.error('无效');
        }
    }
}
const person = new Person('绵绵冰', 18);

console.log(person.name);
console.log(person.age);


person.name = '绵绵冰2';
person.age = 20;

console.log(person.name);
console.log(person.age);

// 尝试设置一个无效的值，查看setter方法中的验证逻辑是否生效  
person.age = '十八'; // 这将触发setter方法中的console.error