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

概述

在 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