JS里的类和构造函数

JS中类是构造函数的语法糖

在 JavaScript 中，类实际上是构造函数的语法糖，也就是说，通过类的语法创建的对象和通过构造函数创建的对象是一样的。 例如，下面是一个通过构造函数创建对象的示例：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person("Alice", 30);
person1.sayHello(); // 输出：Hello, my name is Alice and I am 30 years old.

而使用类的语法创建对象的示例代码如下：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person2 = new Person("Bob", 25);
person2.sayHello(); // 输出：Hello, my name is Bob and I am 25 years old.

可以看到，使用类的语法创建对象时，实际上是在创建一个与构造函数相同的对象。在类中，类名即为构造函数的名称，类中的构造函数即为类的构造函数，类中的方法即为构造函数的原型方法。

在 JavaScript 中，类实际上是构造函数的语法糖，可以通过以下几个方面来体现：

1. 类的名称即为构造函数的名称，在类中通过 constructor 方法来初始化对象：

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

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

const person = new Person("Tom", 20);
console.log(person instanceof Person); // true

这里定义的 Person 类实际上就是一个构造函数，通过 new 关键字创建的对象也是一个 Person 类型的对象。

2. 在类中定义的方法即为构造函数的原型方法：

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

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

const person = new Person("Tom", 20);
person.sayHello(); // 输出：Hello, my name is Tom and I am 20 years old.

可以看到，在类中定义的 sayHello 方法实际上就是 Person 构造函数的原型方法。

3. 子类继承父类时，使用 super() 方法调用父类的构造函数：

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

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

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

  speak() {
    console.log(this.name + ' barks.');
  }
}

const dog = new Dog('Max', 'Labrador');
dog.speak(); // 输出：Max barks.

这里定义了一个 Animal 类和一个继承自 Animal 类的 Dog 类，Dog 类在构造函数中通过 super() 方法调用了父类 Animal 的构造函数，实现了继承功能。 综上所述，JavaScript 中的类实际上是构造函数的语法糖，通过类的语法创建的对象和通过构造函数创建的对象是一样的。

JS实现类的private、static

private

private属性在类的内部可以直接访问，而在外部只能通过类的公共方法来访问

1、通过闭包实现，需要私有的属性或方法声明在构造函数内部，然后通过闭包返回一个只能在内部访问的函数：

function Person(name, age) {
  let salary = 5000; // 私有属性
  function getSalary() { // 私有方法
    return salary;
  }
  
  this.name = name; // 公有属性
  this.age = age; // 公有属性
  this.getSalary = getSalary; // 公有方法
}

const person = new Person('John', 30);

console.log(person.name); // 输出：'John'
console.log(person.getSalary()); // 输出：5000
console.log(person.salary); // 输出：undefined，无法访问私有属性

2.利用Symbol类型：通过在构造函数中定义Symbol类型的成员，该成员在外部无法被访问。 例如：

const privateVar = Symbol("私有变量"); //Symbol类型的私有变量
class MyClass {
    constructor() {
        this[privateVar] = "私有变量"; //私有变量
    }
    publicMethod() { //公有方法
        console.log(this[privateVar]);
    }
}
const myObj = new MyClass();
myObj.publicMethod(); //"私有变量"
console.log(myObj[privateVar]); //undefined

static

static用于定义类的静态方法或静态属性，不依赖于类的实例，而可以通过类本身直接访问。静态方法和属性不会被实例继承，因为它们是定义在类上的。对于实例级别的属性和方法，只能在实例上访问，而不能通过类本身访问。

静态方法和属性的使用场景包括：

• 工具类函数，比如Math类的静态方法。
• 计数器类，统计创建的类实例数量。
• 常量或配置信息，比如数据库连接信息。 1.利用构造函数属性：在构造函数中添加属性，该属性为静态成员。

function MyClass() { // ... }
MyClass.staticVar = "静态变量"; //静态变量
MyClass.staticMethod = function() { //静态方法
    console.log("静态方法");
};
MyClass.prototype.publicMethod = function() { //公有方法
    console.log(MyClass.staticVar);
    MyClass.staticMethod();
};
console.log(MyClass.staticVar); //"静态变量"
MyClass.staticMethod(); //"静态方法"
var myObj = new MyClass();
myObj.publicMethod(); //"静态变量" "静态方法"
console.log(myObj.staticVar); //undefined

2.利用ES6的静态成员定义：在类中定义静态成员。

class MyClass {
    static staticVar = "静态变量"; //静态变量
    static staticMethod() { //静态方法
        console.log("静态方法");
    }
    publicMethod() { //公有方法
        console.log(MyClass.staticVar);
        MyClass.staticMethod();
    }
}
console.log(MyClass.staticVar); //"静态变量"
MyClass.staticMethod(); //"静态方法"
const myObj = new MyClass();
myObj.publicMethod(); //"静态变量" "静态方法"
console.log(myObj.staticVar); //undefined

类的constructor

1、如果在 constructor 中返回另一个对象，则新创建的实例将被返回该对象，而不是 this 对象。

class MyClass {
    constructor(name) {
        return { name: name.toUpperCase() };
    }
}
const myObj = new MyClass('example');
console.log(myObj.name); // 输出：EXAMPLE

2、如果在 constructor 中返回其它类型的值 或没有返回值（缺失 return 语句），则新创建的对象将被作为 this 对象返回。

class MyClass { 
    constructor(name) {
        this.name = name;
        return 'hello ' + name;
        // return 1
        // return null
    }
}
const myObj = new MyClass('example'); 
console.log(myObj.name); // 输出：example