【JavaScript】对象类的继承和使用接口

JavaScript 虽然可以创建对象Object，但是没有像其它的编程语言一样有原生的继承接口方式，那问题来了，JavaScript如何使用继承和接口呢，接下来会讲

创建一个对象文件例如cat.js, 代码如下

export default class Cat {
	
	#name = '猫';
	
	/*
	* 这是构造方法 new Object() 会自动调用
	* @param { String } name 可传参 猫的名字
	*/
	constructor(name){
		this.#name = name || "黑猫";
		
	}
}

再创建一个对象文件mycat.js，继承Cat对象， 代码如下

//添加引用 需要继承的对象
import Cat from 'cat.js';

/**
 * 一个MyCat对象，继承了上面的Cat的
 * */
export default class MyCat extends Cat {
	
	/**
	 * 构造方法
	 * */
	constructor(){
		super('Tom');//调用父类的构造方法
		// super.toLocation(2,3);
	}
}

只要了解其它编程语言的接口实现原理，就可以通过自己来实现，新建一个接口文件interfaces.js，代码如下

export default {
	/**
	 * 继承的接口
	 * @param { Object } obj 指定对象类
	 * @param { Object } methods 继承抽象接口对象
	 * @param { Object } interfaces 实现接口对象
	 * @param { Boolean } notEmpty 未实现接口判断 默认false
	 * */
	implement(obj,methods,interfaces,notEmpty){
		for(let m in methods){
			if (typeof methods[m] != 'function') {
				continue
				// throw new Error(`${m}不是接口方法`)
			}
			if (obj[m] != undefined) {
				throw new Error(`此对象已存在属性或方法 ${m}`)
			}
			if (typeof interfaces[m] != 'function') {
				if (notEmpty) {
					throw new Error(`未实现接口方法 ${m}`)
				}
				if (methods[m].length>0) {
					obj[m] = function() {
						methods[m].apply(obj, arguments)
					}
				}else{
					obj[m] = () => methods[m].call(obj)
				}
			}else{
				if (methods[m].length != interfaces[m].length) {
					throw new Error(`接口方法 ${m} 参数数量不一致`)
				}
				if (methods[m].length>0) {
					obj[m] = function() {
						interfaces[m].apply(obj, arguments)
					}
				}else{
					obj[m] = () => interfaces[m].call(obj)
				}
			}
		}
	}
}

接下来，在一个文件mycat.js中继续编写代码，在使用的对象构造方法里，调用一下上面写的接口方法Interfaces.implement()就可，参考代码如下

import Cat from './cat.js';
//添加引用接口文件
import Interfaces from './interfaces.js';

export default class MyCat extends Cat {
	
	state = 1;
	
	constructor(){
		super('Tom');
		
		//抽象接口
		const inteface1 = {
			fun1(a,b){},
			fun2(){}
		};
		
		//实现接口 
		const inteface2 = {
			fun1 (a,b) {
				// console.log('fun1', this);
				console.log('fun1 args', { a, b });
				this.state++;
			},
			fun2 () {
				// 这里可以写自己的实现逻辑
				console.log('fun2 state', this.state);
			}
		};
		
		//调用一下 继承接口 同时 在运行时自检 若遇到错误 会输出 定位问题
		Interfaces.implement(this,inteface1,inteface2);
		
		// super.toLocation(2,3);
	}
}

最后，在页面加载的脚本中，开始写调用接口，参考代码如下

//导入引用文件
import MyCat from './mycat.js';

window.onload = () => {
	console.log('onload');
	
	//创建对象实例
	let cat = new MyCat();
	cat.call();
	
	//调用接口方法，运行无错误的话，执行正确 输出所有日志
	cat.fun1(1,2);
	
	cat.fun2();
	
	console.log('cat',cat)
}

• 浏览器 需要支持 JavaScript ES6 以上语法
• 接口代码中用到了JavaScript的Function.apply()和Function.call()，如不清楚其作用，点此前往了解，阅读中如有遇到什么问题，请在结尾评论处留言，ヾ(￣▽￣)Bye_Bye