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 ui css framework
Jun 28 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP排序算法类实例
2015/06/17 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
文字幻灯片
2006/06/26 Javascript
农历与西历对照
2006/09/06 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python dataframe NaN处理方式
2019/12/26 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
win10安装python3.6的常见问题
2020/07/01 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
初中生自我鉴定
2014/02/04 职场文书
运动会入场式解说词
2014/02/18 职场文书
安全责任协议书
2014/04/21 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书