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 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 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
德生PL330测评
2021/03/02 无线电
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python File readlines() 使用方法
2018/03/19 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python之yield和Generator深入解析
2019/09/18 Python
"引用"与指针的区别是什么
2016/09/07 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
《荷花》教学反思
2014/04/16 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
毕业答辩开场白范文
2015/05/27 职场文书