最近需要使用js的接口能力。
但发现Javascript ES6语法只有继承（extends），但没有接口（interface）的语法。
没有接口的话只能继承，但继承又只能单继承。
那需要多继承才能实现功能就无法推进了。
- 绘制系统（paint system）
- 碰撞系统（collision_system）
- 可绘制物（paintable）
- 碰撞物（collidable）
- 蛇（snake）
其中，绘制系统有绘制paintable的能力，而碰撞系统有碰撞检测的能力（检测碰撞物）
在以上的逻辑体系下，蛇只要实现了paintable和collidable，就可以实现绘制和碰撞功能。
但目前Javascript没有提供接口与多继承能力，所以找了找资料，最后选用了以下方法：
使用Javascript的prototype+class定义，实现接口能力。
这里需要两个前置知识，不了解的可以看一下，了解的话跳过就好。
- Javascript中的class
- Javascript中的prototype
前置知识：Javascript中的class
Javascript支持class语法。
形如：
/*** 类定义：Demo*/class Demo {/*** 属性定义：x,y*/x;y;/*** 构造方法（构造器）：无参构造*/constructor() {}/*** 方法定义：doSomething*/doSomething() {}}
前置知识：Javascript中的prototype有什么用处？怎么用？
Javascript的prototype可以用来自定义类的行为。
例：为String添加isDate的实例方法：
// 自定义String类的isDate实例方法String.prototype.isDate = function(){var regex = new RegExp("^[d]([-|/])[d]{1,2}([-|/])[d]{1,2}$");console.log(this);return regex.exec(this);}// 所有string的实例都可以使用之前定义的isDate方法var strValue = "12512412";alert(strValue.isDate());
Javascript接口方案
使用Javascript的prototype+class定义实现接口的能力
- 使用class做接口定义
- 给出接口定义的使用示例
- 按照示例使用接口
/*** 可碰撞物*/class Collidable {/*** 描述物体碰撞边界的碰撞矩形** 碰撞矩形互相接触时，则会触发碰撞判定（触发Collidable#collision_handle方法）。*/collision_rects_border() {}/*** 碰撞处理方法** 用户需对碰撞进行处理，此方法即碰撞处理方法，会在发生碰撞时触发。** @param collidable 与本物体发生碰撞的物体*/collision_handle(collidable) {}}
/*** Collidable实现示例*/class CollidableDemoImpl {x = 10;y = 10;width = 10;}
/*** CollidableDemoImpl实现Collidable接口示例** collision_rects_border方法实现*/CollidableDemoImpl.prototype.collision_rects_border = function () {return {x: this.x, y: this.y, width: this.width, height: this.width};}/*** CollidableDemoImpl实现Collidable接口示例** collision_handle方法实现** @param collidable 碰撞物*/CollidableDemoImpl.prototype.collision_handle = function (collidable) {// 根据碰到的碰撞物的实际类型判定，它的处理逻辑是什么// 碰到食物if (collidable instanceof Food) {// 伪代码：吃掉食物}// 伪代码：碰到墙else if (1 == 1) {// 伪代码：this.die();}}
按示例与实际业务逻辑，实现接口即可。
总结
可以使用Javascript的prototype+class定义实现接口的能力。
优点：
- 基本实现了接口的能力
- 开发工具能够一定程度上识别到接口方法（因为使用class做定义了）
- 灵活度强（prototype不定义接口都能加方法）
缺点：
- 能力不完整（比如IDE的rename操作等），不如原生语法好用
- 约束力不够（prototype支持随意添加方法，约束力差）
- 代码挺啰嗦的
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/78364.html
