文章目录
Class 的基本语法
1.简介
①基本使用：
es5中：
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 Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Point类除了构造方法，还定义了一个toString()方法。注意，定义toString()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。类的方法其实是定义在Point.prototype上面。
类的数据类型就是函数，类本身就指向构造函数。:
class Point {
// ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true
②Object.assign()方法：
Object.assign()方法可以很方便地一次向类添加多个方法。
class Point {
constructor(){
// ...
}
}
Object.assign(Point.prototype, {
toString(){},
toValue(){}
});
③类的内部所有定义的方法，都是不可枚举的
class Point {
constructor(x, y) {
// ...
}
toString() {
// ...
}
}
Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
var Point = function (x, y) {
// ...
};
Point.prototype.toString = function () {
// ...
};
Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
注：
Object.keys(obj)
- 参数：要返回其枚举自身属性的对象
- 返回值：一个表示给定对象的所有可枚举属性的字符串数组
④constructor方法
constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。
class Point {
}
// 等同于
class Point {
constructor() {}
}
constructor()方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
class Foo {
constructor() {
return Object.create(null);
}
}
new Foo() instanceof Foo
// false
⑤取值函数（getter）和存值函数（setter）
在“类”的内部可以使用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 对象上的。
⑥注意点
（1）类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。
（2）不存在提升
类不存在变量提升（hoist），这一点与 ES5 完全不同。
new Foo(); // ReferenceError
class Foo {}
上面代码中，Foo类使用在前，定义在后，这样会报错，因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关，必须保证子类在父类之后定义。
{
let Foo = class {};
class Bar extends Foo {
}
}
上面的代码不会报错，因为Bar继承Foo的时候，Foo已经有定义了。但是，如果存在class的提升，上面代码就会报错，因为class会被提升到代码头部，而let命令是不提升的，所以导致Bar继承Foo的时候，Foo还没有定义。
2.静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
注意，如果静态方法包含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 Animal {
// 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
constructor(name,color) {
this.name = name;
this.color = color;
}
// toString 是原型对象上的属性
toString() {
console.log('name:' + this.name + ',color:' + this.color);
}
}
class Cat extends Animal {
constructor(action) {
// 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
// 如果没有置顶consructor,默认带super函数的constructor将会被添加、
super('cat','white');
this.action = action;
}
toString() {
//调用父类的方法
console.log(super.toString());
}
}
Object.getPrototypeOf()方法
Object.getPrototypeOf方法可以用来从子类上获取父类。
Object.getPrototypeOf(ColorPoint) === Point
// true
因此，可以使用这个方法判断，一个类是否继承了另一个类。
3.继承
①继承内置类
也可以让我们的类继承自内置类，比如Array：
//子类继承了父类即数组的常用方法
class myArray extends Array {
//子类里面的方法是返回数组的最后一个元素
lastItem(){
return this.[this.length-1]
}
}
var array = new nyArray(10,20,30)
console.log(array.lastItem())
②类的混入mixin
JavaScript的类只支持单继承：也就是只能有一个父类
那么在开发中我们我们需要在一个类中添加更多相似的功能时，应该如何来做呢？
这个时候我们可以使用混入（mixin）；
class Person{
}
function mixinRunner(BaseClass){
return class extends BaseClass{
running(){
console.log("running~");
}
}
}
function mixinEater(BaseClass){
return class extends BaseClass{
eating(){
console.log("eating~");
}
}
}
class NewPerson extends mixinEater(mixinRunner(Person)){
}
var np = new NewPerson()
np.eating()
np.running()
③类的 prototype 属性和__proto__属性
Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。
（1）子类的__proto__属性，表示构造函数的继承，总是指向父类。
（2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。
class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
这两条继承链，可以这样理解：作为一个对象，子类（B）的原型（__proto__属性）是父类（A）；作为一个构造函数，子类（B）的原型对象（prototype属性）是父类的原型对象（prototype属性）的实例。
④实例的 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
上面代码中，ColorPoint继承了Point，导致前者原型的原型是后者的原型。
