继承
- 说起继承,我相信大家应该都不陌生吧。举个非常通俗的例子,把你父亲的所有资产都转到你名下,这叫继承。把你的所有资产全部转到你儿子的名下,这也叫继承。
- 那么JavaScript 类
class中的继承到底是怎么一回事呢?让我们来探索一下吧。
class Father {
// ...
}
class Son extends Father {
// ...
}
上面的代码就是一个典型的继承,Son 继承 Father ,Father 为父类,Son 为子类,但是这段代码并没有什么特殊的地方,因为这两个类内部并没有定义任何东西,所以 Son 只是复刻了一个一模一样的 Father ,就像你和你爸走出去,别人都说你爷俩真是一个模子里刻出来的。
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
toStr() {
return this.x + this.y
}
}
class Son extends Father {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toStr1() {
return this.color + super.toStr()
}
}
上面这段代码中的 Son 才算是一个真正的继承类,不管是继承父类中的属性还是方法,都必须在前面加上 super 关键字,super 关键字在这里起到了一个什么作用呢?就是新建一个父类的 this 对象,然后通过这个 this 对象来调用和得到父类中的属性和方法。
注意点:
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class Son extends Father {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 正确
}
}
let son = new Son()
子类只有在使用 super 之后才能使用 this 关键字,否则会向上面那样报错。
原因是因为子类的构建是基于父类的,所以只有 super 才能调用父类实例。
通过 instanceof 关键字可以判断该实例是否是通过该类创建的。
console.log(son instanceof Father); // true
console.log(son instanceof Son); // true
返回 true 表示 son 是 Father 和 Son 这两个类生成的实例。
class Father {
static to() {
console.log('to');
}
}
class Son extends Father {}
Son.to() // to
上面的代码表达了,父类的静态方法也会被子类所继承,to 是 Father 的静态方法,而 Son 继承了 Father ,所以 Son 也有 to 这个静态方法
Object.getPrototypeOf()
Object.getPrototypeOf() 方法可以从子类上获取父类
console.log(Object.getPrototypeOf(Son) === Father) // true
所以,可以用这个方法来判断一个类是否继承了另一个类
类的 prototype 和 __proto__ 属性
大家都知道,在 JavaScript 实现中,每个对象都有 __proto__,指向对应的构造函数的 prototype 属性。class 作为构造函数的语法糖,同时拥有 prototype 属性和 __proto__ 属性,因此同时存在两条继承链。
(1)子类的 __proto__ 属性,表示构造函数的继承,总是指向父类。
(2)子类 prototype 属性的 __proto__ 属性,表示方法的继承,总是指向父类的 prototype 属性。
class F {}
class S extends F {}
console.log(S.__proto__ === F); // true
console.log(S.prototype.__proto__ === F.prototype); // true
上面代码中,子类 S 的 __proto__ 属性指向父类 F ,子类的 S 的 prototype 属性的 __proto__ 属性指向父类 F 的 prototype 属性
实例的 __proto__ 属性
子类实例中有一个 __proto__ 属性,子类实例的 __proto__ 指向父类,那么子类实例的 __proto__ 的 __proto__ 指向的就是父类的原型。
class F {}
class S extends F {}
let f = new F()
let s = new S()
console.log(s.__proto__.__proto__ === f.__proto__); // true