Class 和普通构造函数有何区别？

发表于 更新于 分类于
  1. Js 构造函数：
1
2
3
4
5
6
7
8
9
function MathHandle(x, y) {
  this.x = x;
  this.y = y;
}
MathHandle.prototype.add = function () {
  return this.x + this.y;
};
var m = new MathHandle(1, 2);
console.log(m.add());
  1. class 基本语法：
1
2
3
4
5
6
7
8
9
10
11
class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  add() {
    return this.x + this.y;
  }
}
const m = new MathHandle(1, 2);
console.log(m.add());

语法糖：
在上述两段代码中分别加入如下代码，运行

1
2
3
console.log(typeof MathHandle) // 'function'
console.log(MathHandle.prototype.constructor === MathHandle) //true
console.log(m.__proto__ === MathHandle.prototype) //true

运行结果一致。我认为，class 是构造函数的语法糖

综上所述：

  • Class 在语法上更加贴合面向对象的写法
  • Class 实现继承更加易读、易理解
  • 更易于写 java 等后端语言的使用
  • 本质还是语法糖，使用 prototype