《十七》E6中的class

ES6之前是用构造函数去模拟类。

function Person(name){
	//属性 
    this.name = name;
}

//方法
Person.prototype.showName = function(){
    return `我的名字是${this.name}`;
}
//或者：
Object.assign(Person.prototype,{
	showName(){
		 return `我的名字是${this.name}`
	}
})

let p1 = new Person('阿铛');
console.log(p1.showName());

这种写法跟传统的面向对象语言，比如C++和Java，差异很大。

class：

ES6提供了更接近传统语言的写法，引入了class(类)的概念。通过class关键字，可以定义类。使用的时候，直接对类使用new命令，跟构造函数的用法完全一致。

基本上，ES6中的calss可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
语法糖：语法糖的作用其实就是让写的代码更加简单，看起来也更容易理解。

class不存在提升。

class Person{
	//构造方法，ES5的构造函数Person，对应ES6的Person类的构造方法
	constructor(name){
		//属性
		this.name = name;//this关键字代表的是实例对象
	}
	//方法，定义类的方法的时候，前面不需要加function关键字；方法之间不需要逗号分割，加了会报错
	showName(){
		 return `我的名字是${this.name}`
	}
}

let p1 = new Person('阿铛');
console.log(p1.showName());

ES的类，完全可以看作构造函数的另一种写法。类的数据类型就是函数，类本身就指向构造函数

console.log(typeof Person)//function
console.log(Person === Person.prototype.constructor)//true

构造函数的prototype属性，在ES6的类上面继续存在。事实上，类的所有方法都定义在prototype属性上面。

class Person{
	constructor(){}
	showName(){}
}

//等同于
Person.prototype = {
	constructor(){}
	showName(){}
}

class表达式：

与函数一样，类也可以使用表达式的形式定义。

const Person = class {}

属性表达式：

类的属性名可以使用表达式，要用中括号括起来。

let method = "show";
let str = "Name";
class Person{
	constructor(name){
		this.name = name;
	}
	
	[method+str](){
		 return `我的名字是${this.name}`
	}
}

let p1 = new Person('阿铛');

console.log(p1.showName());
console.log(p1[method+str]()); 

constructor方法：

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

class Person{}

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

静态方法：

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。

如果在一个方法前加上static关键字 ，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为"静态方法"。

class Foo{
    static print(){
        return 'hello world';
    }
}

Foo.print(); //"hello world"

var foo = new Foo();
foo.print()
// TypeError: foo.printis not a function

如果静态方法包含this关键字，这个this指的是类，而不是实例。

class Foo {
  static bar() {
    this.baz();
  }
  //静态方法可以与非静态方法重名
  static baz() {
    console.log('hello');
  }
  baz() {
    console.log('world');
  }
}

Foo.bar() // hello

静态属性：

静态属性指的是class本身的属性，即class.propName，而不是定义在实例对象（this）上的属性。

class Foo {
}

Foo.prop = 1;
Foo.prop // 1

目前，只有这种写法可行，因为ES6明确规定，class内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}

class的继承：

Class可以通过extends关键字实现继承。

子类必须在constructor方法中调用super方法，否则新建实例时会报错，这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法，如果不调用super方法，子类就得不到this对象。

ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
ES6的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

如果子类没有定义constructor方法，这个方法会被默认添加，也就是说，不管有没有显式定义，任何一个子类都有constructor方法。

class ColorPoint extends Point {
}

// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

父类的静态方法，也会被子类继承。

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

super关键字：

super关键字既可以当做函数使用，也可以当做对象使用。在这两种情况下，它的用法完全不同。

使用super的时候，必须显式指定是作为函数还是作为对象使用，否则会报错。

class A {}

class B extends A {
  constructor() {
    super();
    console.log(super); // 报错
  }
}

1. super当做函数调用时，代表父类的构造函数。ES6要求，子类的构造函数必须执行一次suoer函数。

   super虽然代表了父类的构造函数，但是返回的是子类的实例，即super内部的this指的是子类的实例。因此super相当于父类.prototype.constructor.call(this)。

   class A {}
   
   class B extends A {
     constructor() {
       super();
     }
   }
   

   作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

   class A {}
   
   class B extends A {
     m() {
       super(); // 报错
     }
   }
   

2. super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

   class A {
     p() {
       return 2;
     }
   }
   
   class B extends A {
     constructor() {
       super();
       console.log(super.p()); // 2。相当于A.prototype.p()
     }
   }
   
   let b = new B();
   

   在普通方法中，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

   class A {
     constructor() {
       this.p = 2;
     }
   }
   
   class B extends A {
     get m() {
       return super.p;
     }
   }
   
   let b = new B();
   b.m // undefined。p是父类A实例的属性，super.p引用不到它。
   

   如果属性定义在父类的原型对象上，super就可以取到。

   class A {}
   A.prototype.x = 2;
   
   class B extends A {
     constructor() {
       super();
       console.log(super.x) // 2
     }
   }
   
   let b = new B();
   

   ES6规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

   class A {
     constructor() {
       this.x = 1;
     }
     print() {
       console.log(this.x);
     }
   }
   
   class B extends A {
     constructor() {
       super();
       this.x = 2;
     }
     m() {
       super.print();//实际上指向的是super.print.call(this)
     }
   }
   
   let b = new B();
   b.m() // 2
   

   由于this指向子类实例，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性就会变成子类实例的属性。

   class A {
     constructor() {
       this.x = 1;
     }
   }
   
   class B extends A {
     constructor() {
       super();
       this.x = 2;
       super.x = 3;
       console.log(super.x); // undefined
       console.log(this.x); // 3
     }
   }
   
   let b = new B();
   

   上面代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined。

   如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。

   class Parent {
     static myMethod(msg) {
       console.log('static', msg);
     }
   
     myMethod(msg) {
       console.log('instance', msg);
     }
   }
   
   class Child extends Parent {
     static myMethod(msg) {
       super.myMethod(msg);
     }
   
     myMethod(msg) {
       super.myMethod(msg);
     }
   }
   
   Child.myMethod(1); // static 1
   
   var child = new Child();
   child.myMethod(2); // instance 2
   

   在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。

   class A {
     constructor() {
       this.x = 1;
     }
     static print() {
       console.log(this.x);
     }
   }
   
   class B extends A {
     constructor() {
       super();
       this.x = 2;
     }
     static m() {
       super.print();
     }
   }
   
   B.x = 3;
   B.m() // 3
   

Object.getPrototypeOf()：

Object.getPrototypeOf()方法可以用来从子类上获取父类。因此，可以使用这个方法判断一个类是否继承了另一个类。

Object.getPrototypeOf(ColorPoint) === Point
// true

类的prototype属性和__proto__属性：

大多数浏览器的ES5实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。

Class作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。

1. 子类的__proto__属性，表示构造函数的继承，总是指向父类。
2. 子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

可以这样理解，作为一个对象，子类的原型（__proto__属性）是父类；作为一个构造函数，子类的原型对象（prototype属性）是父类的原型对象（prototype属性）的实例。

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

这样的结果是因为，类的继承是按照下面的模式实现的。

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);//等同于B.prototype.__proto__ = A.prototype;

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();//等同于B.__proto__ = A;

实例的__proto__属性：

子类实例的__proto__属性的__proto__属性，指向父类实例的__proto__属性，也就是说，子类实例的原型的原型，是父类实例的原型。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

因此，通过子类实例的__proto__.__proto__属性，可以修改父类实例的行为。

p2.__proto__.__proto__.printName = function () {
  console.log('Ha');
};

p1.printName() // "Ha"