es6 class 类基本语法总结

参考网址：https://www.cnblogs.com/wuhaoquan/p/8809279.html
根据以上链接博主的文章做了简单的摘录

1、基本语法

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Point，对应 ES6 的Point类的构造方法。

Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。ES6 的类，完全可以看作构造函数的另一种写法。

2、 constructor 方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Point {
}
// 等同于
class Point {
  constructor() {}
}

3、 类的实例对象

class Point {
  // ...
}
// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);

4、 不存在变量提升(类不存在变量提升（hoist），这一点与 ES5 完全不同。)

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

5、es6中class创建的类只能new 执行不能当作普通函数执行；
前面设置static的：把当前Fn当作普通函数对象设置的键值对；

function Fn(){
    this.x=100;
};
Fn.prototype.getx=function(){
    console.log(this.x);
};
var f1=new Fn();
f1.getx();

//可以把它当作普通函数执行
Fn();

//还可以把Fn当作普通的对象设置键值对
Fn.queryX=function(){};
Fn.queryX();//执行的时候只能这样执行

改写成es6形式

class Fn{
    //等价于之前的构造函数题
    constructor(){
        this.x=100;
    }
    //直接些的方法就是加在原型上的===Fn.prototype.getX...
    getX(){
        console.log(this.x);
    }
    //给实例设置私有属性
    y=200
    //前面设置static的：把当前Fn当作普通函数对象设置的键值对
    static queryX(){}
    static z=300

}
//也可以在外面单独这样写
Fn.prototype.y=200;
Fn.z=300;

let f=new Fn(10,20);
f.getX();
Fn.queryX();

//直接执行这个类会报错
Fn();//报错