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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
详解微信小程序回到顶部的两种方式
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初学者的8点有效建议
2010/11/20 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php伪静态之APACHE篇
2014/06/02 PHP
PHP异常处理浅析
2015/05/12 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
axios取消请求的实践记录分享
2018/09/26 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
求职信格式范本
2013/11/15 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
文体活动实施方案
2014/03/27 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
学生吸烟检讨书
2014/09/14 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
大学生团员个人总结
2015/02/14 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书