关于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