ES6-Class

Class

第一次接触的你需要注意哪些地方

类结构体内部的方法定义不能（不需要）使用function字段

类名必须大写。好像没有明确规定，但你就当有这个规定吧

类结构体虽然是放在

{}

内，但此时的

{}

并不表示对象，而表示代码块，所以不要像之前定义prototype一样使用

,

分割各个函数

类结构体中的所有方法都会被挂载到prototype对象上，成为各实例的通用方法

同let&const一样，不存在变量提升

不多说，都在demo里了，走一个。。。

new Demo() // 不存在变量提升，这里会报错

class Demo { // 类名大写
constructor(x, y) { // 构造函数。可以不定义构造函数默认`constructor() {}`
this.x = x;
this.y = y;
} // 不需要`,`分割
toString() { // 不需要`function`定义函数
return '(' + this.x + ', ' + this.y + ')';
}
}

继承 extends

子类通过构造函数向父类传参

super代表父类的构造函数

调用super之后才能使用this关键字，否则会报错

demo

class DemoChild extends Demo{
constructor(...args){
this.args = args; // 报错啦，这里还没有this呢。。
super(...args);
this.args = args; //这才对嘛。。
}
}

可以继承原生构造函数

class GoodArray extends Array{ // 妈妈再也不用担心对原生构造函数的扩展带来的各种问题
constructor(...args){
super(...args);
}
toString(){
console.log('I am better then Array');
}
}
var arr = new GoodArray();
arr.toString();

prototype & __proto__

__proto__总是指向父类

prototype的__proto__总是指向父类的prototype

绕死算了^v^

DemoChild.\_\_proto\_\_ === Demo;
DemoChild.prototype.\_\_proto\_\_ === Demo.prototype;

getter & setter

class内部可以定义get&set方法，用于存取属性的值。用法和对象属性的getter&setter相同

class Demo{
constructor(foo){
this._foo = foo;
}
get foo(){
console.log('get foo: ' + this._foo);
return this._foo;
}
set foo(val){
this._foo = val;
console.log('set foo: ' + this._foo);
}
}
var demo = new Demo(111);
demo.foo = 123; // set foo: 123
demo.foo; // get foo: 123

静态方法

static关键字

静态方法可以直接通过类名调用，不需要实例化

静态方法不会被实例继承

父类的静态方法可以被子类继承

静态方法也可以通过supper()调用

来个糖炒栗子吧

class Demo{
static hello(){
console.log('hello');
}
}
class ChildDemo extends Demo{
}
var demo = new Demo();
var childDemo = new ChildDemo();
Demo.hello(); // hello
ChildDemo.hello(); // hello
demo.hello(); // 报错啦
childDemo.hello(); // 根本就没执行到我，其实我也一样报错

静态属性和实例属性

如何定义静态属性？ES6规定Class内部只允许定义静态方法，不允许定义静态属性，ES7中有内部定义静态属性的提案，但是那是ES7的事情了

实例属性只能在constructor中定义

class Demo{
constructor(...props){
this.props = props; // 定义实例属性
}
}
Demo.props = 'static props';
var demo = new Demo(1, 2, 3);
console.log(demo.props); // [1, 2, 3]
console.log(Demo.props); // 'static props'