ES6的class详解
class
声明创建一个基于原型继承的具有给定名称的新类。 和类表达式一样，类声明体在严格模式下运行。构造函数是可选的。类声明不可以提升（这与函数声明不同）
一个普通的构造函数
function ZxxFn (name, age) {
this.name = name
this.age = age
}
ZxxFn.prototype.showName = function () {
console.log(this.name)
}
ZxxFn.prototype.showAge = function () {
console.log(this.age)
}
let zxx = new ZxxFn('zxx', 18)
console.log(zxx) // ZxxFn {name: "zxx", age: 18}
console.log(zxx.showName()) // zxx转换为class写法
class ZxxFn {
// 类的构造方法
constructor (name, age) {
this.name = name
this.age = age
}
showName () { // 1.在类中声明方法的时候，千万不要给该方法加上function关键字
console.log(this.name)
}
showAge () { // 2.方法之间不要用逗号分隔，否则会报错
console.log(this.age)
}
}
let zxx = new ZxxFn('zxx', 18)
console.log(zxx) // ZxxFn {name: "zxx", age: 18}
console.log(zxx.showName()) // zxx类的所有方法都定义在类的prototype属性上
constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法。
constructor方法如果没有显式定义，会隐式生成一个constructor方法。所以即使你没有添加构造函数，构造函数也是存在的。constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。
类的内部所有定义的方法，都是不可枚举的
类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
class Desk{
constructor(){
this.xixi="我是一只小小小小鸟！哦";
}
}
class Box{
constructor(){
return new Desk();// 这里没有用this哦，直接返回一个全新的对象
}
}
var obj=new Box();
console.log(obj.xixi);//我是一只小小小小鸟！哦constructor中定义的属性可以称为实例属性（即定义在this对象上），constructor外声明的属性都是定义在原型上的，可以称为原型属性（即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。
class Box {
constructor (num1, num2) {
this.num1 = num1
this.num2 = num2
}
sum () {
return num1 + num2
}
}
var box = new Box(12, 88)
console.log(box.hasOwnProperty('num1')) // true
console.log(box.hasOwnProperty('num2')) // true
console.log(box.hasOwnProperty('sum')) // false
console.log('num1' in box) // true
console.log('num2' in box) // true
console.log('sum' in box) // true
console.log('say' in box) // falseclass不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。
这种规定的原因与下文要提到的继承有关，必须保证子类在父类之后定义。
上面的代码不会报错，因为Bar继承Foo的时候，Foo已经有定义了。但是，如果存在class的提升，上面代码就会报错，因为class会被提升到代码头部，而let命令是不提升的，所以导致Bar继承Foo的时候，Foo还没有定义。
{
let Foo = class {};
class Bar extends Foo {
}
}// ES5可以先使用再定义,存在变量提升
new A();
function A(){
}
// ES6不能先使用再定义,不存在变量提升 会报错
new B();//B is not defined
class B{
}静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function上面代码中，Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。
注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。
class Foo {
static bar() {
this.baz();
}
static baz() {
console.log('hello');
}
baz() {
console.log('world');
}
}
Foo.bar() // hello上面代码中，静态方法bar调用了this.baz，这里的this指的是Foo类，而不是Foo的实例，等同于调用Foo.baz。另外，从这个例子还可以看出，静态方法可以与非静态方法重名。
父类的静态方法，可以被子类继承。
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
}
Bar.classMethod() // 'hello'上面代码中，父类Foo有一个静态方法，子类Bar可以调用这个方法。
静态方法也是可以从super对象上调用的。
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod() + ', too';
}
}
Bar.classMethod() // "hello, too"
实例属性的新写法
实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。
class IncreasingCounter {
constructor() {
this._count = 0;
}
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}
上面代码中，实例属性this._count定义在constructor()方法里面。另一种写法是，这个属性也可以定义在类的最顶层，其他都不变。
class IncreasingCounter {
_count = 0;
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}
上面代码中，实例属性_count与取值函数value()和increment()方法，处于同一个层级。这时，不需要在实例属性前面加上this。
这种新写法的好处是，所有实例对象自身的属性都定义在类的头部，看上去比较整齐，一眼就能看出这个类有哪些实例属性。
class foo {
bar = 'hello';
baz = 'world';
constructor() {
// ...
}
}
上面的代码，一眼就能看出，foo类有两个实例属性，一目了然。另外，写起来也比较简洁。
静态属性
静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。
class Foo {
}
Foo.prop = 1;
Foo.prop // 1
上面的写法为Foo类定义了一个静态属性prop。
目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。
class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myStaticProp); // 42
}
}
这个新写法大大方便了静态属性的表达。
// 老写法
class Foo {
// ...
}
Foo.prop = 1;
// 新写法
class Foo {
static prop = 1;
}
上面代码中，老写法的静态属性定义在类的外部。整个类生成以后，再生成静态属性。这样让人很容易忽略这个静态属性，也不符合相关代码应该放在一起的代码组织原则。另外，新写法是显式声明（declarative），而不是赋值处理，语义更好。
this 的指向
类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。
class Logger {
printName(name = 'there') {
this.print(`Hello ${name}`);
}
print(text) {
console.log(text);
}
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined
上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined），从而导致找不到print方法而报错。
一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到print方法了。
class Logger {
constructor() {
this.printName = this.printName.bind(this);
}
// ...
}
另一种解决方法是使用箭头函数。
class Obj {
constructor() {
this.getThis = () => this;
}
}
const myObj = new Obj();
myObj.getThis() === myObj // true
箭头函数内部的this总是指向定义时所在的对象。上面代码中，箭头函数位于构造函数内部，它的定义生效的时候，是在构造函数执行的时候。这时，箭头函数所在的运行环境，肯定是实例对象，所以this会总是指向实例对象。
还有一种解决方法是使用Proxy，获取方法的时候，自动绑定this。
function selfish (target) {
const cache = new WeakMap();
const handler = {
get (target, key) {
const value = Reflect.get(target, key);
if (typeof value !== 'function') {
return value;
}
if (!cache.has(value)) {
cache.set(value, value.bind(target));
}
return cache.get(value);
}
};
const proxy = new Proxy(target, handler);
return proxy;
}
const logger = selfish(new Logger());
通过Object.assign方法给对象添加属性
class ZxxFn {
// 类的构造方法
constructor (name, age) {
Object.assign(this, {name, age})
}
showName () {
console.log(this.name)
}
}
Object.assign(ZxxFn.prototype, { // 还可以通过Object.assign方法来为对象动态增加方法
getNameAge: function () {
return this.name + this.age
},
getAge: function () {
return this.age
}
})
let zxx = new ZxxFn('zxx', 18)
console.log(zxx.showName()) // zxx
console.log(zxx.getNameAge()) // zxx18
console.log(zxx.getAge()) // 18
Class 表达式
与函数一样，类也可以使用表达式的形式定义。
const MyClass = class Me {
getClassName() {
return Me.name;
}
};上面代码使用表达式定义了一个类。需要注意的是，这个类的名字是Me，但是Me只在 Class 的内部可用，指代当前类。在 Class 外部，这个类只能用MyClass引用。
let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined
上面代码表示，Me只在 Class 内部有定义。
如果类的内部没用到的话，可以省略Me，也就是可以写成下面的形式。
const MyClass = class { /* ... */ };
采用 Class 表达式，可以写出立即执行的 Class。
let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}('张三');
person.sayName(); // "张三"
上面代码中，person是一个立即执行的类的实例。
取值函数（getter）和存值函数（setter）
与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
class MyClass {
constructor() {
// ...
}
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'
上面代码中，prop属性有对应的存值函数和取值函数，因此赋值和读取行为都被自定义了。
存值函数和取值函数是设置在属性的 Descriptor 对象上的。
class CustomHTMLElement {
constructor(element) {
this.element = element;
}
get html() {
return this.element.innerHTML;
}
set html(value) {
this.element.innerHTML = value;
}
}
var descriptor = Object.getOwnPropertyDescriptor(
CustomHTMLElement.prototype, "html"
);
"get" in descriptor // true
"set" in descriptor // true上面代码中，存值函数和取值函数是定义在html属性的描述对象上面，这与 ES5 完全一致。
属性表达式
类的属性名，可以采用表达式。
let methodName = 'getArea';
class Square {
constructor(length) {
// ...
}
[methodName]() {
// ...
}
}上面代码中，Square类的方法名getArea，是从表达式得到的。
腾讯云开发者
