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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
Vue Router的手写实现方法实现
Mar 02 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
PHP聊天室技术
2006/10/09 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP发送短信代码分享
2015/08/11 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
村委会主任先进事迹
2014/01/15 职场文书
安全资金保障制度
2014/01/23 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
工作检讨书500字
2014/10/19 职场文书
2014年个人总结范文
2015/03/09 职场文书
通知的写法
2015/04/23 职场文书
处罚决定书范文
2015/06/24 职场文书
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis