es6入门5--class类的基本用法
在ES6之前，准确来说JavaScript语言并无类的概念，却有模拟类的做法。相比在类似java这类传统面向对象语言中通过类来生成实例，js则通过构造函数模拟类来生成实例。
这是因为在JS设计初期，作者Brendan Eich选择使用原型来描述对象而非类，但被管理层要求模仿java，因此引入了new this等语言特性，也就是我们所使用的构造函数做法。
那么自ES6起，JavaScript正式引入了class关键字，自此我们也可以通过class来定义类了。
但需要清楚的是ES6中class只是构造函数的一种语法糖，并非新鲜玩意，class能实现的，我们通过ES5构造函数同样可以实现。
本篇文章只是ES6入门学习笔记，想了解详细文档请阅读阮一峰大神的 ECMAScript 6 入门，那么本文开始。
一、class写法与构造函数的部分区别
1.写法变化
在ES6之前，我们模拟一个类的做法是通构造函数：
let Parent = function (name, age) { this.name = name; this.age = age; }; Parent.prototype.sayName = function () { console.log(this.name) }; let child = new Parent('echo', 26); child.sayName();//echo
ES6 class实现更像类的写法，我们改写上面的方法：
class Parent { constructor(name, age) { this.name = name; this.age = age; }; sayName() { console.log(this.name); }; }; let child = new Parent('echo', 26); child.sayName(); //echo
简单对比下，写法上主要这几点变化：
1.构造函数名Parent在class写法时变成了类名，但调用方式不变，依然通过new关键字创建实例。
2.构造函数中this相关操作，在class写法时归纳到了constructor方法中，也就是说ES5的构造函数Parent对应ES6的Parent类中的constructor构造方法。
3.ES5中原型上的方法sayName在ES6 class写法中直接写在了内部，同时省略了function关键字。
所以对于方法添加，下面这两种写法是等效的：
// ES6 class Parent { constructor() {}; sayName() {}; sayAge() {}; }; // ES5 let Parent = function () {}; Parent.prototype = { constructor: function () {}, toString: function () {}, sayAge: function () {} };
可以看到，ES5写法一样可以一次批量在原型上添加方法，但我发现，class类不能直接这么做，以下有三种给class类原型添加方法的做法，我分别输出了它们：
// 写法一 class Point { constructor() {} toString() {} toValue() {} }; // 写法二 class Point {}; Point.prototype = { constructor() {}, toString() {}, toValue() {}, }; // 写法三 class Point {}; Point.prototype = { constructor: function () {}, toString: function () {}, toValue: function () {}, };
通过对比可以发现，第二、三种写法先定义class类，再使用prototype在原型上添加方法对于class类无效，方法并没有被添加进去。
你肯定纳闷了，外部添加无效，那为啥那偏偏有个constructor呢，这是因为constructor方法是class类自带的。
class Parent {
};
//等同于
class Parent {
constructor() {}
};
也就是说当要给class类原型添加方法时，如果使用ES5的添加做法并不会生效；当然也不是写在外部就会失效，通过assign方法还是可以做到这一点：
class Point {
constructor() {};
};
Object.assign(Point.prototype, {
toString() {},
toValue() {}
});
2.类创建实例必须使用new
通过class类创建实例必须使用new关键字，不使用会报错，这点与构造函数不同，在ES5中其实我们不使用new也能调用构造函数创建实例，虽然这样做不符合规范。
class Parent { constructor() {} }; let son = Parent();//报错 let Parent = function (name) { this.name = name; }; let son = Parent();//不符合规范
3.类的内部方法无法枚举
最后一点区别是，class类内部定义的方法无法枚举，也就是无法通过Object.keys方法获取，但在ES5中keys方法是有效的。
class Point { constructor() {}; toString() {}; toValue() {}; }; Object.keys(Point);//[] Object.getOwnPropertyNames(Point.prototype);//['constructor','toString','toValue']
二、constructor方法
前面已经说了，当我们创建一个类，即便内部没写constructor方法，类也会自带。
由于类的方法都在原型上，所以当我们调用实例上的方法等同于调用类原型上的方法：
class Parent { constructor() {} }; let son = new Parent(); console.log(son.sayName === Parent.prototype.sayName);//true
类实例的constructor指向类，这与构造函数实例的constructor指向构造函数本身保持一致：
//类的实例与构造函数实例的constructor属性都指向创建自己的类或构造函数 class Parent { constructor() {} }; let son = new Parent(); console.log(son.constructor);//class Parent let Parent = function (name) { this.name = name; }; let son = new Parent(); console.log(son.constructor);//Parent
类与构造函数prototype对象的constructor属性都会指向自己，这点也保持了一致。
//类与构造函数prototype的constructor属性都指向自己 class Parent { constructor() {} }; console.log(Parent.prototype.constructor === Parent);//true let Parent = function (name) { this.name = name; }; console.log(Parent.prototype.constructor === Parent);//true
其实到这里，class类基本用法算说完了，下面主要是对于class概念其它补充。
三、class类的其它补充
1.class类中的存值取值函数
在类的内部也可以使用get与set方法对某个属性的取值存值操作做拦截处理。
class Parent { get name() { return 'echo' }; set name(val) { console.log(val); }; }; let son = new Parent(); son.name = '时间跳跃'; //时间跳跃 son.name; //echo
当我们存值和取值时，实际上是调用了class内部的get与set对应方法，这点与ES5保持一致。
2.class内中的属性名可以使用变量
let name = 'sayName'; class Parent { [name]() { console.log('echo'); } }; let son = new Parent(); son[name]();//echo
3.class表达式写法
let Parent = class { sayName() { console.log('echo'); } }; let son = new Parent(); son.sayName(); //echo
与函数表达式相同，class类在表达式写法下也能添加一个class名：
let Parent = class Me{ sayName() { console.log('echo'); } }; let son = new Parent(); son.sayName(); //echo console.log(Parent.name);//Me
那么此时，Parent类的name属性为Me，但创建实例你得new Parent，而非new Me()；
4.类中this指向
类方法中自带严格模式，且类方法中的this默认指向类的实例
class Parent { sayName() { console.dir(this); //Patent {} this.sayAge(26); }; sayAge(age) { console.log(age, this); } }; let son = new Parent(); son.sayName(); //26 Patent {} console.log(Parent); //class Parent
但如果你在内部方法单独抽出来在外部调用，this此时会指向undefined(严格模式)；
class Parent { sayName() { console.log(this);//undefined this.sayAge(26); }; sayAge(age) { console.log(age); } }; let son = new Parent(); let {sayName} = son; sayName();//报错
解决方式是，可以通过在class类中的constructor构造方法中直接为你需要外部调用的方法绑定this。
class Parent { constructor(){ this.sayName = this.sayName.bind(this); } sayName() { this.sayAge(26) }; sayAge(age) { console.log(age); } }; let son = new Parent(); let {sayName} = son; sayName();//26
或者在构造方法中利用箭头函数，因为箭头函数中的this指向自身定义时所在的对象，此时箭头函数this指向实例。
class Parent { constructor() { this.sayName = () => { this.sayAge(26); } } sayAge(age) { console.log(age); } }; let son = new Parent(); let {sayName} = son; sayName(); //26
5.类的静态方法
我在JavaScript模式一书的读书笔记中也有提到ES5中的构造函数静态方法；如果某个方法只有类自身可以调用，实例并不会继承，那么我们一般称此方法为静态方法。
//ES5 function Parent (){}; Parent.sayAge = function (){ console.log(26); }; Parent.sayAge()//26 let son = new Parent(); son.sayAge()//报错，找不到这个方法 //ES6 class Parent { static sayAge() { console.log(26); } }; Parent.sayAge()//26 let son = new Parent(); son.sayAge()//报错，找不到这个方法
在上述代码中，我分别用ES5与ES6两种写法分别为类(构造函数)添加了静态方法sayAge。
很明显这个方法只能被类自身调用，实例无法继承，只是相比ES5直接添加在构造函数上，类使用了static字段，也就是说，如果你想让某个方法作为静态方法，请在前面添加static。
另外有一点，如果静态方法中使用了this，此时this指向了类，而不是实例，请注意。
//ES5 function Parent (){}; Parent.sayAge = function (){ console.log(this); }; Parent.sayAge()//构造函数自身 //ES6 class Parent { static sayAge() { console.log(this); } }; Parent.sayAge()//class Patent 类自身
6.类的静态属性
同理，在ES5中，我在构造函数内部某个属性只想给构造函数自身使用，实例无法使用，此时就得使用静态属性。
//ES5 function Patent(){}; Patent.age = 26; Patent.sayAge = function (){ console.log(this.age); } Patent.sayAge();//26 //ES6 class Parent { static sayAge() { console.log(this.age); }; }; Parent.age = 26; Parent.sayAge();//26
上述代码中分别用ES5，ES6为类添加了静态属性，其实都是直接加在类上，做法相同。
当然在后面的提案中，也推荐使用static来创建类的静态属性，做法与静态方法相同，也就是说有两种方法可以做到这点。
class Parent { static age = 26; static sayAge() { console.log(this.age); }; }; Parent.sayAge();//26
7.实例属性的简写方法
我在前面说，当声明一个类，即使不写constructor方法，类也会自带，那我想省略掉constructor方法，同时还想给实例添加属性呢怎么办，其实也可以简写。
class Parent { constructor() { this.name = 'echo'; this.age = 26; }; sayName() {}; }; let son = new Parent('echo', 26); son.name //echo son.age //26 class Parent { name = 'echo'; age = 'age'; sayName() {}; }; let son = new Parent(); son.name //echo son.age //26
以上两种写法等效，第二种实例赋值时直接写在了类的顶部，同时去掉了this，当然如果实例赋值带参数，那就没法简写了。
最后有一个类的私有属性和私有方法没说，因为ES6没提供，只能模拟，有兴趣可以自行阅读。
那么ES6中class类基本用法就说到这里了。
