ES6中class的学习笔记

类的由来

javascript语言中，生成实例对象的传统方法是通过构造函数。ES6提供了更接近传统语言的写法，引入了Class(类)的概念，作为对象的模板。通过class关键字，可以定义类。
基本上，ES6的class可以看做只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更加像面向对象编程的语法而已。

使用class声明类

class Person {
 constructor(name, age) {
  this.name = name;
  this.age = age;
 }
 say() {
  console.log(`我的名字是:${this.name},年龄是${this.age}`);
 }
}
const person = new Person('zhangsan', 10);
console.log(person);
person.say();

上面代码定义了一个类，可以看到里面有一个constructor() 方法，这就是构造方法，而this关键字则代表实例对象。
Person类除了构造方法，还定义了一个say()方法。注意：定义say方法的时候不需要加function关键字，方法与方法之间不需要逗号分隔，加了会报错。

class Person {...}
typeof Person; // "function"
Person === Person.prototype.constructor; // true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。
使用的时候也是直接对类使用new 命令，跟构造函数的用法完全一致。
构造函数的prototype属性，在ES6的类上面继续存在，事实上，类的所有方法都定义在类的prototype属性上面。

class Person {
	constructor() {}
	toValue() {}
	toString() {}
}
// 等同于
Point.prototype = {
	constructor() {},
	toValue() {},
	toString() {}
}

上面代码中，constructor、toValue、toString这三个方法，其实都是定义在Person.prototype上面。
因此，在类的实例上面调用方法，其实就是调用原型上的方法。

class Person {};
class person = new Person();
person.constructor === Person.prototype.constructor;  // true
// 上面代码中，person 是 Person类的实例，它的constructor方法就是Person类原型的constructor方法。

constructor

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

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

上面代码中，定义了一个空的Person类，javascript引擎会自动为它添加一个空的constructor方法。

静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类调用，这就被称为"静态方法"。

class Person {
 	constructor(name, age) {
  		this.name = name;
  		this.age = age;
 	}
	static say() {
		console.log('static say');
	}
	say() {
    	console.log(`我的名字是:${this.name},年龄是${this.age}`);
    }
}
Person.say();  // "static say"
const person = new Person('zhangsan', 10);
person.say(); // "我的名字是:zhangsan,年龄是10"

如果静态方法中包含this关键字，这个this指的是类，而不是实例。
静态方法和非静态方法可以重名。
父类的静态方法可以被子类继承。

class Person {
	static say() {
		console.log('static say');
	}
}
class Man extends Person {...}
Man.say();  // "static say"

静态方法也可以从super对象上调用。

class Person {
	static say() {
		return 'hello';
	}
}
class Man extends Person {
	static say() {
		console.log(super.say() + ' world');
	}
}
Man.say();  // "hello world"

静态属性

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

class Person {
	static height = 200;
}
Person.height // 200

extends继承

extends关键字用来创建一个类作为另一个类的子类

class Person {
	constructor(name) {
  		this.name = name;
 	}
    say() {
       console.log(`我的名字是:${this.name}`);
    }
}
class Man extends Person {
	constructor(name, age) {
  		super(name);
  		this.age = age;
 	}
    say() {
   		console.log(`我的名字是:${this.name},年龄是:${this.age}`);
    }
}
const man = new Man('zhangsan', 10);
man.say();  // 我的名字是:zhangsan,年龄是:10

如果子类中没有定义constructor，那么它会被默认添加。

class Man extends Person {}
// 等同于
class Man extends Person {
	constructor(...args) {
		super(...args);
	}
}

如果子类中定义了constructor，那么它必须先调用super，才能使用this，否则会报错。

class Man extends Person {
	constructor(name, age) {
		this.age = age;  // 报错
		super(name);
		this.age = age;  // 正确
	}
}

注意

类必须使用new 调用，否则会报错。这是它和构造函数的一个主要区别，后者不使用new 也可以执行。

class Person {...};
const person = Person('zhangsan', 10);  // 报错
const person = new Person('zhangsan', 10);  // 正确