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的一个图片hover的插件
Apr 24 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php中的三元运算符使用说明
2011/07/03 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
自己使用总结Python程序代码片段
2015/06/02 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
装饰公司活动策划方案
2014/08/23 职场文书
读群众路线的心得体会
2014/09/03 职场文书
2014年医药代表工作总结
2014/11/22 职场文书