关注前端 | 前端博客
当前位置: JavaScript > JavaScript设计模式之模板方法模式

JavaScript设计模式之模板方法模式

2018-07-15 分类:JavaScript 作者:管理员 阅读(67)

模板方法模式概念:

定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。

场景:

比如前端面试,基本包括笔试,技术面试,领导面试,HR面试等,但是每个公司的笔试题,技术面可能不一样,也可能一样,一样的就继承父类的方法,不一样的就重写父类的方法。

代码实现:

var Interview = function(){};  
// 笔试  
Interview.prototype.writtenTest = function(){  
    console.log("这里是前端笔试题");  
};  
// 技术面试  
Interview.prototype.technicalInterview = function(){  
    console.log("这里是技术面试");  
};   
// 领导面试  
Interview.prototype.leader = function(){  
    console.log("领导面试");  
};  
// 领导面试  
Interview.prototype.HR = function(){  
    console.log("HR面试");  
};  
// 等通知  
Interview.prototype.waitNotice = function(){  
    console.log("等通知啊,不知道过了没有哦");  
};  
// 代码初始化  
Interview.prototype.init = function(){  
    this.writtenTest();  
    this.technicalInterview();  
    this.leader();  
    this.HR();  
    this.waitNotice();  
};  
  
// 阿里巴巴的笔试和技术面不同,重写父类方法,其他继承父类方法。  
var AliInterview = function(){};  
AliInterview.prototype = new Interview();  
  
// 子类重写方法 实现自己的业务逻辑  
AliInterview.prototype.writtenTest = function(){  
    console.log("阿里的技术题就是难啊");  
}  
AliInterview.prototype.technicalInterview = function(){  
    console.log("阿里的技术面就是叼啊");  
}  
var AliInterview = new AliInterview();  
AliInterview.init();  
  
// 阿里的技术题就是难啊  
// 阿里的技术面就是叼啊  
// 领导面试  
// HR面试  
// 等通知啊,不知道过了没有哦 

从图中可以看到子类AliInterview最近的__proto__上的technicalInterview和writtenTest就是子类覆盖自定义的

再往上的__proto__的属性就是都是父类的属性,子类原型上有的属性就会优先执行子类原型上的方法

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - JavaScript设计模式之模板方法模式

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线