2021.6.27 ES5和ES6创建构造函数的区别

ES5创建构造函数

function Model(x, y) {
  //构造函数体，给Model的实例添加私有属性方法
  this.x = x;
  this.y = y;
}
//在构造函数的原型链上给实例添加公有方法
Model.prototype.z = 10;
Model.prototype.getX = function() {
  console.log(this.x);
}
//给Model类添加私有属性
Model.n = 200;
Model.setNumber = function(n) {
  this.n = n;
}

let m = new Model(10, 20);
m.getX();
Model.setNumber;

ES6创造构造函数

class Model {
  //构造函数体，给Model的实例添加私有属性方法
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  //还是给Model的实例设置私有属性和方法
  z = 10;
  getX = () => {};
  /* 
     * 向原型上扩展方法 
     *   + 不能扩展公共属性、增加的方法不能是箭头函数「因为语法只能按照下述方式写」
     *   + 增加的方法没有prototype属性
     *   + 这些方法是不可枚举的
     * 我们可以在外面，基于Modal.prototype.xxx去弥补上述出现的情况
   */
   getX() {
     console.log(this.x);
   }
   getY() {
     console.log(this.y);
   }
   //设置静态属性方法（Model）这个类自己的属性方法
   static n = 200;
   static setNumber = function(n) {
     this.n = n;
   }
}

let m = new Modal(10, 20);
console.dir(m);
console.dir(Modal);

• 基于class创建的构造函数，只能带new执行，也就是只能基于构造函数的方式去执行，不能当做普通函数执行「比ES5严谨很多」