JS子类继承父类，父类自动管理子类实例
Posted HiveDark
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS子类继承父类，父类自动管理子类实例相关的知识，希望对你有一定的参考价值。
一、综述
有时候业务需要自动识别满足一定规则下的所有的子类，并且根据指定标识分发业务数据到子类处理。类似于Java中的面向接口编程，便于业务的扩展和维护。在js中该如何处理呢？如果你也有这样的需求，可参考这种处理方式。
二、开发环境
- 开发语言：html、js
- 编辑器：sublime text
三、源码解析
1. 定义接口
- 定义父类EventHandler接口，唯一参数eventId（事件ID）。
- 定义父类注册函数registHandler，可用于子类自定主动发起注册，注册时调用EventHandler的静态方法registHandler注册子类实例。
- 定义子类业务处理方法接口，dealEvent方法，用于业务处理相关事件。
- 在子类实例化的时候会调用父类的方法，自动触发注册当前子类实例。
- 若来新的事件需要分发子类处理时，直接调用EventHandler.dealEvents方法即可，参数可以是数组或者单个事件。
//定义父类
function EventHandler(eventId)
//事件ID
this.eventId = eventId;
//注册Handler
this.registHandler = function()
EventHandler.registHandler(this);
//处理事件
this.dealEvent = function(event)
//触发注册
this.registHandler.call(this);
//静态定义功能注册方法
EventHandler.registHandler = function(newInstance)
console.log("registHandler",newInstance);
if(!EventHandler.allHandlers)
EventHandler.allHandlers = [];
EventHandler.allHandlers.push(newInstance);
;
//Trigger Event，分发
EventHandler.dealEvents = function(events)
if(events instanceof Array)
//分发事件集合
events.forEach(function(event, index, array)
EventHandler.allHandlers.forEach(function(handler)
try
handler.dealEvent.call(handler,event);
catch(e)
console.error(e);
);
);
else
EventHandler.allHandlers.forEach(function(handler)
try
handler.dealEvent.call(handler,events);
catch(e)
console.error(e);
);
2. 创建EventHandler子类
创建子类时需要继承父类，js继承的方式有多种，不在此处说明。此处使用的是EventHandler.call(this,this.eventId)即可。
- 第一个参数this，表示调用方法时该方法的作用域范围。
- 第二个参数是父类的方法参数。
a. SOS子类DEMO
//定义子类事件处理函数
function SOSHandler()
this.eventId = "110";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event)
console.log("SOS dealEvent",event,this);
b.Overspeed子类DEMO
function OverspeedHandler()
this.eventId = "666";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event)
console.log("Overspeed dealEvent",event,this);
3. 运行测试
a. 测试源码
//DEMO
var sosHandler = new SOSHandler();
var overspeedHandler = new OverspeedHandler();
var overspeedHandler2 = new OverspeedHandler();
console.log(EventHandler,sosHandler,overspeedHandler,overspeedHandler2);
console.log("allHandlers",EventHandler.allHandlers);
//触发事件处理
EventHandler.dealEvents(["sos","Overspeed"]);
b.浏览器运行结果
四、完整源码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//定义父类
function EventHandler(eventId)
//事件ID
this.eventId = eventId;
//注册Handler
this.registHandler = function()
EventHandler.registHandler(this);
//处理事件
this.dealEvent = function(event)
//触发注册
this.registHandler.call(this);
//静态定义功能注册方法
EventHandler.registHandler = function(newInstance)
console.log("registHandler",newInstance);
if(!EventHandler.allHandlers)
EventHandler.allHandlers = [];
EventHandler.allHandlers.push(newInstance);
;
//Trigger Event，分发
EventHandler.dealEvents = function(events)
if(events instanceof Array)
//分发事件集合
events.forEach(function(event, index, array)
EventHandler.allHandlers.forEach(function(handler)
try
handler.dealEvent.call(handler,event);
catch(e)
console.error(e);
);
);
else
EventHandler.allHandlers.forEach(function(handler)
try
handler.dealEvent.call(handler,events);
catch(e)
console.error(e);
);
//定义子类事件处理函数
function SOSHandler()
this.eventId = "110";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event)
console.log("SOS dealEvent",event,this);
function OverspeedHandler()
this.eventId = "666";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event)
console.log("Overspeed dealEvent",event,this);
//DEMO
var sosHandler = new SOSHandler();
var overspeedHandler = new OverspeedHandler();
var overspeedHandler2 = new OverspeedHandler();
console.log(EventHandler,sosHandler,overspeedHandler,overspeedHandler2);
console.log("allHandlers",EventHandler.allHandlers);
//触发事件处理
EventHandler.dealEvents(["sos","Overspeed"]);
</script>
</body>
</html>
五、总结
本文以一个小的demo实现业务需求处理的业务设计源码，便于扩展和维护。
以上是关于JS子类继承父类，父类自动管理子类实例的主要内容，如果未能解决你的问题，请参考以下文章