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的闭包
Dec 31 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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提取字符串中网站url地址的方法
2014/12/03 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
zend framework重定向方法小结
2016/05/28 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
js实现圆盘记速表
2015/08/03 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
个人贷款承诺书
2014/03/28 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
企业文化口号
2014/06/12 职场文书
学校工会工作总结2015
2015/05/19 职场文书
追悼会答谢词范文
2015/09/29 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers
git stash(储藏)的用法总结
2022/06/25 Servers