JavaScript中 class构造函数和传统的函数构造函数（Function Constructor）区别

在JavaScript中，`class`构造函数和传统的函数构造函数（Function Constructor）有一些关键的区别。以下是一些主要的区别：

1. 语法

 **Class**:
  class MyClass {
    constructor(param1, param2) {
      this.param1 = param1;
      this.param2 = param2;
    }
  }

 **Function Constructor**:
  function MyClass(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }

 2. 继承

**Class**:
  class ParentClass {
    constructor(param1) {
      this.param1 = param1;
    }
  }

  class ChildClass extends ParentClass {
    constructor(param1, param2) {
      super(param1);
      this.param2 = param2;
    }
  }


**Function Constructor**:
  function ParentClass(param1) {
    this.param1 = param1;
  }

  function ChildClass(param1, param2) {
    ParentClass.call(this, param1);
    this.param2 = param2;
  }

 3. 原型链

**Class**:
  class MyClass {
    constructor() {}
  }

  const instance = new MyClass();
  console.log(instance.__proto__ === MyClass.prototype); // true


**Function Constructor**:
  function MyClass() {}

  const instance = new MyClass();
  console.log(instance.__proto__ === MyClass.prototype); // true

4. 静态方法

**Class**:
  class MyClass {
    static staticMethod() {
      console.log('This is a static method');
    }
  }

  MyClass.staticMethod(); // This is a static method


**Function Constructor**:
  function MyClass() {}

  MyClass.staticMethod = function() {
    console.log('This is a static method');
  };

  MyClass.staticMethod(); // This is a static method

 5. 实例方法

**Class**:
  class MyClass {
    instanceMethod() {
      console.log('This is an instance method');
    }
  }

  const instance = new MyClass();
  instance.instanceMethod(); // This is an instance method


**Function Constructor**:
  function MyClass() {}

  MyClass.prototype.instanceMethod = function() {
    console.log('This is an instance method');
  };

  const instance = new MyClass();
  instance.instanceMethod(); // This is an instance method

 6. 作用域

**Class**:
  class MyClass {
    constructor() {
      this.method = this.method.bind(this);
    }

    method() {
      console.log(this);
    }
  }

  const instance = new MyClass();
  instance.method(); // MyClass {}


**Function Constructor**:
  function MyClass() {
    this.method = this.method.bind(this);
  }

  MyClass.prototype.method = function() {
    console.log(this);
  };

  const instance = new MyClass();
  instance.method(); // MyClass {}

 7. 不可枚举属性

**Class**:
  class MyClass {
    constructor() {
      this.method = function() {};
    }
  }

  const instance = new MyClass();
  console.log(Object.keys(instance)); // []


**Function Constructor**:
  function MyClass() {
    this.method = function() {};
  }

  const instance = new MyClass();
  console.log(Object.keys(instance)); // ["method"]

总结：
Class提供了一种更简洁和直观的方式来定义类，包括构造函数、实例方法和静态方法。
Function Constructor 是传统的构造函数方式，虽然功能强大，但语法相对复杂，且容易出错。

推荐使用`class`语法来定义类