es6中class的几种属性和方法以及对应的es5写法

Posted 2021-09-03 suri

概述

在ES6中，class可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

本文介绍class的几种属性和方法以及对应的ES5写法

阅读本文需要掌握原型的知识，推荐阅读帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）

静态属性和静态方法

静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化

class Example {
  static num = 2; // ES7
  static sum(a, b) {
    console.log(a + b);
  }
}

相当于

function Example() {}
Example.num = 2;
Example.sum = function sum(a, b) {
  console.log(a + b);
};

使用

console.log(Example.num);
Example.sum(1, 2);

公共属性和原型方法

class Example {
  // 原型方法
  sum(a, b) {
    console.log(a + b);
  }
}
Example.prototype.num = 2;  // 公共属性

相当于

function Example() {}
Example.prototype.sum = function sum(a, b) {
  console.log(a + b);
};
Example.prototype.num = 2;

使用

let exam = new Example();
console.log(exam.num);
exam.sum(1, 2); // 3

实例属性和实例方法

class Example {
  num = 2;
  sum = (a, b) => {
    console.log(a + b);
  }
}

相当于

class Example {
  constructor() {
    this.num = 2;
    this.sum = (a, b) => {
      console.log(a + b);
    }
  }
}

相当于

function Example() {
  this.num = 2;
  this.sum = function (a, b) {
    console.log(a + b);
  }
}

使用

let exam = new Example();
console.log(exam.num);
exam.sum(1, 2); // 3