1.简介
说明:class可以通过extends关键字实现继承,让子类继承父亲的属性和方法
class Fun {
constructor(x, y) {
this.x = x
this.y = y
}
talk() {
console.log("talk方法");
}
tell() {
console.log("tell方法");
}
}
class Fun1 extends Fun {
}
const obj1 = new Fun1()
obj1.talk() //talk方法
注意:Fun是父类,Fun1是子类,它通过extends关键字,继承了Fun所有属性和方法,等于复制Fun类。ES6规定,子类必须constructor方法中调用super(),否则就会报错。这是因为子类自己的this对象,必须先通过父类的构造函数来塑造。
1.1为什么一定要调用super()?
说明:ES6继承机制是先将父类的属性和方法,加到一个空对象上面,然后再将该对象作为子类的实例,即继承再前,实例在后。子类的构造函数中,只有调用super()方法之后,才可以使用this关键字。子类实例的构建,必须先完成父类的继承,只有具有了super方法才能让子类实例继承父类。
2.私有属性和私有方法的继承
说明:父类所有的属性和方法,都会被子类继承,除了私有的属性和方法。
class Fun2 {
#name = "李四"
name = "王二"
#talk() {
console.log("我是私有talk方法");
}
talk() {
console.log("我是公有talk方法");
}
getMethod() {
console.log(this.#name); //李四
}
}
class Fun3 extends Fun2 {
}
class Fun4 extends Fun2 {
constructor() {
super()
// console.log(this.#name);//Private field '#name' must be declared in an enclosing class
}
}
const obj3 = new Fun3()
console.log(obj3); //Fun3
说明:因此,子类无法直接访问这些私有属性和方法,但可以通过继承关系间接地访问到它们(原型链)。
3.静态属性和静态方法的继承
说明:静态属性是通过浅拷贝实现继承的,如果父类的静态属性是一个对象的时候,那么子类的静态属性也会指向这个对象,浅拷贝只会拷贝对象的地址值。
4.Object.getPrototypeOf方法
说明:从子类获取父类。
class Fun5 {
}
class Fun6 extends Fun5 {
}
console.log(Object.getPrototypeOf(Fun6) === Fun5); //true
注意:也可以认为Fun5是在Fun6的原型链上。
5.super关键字
说明:super关键字可以当对象使用和函数使用,用法不同。
- 情况1是super作为函数调用时,代表父类的构造函数。
- 情况2是suepr作为对象的,普通方法中,指向父类的原型对象,在静态方法中,指向父类。
class Fun7 {
tell() {
console.log("我是父类的Fun7方法");
}
}
class Fun8 extends Fun7 {
constructor() {
super()
super.tell() //等价于super.prototype.tell()
}
}
const obj8 = new Fun8()
obj8.tell()
// Fun8.tell()
// 我是父类的Fun7方法
// 我是父类的Fun7方法
5.1super对象
说明:super指向父类的原型对象,所有定义在父类实例上的方法或属性,是无法通过super调用的。
class Fun9 {
constructor(x) {
this.x = 3
}
}
Fun9.prototype.y = 5
class Fun10 extends Fun9 {
constructor() {
super()
}
get value() {
console.log(super.x);
}
}
const obj10 = new Fun10()
obj10.value //undefined
console.log(obj10.y);//5
注意:ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。
5.2super对象方法赋值
说明:由于this指向子类实例,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。
class Fun11 {
constructor() {
this.x = 1
}
}
Fun11.prototype.layerA = 10
class Fun12 extends Fun11 {
constructor() {
super()
this.x = 2
super.x = 30
}
talk() {
console.log(super.x);
}
talk1(){
console.log(super.layerA);
}
}
const obj12 = new Fun12()
console.log(obj12.x); //30
obj12.talk() //undefined
obj12.talk1() //10
注意:super对象在读值的情况下是找父类原型, super对象在赋值的情况下super指向的是子类的实例对象。子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。
6.类的prototype属性和__proto__属性
- 子类的__proto__属性,表示构造函数的继承,总是指向父类
- 子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。
class Fun13 {
}
class Fun14 extends Fun13{
}
console.log(Fun14.__proto__===Fun13);//true
console.log(Fun14.prototype.__proto__===Fun13.prototype);//true
7.实例的__proto__属性
说明:子类实例__proto__属性的__proto__属性,指向父类实例的__proto__属性。也就是说,子类实例对象的原型的原型,是父类实例对象的原型。
8.Mixin模式的实现
说明:Mixin指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口,它的最简单实现如下。
const arr1=[1]
const arr2=[2]
const arr3=[...arr1,...arr2]