一、类是构造函数的另一种写法

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

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

let son = new Person("zs", 24);
let classSon = new ClassPerson("classZs", 48);
console.log(son);
console.log(classSon);
// 类的数据类型就是函数，类本身就指向构造函数
typeof ClassPerson; // "function"
ClassPerson === ClassPerson.prototype.constructor; // true

相同点

可以看到ClassPerson里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。

这种新的 Class 写法，本质上与构造函数Person是一致的。

生成类的实例的写法，与构造函数完全一样，也是使用new命令。
不同点

但是类创建实例的时候如果忘记加上new，像函数那样调用ClassPerson()，将会报错，构造函数可以直接调用。

二、原型方法的表现形式不同

构造函数添加方法到函数的prototype属性，类的所有方法都定义在类中

类定义方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了
另外，方法与方法之间不需要逗号分隔，加了会报错。

// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在原型上增加方法
Person.prototype.say = function () {
  console.log("构造函数在原型上添加方法");
};

// 定义类
class ClassPerson {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  say() {
    console.log("类在原型上添加方法");
  }
}

let son = new Person("zs", 24);
// 查看实例及原型方法
console.log(son);
let classSon = new ClassPerson("classZs", 48);
// 查看实例及原型方法
console.log(classSon);

image.png

三、构造函数声明会提升，类声明不会

函数声明和类声明之间的一个重要区别在于，函数声明会提升，类声明不会。

你首先需要声明你的类，然后再访问它。

// Person {name: 'zs', age: 24}
let son = new Person('zs', 24)
// Uncaught ReferenceError: Cannot access 'classPerson' before initialization
let classSon = new classPerson('classZs', 48)
function Person(name, age) {
    this.name = name
    this.age = age
}

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

四、构造函数与类都可以使用extends继承

4.1、类继承

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

  say() {
    console.log("我会说话");
  }
}

class Son extends Person {
  constructor(name, age) {
    super(name, age);
  }

  run() {
    console.log("我能跑");
  }
}

let zs = new Son("zs", 45);
console.log(zs);

4.2、构造函数继承

function Person1(name, age) {
    this.name = name
    this.age = age
}

Person1.prototype.say = function () {
    console.log('我能说话')
}

class Son1 extends Person1 {
    constructor(name, age) {
        super(name, age);
    }

    run() {
        console.log('我能跑')
    }
}

let ls = new Son1('ls', 35)
console.log(ls)

类不能继承常规对象（不可构造的）。如果要继承常规对象，可以改用Object.setPrototypeOf()

// 普通对象
let Person2 = {
  say() {
    console.log("我能说话");
  },
};

// 类不能直接继承普通对象
class Son2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  run() {
    console.log("我能跑");
  }
}

// 类的方法都定义在prototype对象，所以类要继承普通对象，把普通对象设置原型到Son2.prototype即可
Object.setPrototypeOf(Son2.prototype, Person2);
let wu = new Son2("wu", 32);
console.log(wu.say());
// 原型 wu ----> Son2.prototype ----> Person2 ----> Object.prototype ----> null

四、构造函数没有私有（静态）属性

类有私有（静态）属性的概念，构造函数没有。

class Person {
  // 静态属性
  static count = 100;

  // 私有属性
  #name = "zs";
  // 私有方法
  #say() {
    console.log("我能说话了");
  }

  parentSay() {
    // 调用私有方法
    this.#say();
  }
}