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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
详解微信小程序回到顶部的两种方式
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获取随机数组列表的方法
2014/11/13 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python检测IP地址变化并触发事件
2018/12/26 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
django 类视图的使用方法详解
2019/07/24 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
自主招生自荐书
2013/11/29 职场文书
教师节促销活动方案
2014/02/14 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
地心历险记观后感
2015/06/15 职场文书
2016年端午节寄语
2015/12/04 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Python中time标准库的使用教程
2022/04/13 Python