ES6类相关知识与继承

传统构造函数的问题

1. 属性与原型方法定义相分离,降低了可读性
2. 原型成员可以被枚举
3. 默认情况下,构造函数仍然可以被当做普通函数使用

类

类的基本使用

class Person  {
	constructor(name, age, sex) {
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	say(words) {
		console.log(words);
	}
}
let p = new Person("张三", 18, "男");
p.say("Hello");

类的特点

1. 类声明不会被提升,与let和const一样,存在暂时性死区
2. 类中的所有代码均在严格模式下执行
3. 类的所有方法都是不可枚举的
4. 类的所有方法都无法被当做构造函数使用
5. 类的构造器必须使用new来调用

类的其他书写方式

可计算属性名

const prop1 = "name";
const prop2 = "say";
class Person {
	constructor(name) {
		this[prop1] = name;
	}
	[prop2](some) {
		console.log("do something " + some);
	}
}
const a = new Person("张三");
console.log(a[prop1]);
a[prop2]("hello");

getter与setter

class Person {
	constructor(name) {
		this.name = name;
	}
	get name() {
		return "我叫: " + this._name
	}
	set name(val) {
		if (typeof val !== "string") {
			throw new TypeError("get error type of value: \"name\" ")
		}
		this._name = val
	}
}
const a = new Person("张三");
console.log(a.name); //"我叫: 张三"

静态成员

class Test{
	static a = 10;
	static say() {
		console.log("123");
	}
}
let demo = new Test();
console.log(demo.a); //undefined
console.log(Test.a); // 10
demo.say(); //demo.say is not a function
Test.say(); //"123"

字段初始化器

class Test {
	a = 10;
	b = 20;
}
let demo = new Test();
demo.a; //10
demo.b; //20

类的继承

class Person {
	constructor(name, age, sex) {
		if (new.target === Person) {
			throw new Error("You shouldn't create it directly, use it's child classs")
		}
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	print() {
		console.log(`name: ${this.name}`);
		console.log(`age: ${this.age}`);
		console.log(`sex: ${this.sex}`);
	}
}

class Man extends Person {
	constructor(name, age) {
		super(name, age, "男"); //子类存在constructor函数 第一行必须调用super
		this.loves = "游戏"; //子类自身的属性, '游戏'可以作为参数传入
	}
	print() { //重复定义与父类相同的函数,在调用时会调用子类定义的函数
		super.print(); //调用父类的函数
		console.log(`loves: ${this.loves}`); //子类函数的独特打印
	}
}

let man = new Man("张三", 18);
man.print();