关于ES6的Class一些理解

ES6是于2015年6月正式发布的JavaScript语言的标准，以前我们大众所知的js版本都是ES5的，ES6简直就是个大变革，变得更像传统的oop语言了，其实ES6是实现了ES4的大部分方法（ES4被废弃了，有兴趣的可以去了解下）

ES5的构造函数

以前在没有ES6之前，生成对象实例或者说‘类’都是通过构造函数的方式来实现的

function Fakin(x, y) {
  this.x = x;
  this.y = y;
}
var f = new Fakin('fakin', 'blog');

这是以前的做法，可能大家觉得这种方式是啥玩意，一点都不像程序员所认知的方式！

ES6的构造函数（class）

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，但是需要记住的是ES6提供的Class只是语法糖，并不是真的像传统语言一样的‘类’，JS没有真正的‘类’（babel编译class的源码，大家可以看下）

class Fakin {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
var f = new Fakin('fakin', 'blog');

乍一看，我去啊，还更复杂了，是什么鬼啊！其实Class定义的类，所有的方法都在prototype上面，也就是说

class Fakin {
  constructor() {
  }
  sayName() {
  }

}

// 等同于

Fakin.prototype = {
  constructor() {},
  sayName() {},
};

这就更好的说明了，ES6还是没有类，只不过是把ES5那种构造函数的方式给你美化了一下，那就是语法糖，本质上和ES5的方式区别不大！

class

1、构造函数 constructor

class Fakin {
  constructor() {
        this.name = 'fakin';
    }
}

*在一个构造方法中可以使用super关键字来调用一个父类的构造方法

2、extends关键字
extends关键字用来创建一个普通类或者内建对象的子类

class Fakin extends React{
  constructor(length) {
    super(length);
    this.name = 'fakin';
  }

  get height() {
    return this.height;
  }
}

3、过 static 关键字定义静态方法

class Fakin{
    static sayName() {
        return 'fakin';
    }
}

注意static 定义的静态方法的调用只能在类上进行，不能在类的实例上调用

 const fakin=new Fakin()
 fakin.sayName()//not function

Fakin.sayName()//fakin

ES5的构造函数和ES6构造函数两者区别
1、ES6‘类’内部定义的方法是不可枚举的，ES5构造函数内的方法是可枚举的，这点不同

class Fakin {
  constructor(x, y) {
    // ...
  }
  sayName() {
    // ...
  }
}
Object.keys(Fakin.prototype) // []

不仅仅是constructor方法连你自己定义的sayName都不可枚举哦

2、ES6的class内部默认开启‘严格模式’
考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。
3、不存在变量提升

new Fakin(); // ReferenceError
class Fakin {}

总结：ES6的Class大大方便了传统程序员而已，本质上和ES5的改变不是很大，我觉得最大的区别就是内部变成严格模式了，不过话说回来，目前三大框架火热，如果你连ES6都不会的话，那么你会很难受的，所有的框架都流行webpack方式安装了，所以ES6是所有前端必备的工具，博主现在基本上全部都是ES6开发了，ES6提供了很多很多新的方法更加简洁和方便了！