js面向对象设计之class继承

时间:2021-10-08 13:33:53

EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民。但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的
语法糖,所以它们并没有带来任何的新特性。不过,它使代码的可读性变得更高,并且为今后版本里更多面向对象的新特性打下了基础。

在介绍 class 继承以前,先来回忆一下没有 class 之前类是怎么被创建和继承的:

1、定义 function father 构造函数,再通过 prototype 定义 father 类原型方法。

2、定义 function child 构造函数,构造函数内部通过 father.call( this, arguments ) 的方式获得父类的实例属性。

3、通过 child.prototype = new father() 的方式获取 father 的原型方法。

4、最后还必须 child.prototype.constructor = child 的方式进行子类构造函数的还原。

再从 child 上继续往下派生呢? 项目代码的可读性越来越差,代码结构也越来越不清晰。当然本文并未打算讨论 javascript 的不是。在能基本满足生产要求的情况下,暂时也不会去深入探讨 function class prototype __proto__ constructor 等等内容的错综复杂的关系,实际上我们需要的是清晰的代码层次,满足继承关系即可,至于里边的实现,可能不会显得那么重要,一般情况下,我们并不会需要去了解的如此的深入。

废话不多说,开始本文的主要内容。

class 作为类的使用,可参见我的另外一篇博文:js面向对象设计之class类。下面主要介绍 class 的继承。

先来看一个简单的例子:

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toString() {
return this.color + ' ' + super.toString();
}
}
let ins = new ColorPoint(,,'red');
console.log( ins.toString() ); /* red [object Object] */

class 继承一个比较关键的引用 super 在上述例子中出现了两次。分别是在构造函数中和类方法中。需要注意的是 super 只能在子类中使用。super 在构造函数中的作用和在子类方法中的作用并不同。

在构造函数中,super 是一个函数,它调用父类的构造函数,并隐式的返回一个 this。如果在 super(x,y) 前面执行 this.color 程序会报错。原因前一句已经说了,super 会隐式的返回一个 this,而子类的构造函数的初始化全部都是基于这个 this 的。这是 class 中的一种机制,关于构造函数的这部分内容无须记得很牢,因为在开发过程中,如果子类的构造函数不使用 super(...),或在错误的地方调用它,子类都会报错,所以无论如何,你都会记得很牢(否则程序无法开发下去)。

而在子类的方法中,super 作为一个引用指向父类的方法。这个特性在 function 中也可以实现,虽然需要写一些不那么好阅读和维护的代码,比如你可以先保存 father.toString 的引用(当然需要注意 this 的指向问题,可以采用 bind 或 call 等方式),然后再写 child.toString = function(){...},在这里面调用父类的方法。也许有更优雅的写法。但是能有 class 的写法更加优雅简洁易读和易维护吗,显然不能,那我们就必须往前看了。在成为资深前端之前,可以忘掉 function。

在使用 super 调用父类的方法时,super 内部的 this 指向子类。逆向思维来想想,这个 this 也只能指向子类的实例,调用者就是它。除非用 bind call apply 这些东西。

关于 super 博主将来会深挖更多的东西,现在暂且就了解到这个地步。

ins 同时是 Point 和 ColorPoint 的实例,这个读者自行验证。这也符合 ES5 的规范。

上面的例子中,ins 的属性 x 是在原型上,还是在实例上?这里从 super 的理解上着手立马就有答案,x 属性是实例的,不是原型的。

这个例子讲解了 class 类的公有属性和公有方法的相关继承问题。公有属性全部都在实例上,而公有方法全部都在原型上。这个就不详细展开了。

下面是 class 的静态方法相关处理方式。

class A { static geta(){ console.log( 'A' ); } }
class B extends A { static getb(){ console.log( 'B' ); } }
B.geta(); /* A */
B.getb(); /* B */

下面来看看 class 中的私有属性在继承中的相关反应。先看一个例子:

var A = ( function(){
var _name;
class A {
constructor() {}
getName(){ console.log( _name ); }
setName( name ){ _name = name; return this; }
}
return A;
} )();
class B extends A { }
let ins = new B();
ins.setName('nDos').getName(); // nDos

上例中 B 继承于 A,B 的实例 ins 可以通过 A 的公有方法使用 A 的私有变量 _name。

小tips:class 中可以让指定的类无法被实例化,通过判断 new.target === theClass(定义的类名)的真假抛出错误,使得 theClass 不能被实例化而只能被继承,这是一个很有用的 tips。不用担心继承的问题,子类实例化的时候,父类的构造函数中 new.target 指向的是子类。参见下例:

class A {
constructor() {
new.target === A || console.log('A 为抽象类,不能被实例化')
}
}
class B extends A { }
let ins = new B(); /* A 为抽象类,不能被实例化 */

class 的继承还可以从原生构造函数中继承,我的另外一篇博文有提过。关于这方面的内容需要单独行文探讨,此处暂时不讨论,仅仅提一下。

class Mixin 混合继承。这个是为了解决多重继承的问题而来。什么是多重继承,多重继承是编程语言中的概念,多重继承指的是一个类可以继承另外一个类,而另外一个类又可以继承别的类,比如A类继承B类,而A类又可以继承C类,这就是多重继承。这里将要将的就是这个。但是 Mixin 更加的灵活,使得代码结构也更加清晰优雅。

var A = ( function(){
var _name;
class A {
constructor() {}
getName(){ console.log( _name ); }
setName( name ){ _name = name; return this; }
}
return A;
} )();
function Mixin ( BaseClass ) {
return class extends BaseClass
{
mixin(){ console.log('这是混合继承的类的方法'); }
}
}
class C extends Mixin(A)
{
getC(){ console.log('c'); }
}
let ins = new C();
ins.mixin(); // 这是混合继承的类的方法
ins.setName('nDos').getName(); // nDos
ins.getC(); // c