ES6 Class

Posted 2020-11-09 二十七八岁

首先，主要是es5 与 es6 的比较！

es5开发没有类的概念，只是用函数模拟成构造函数来创建对象，使用原型链来继承方法。那么相对于es6来说，增加了类的概念，使得类的概念更加形象具体，更有利于开发着学习！

首先，学习下es6 类的写法

class Foo {
  constructor(name){
     // ...实例对象方法
    this.name = name;
  }
  
  // ..... 原型上方法
  study() {}
}

我们再来看下es5的构造函数写法：

function Foo(name) {
  // ... 实例方法
  this.name = name;
}

Foo.prototype.study = function () {}

对比下便可发现：constructor 相当于 es5写法中的构造函数，而class内部的方法则相当于es5 的Foo.prototype;可以发现es6的写法更加的直观！

但是es5与es6 也不是有些不同的地方

1. class 内部定义的方法是不可枚举的，但是es5中prototype上的方式是可枚举的（不可枚举就是不可遍历）
2. class内部的方法名是可以用变量的哦（如：[methodName](){}）,但是在es5中是万万不能的
3. class必须用new执行，而es5则可以直接Foo()执行
4. class不会变量提升哦

es6要点：

• constructor 默认返回实例对象，如果你知道return 返回个新对象，那就有意思喽
• 获得实例对象的原型 Object.getPrototypeOf(xxx)    (这条不算)
• class静态方法用static  静态属性要Foo.name=xxx; 这样单写，因为class内部没有定义静态属性的写法