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 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
最简单的tab切换实例代码
May 13 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue中touch和click共存的解决方式
Jul 28 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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
Ionic快速安装教程
2016/06/03 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
SVG描边动画
2017/02/23 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python内置函数delattr的具体用法
2017/11/23 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python中return如何写
2020/06/18 Python
python文件读取失败怎么处理
2020/06/23 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
网络技术支持面试题
2013/04/22 面试题
计算机专业大学生的自我评价
2013/11/14 职场文书
老龄工作先进事迹
2014/08/15 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
劳保用品管理制度范本
2015/08/06 职场文书