JS原型与继承操作示例


Posted in Javascript onMay 09, 2019

本文实例讲述了JS原型与继承操作。分享给大家供大家参考,具体如下:

<script>
var Beverage = function(){};
Beverage.prototype.boilWater = function(){
  console.log("把水煮沸");
};
Beverage.prototype.brew = function(){
  throw new Error("子类必须重写该方法");
};
Beverage.prototype.pourInCup = function(){
  throw new Error("子类必须重写该方法");
};
Beverage.prototype.addCondiments = function(){
  throw new Error("子类必须重写该方法");
};
Beverage.prototype.customerWantsCondiments = function(){
  return true;
};
Beverage.prototype.init = function(){
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments){
    this.addCondiments();
  }
};
var Coffee = function(){};
Coffee.prototype = new Beverage();//继承父类Beverage
Coffee.prototype.boilWater = function(){
  console.log("把水煮沸");
};
Coffee.prototype.brew = function(){
  console.log("用沸水冲泡咖啡");
};
Coffee.prototype.pourInCup = function(){
  console.log("把咖啡倒进杯子");
};
Coffee.prototype.addCondiments = function(){
  console.log("加糖和牛奶");
};
var Tea = function(){};
Tea.prototype = new Beverage();//继承父类Beverage
Tea.prototype.boilWater = function(){
  console.log("把水煮沸");
};
Tea.prototype.brew = function(){
  console.log("用沸水浸泡茶叶");
};
Tea.prototype.pourInCup = function(){
  console.log("把茶水倒进杯子");
};
Tea.prototype.addCondiments = function(){
  console.log("加入柠檬");
};
Tea.prototype.customerWantsCondiments = function(){
  return window.confirm("请问需要加调料吗?");
};
var coffee = new Coffee();//实例化Coffee
coffee.init();
var tea = new Tea();//实例化Tea
tea.init();
</script>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行结果如下:

JS原型与继承操作示例

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jquery+json实现分页效果
Mar 07 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
详解JavaScript的BUG和错误
May 07 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
详解微信小程序回到顶部的两种方式
May 09 #Javascript
jquery登录的异步验证操作示例
May 09 #jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 #Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 #Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 #Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 #Javascript
详解es6新增数组方法简便了哪些操作
May 09 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP图片加水印实现方法
2016/05/06 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
npm ci命令的基本使用方法
2020/09/20 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
通用C#笔试题附答案
2016/11/26 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
教师队伍管理制度
2014/01/14 职场文书
终止合同协议书
2014/04/17 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
mysql left join快速转inner join的过程
2021/06/30 MySQL
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android