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 相关文章推荐
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
jquery事件与绑定事件
Mar 16 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
使用 JavaScript 制作页面效果
Apr 21 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/12/06 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
js实现圆盘记速表
2015/08/03 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
Python学习教程之常用的内置函数大全
2017/07/14 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python numpy 按行归一化的实例
2019/01/21 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
经典c++面试题三
2015/07/08 面试题
大专学生推荐信范文
2013/11/19 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
洗发水广告词
2014/03/13 职场文书
个人合作协议书范本
2014/04/18 职场文书
2015年档案室工作总结
2015/05/23 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Python学习之包与模块详解
2022/03/19 Python