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 callBack 返回前一页的js方法
Nov 30 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
js的延迟执行问题分析
Jun 23 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
原生js实现分页效果
Sep 23 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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程序的php代码
2008/04/07 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
php引用传值实例详解学习
2013/11/06 PHP
php-fpm中max_children的配置
2019/03/15 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
对numpy中轴与维度的理解
2018/04/18 Python
Python面向对象类的继承实例详解
2018/06/27 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python实现静态服务器
2019/09/05 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
个人自我鉴定写法
2013/11/30 职场文书
医学生求职信
2014/07/01 职场文书
股东授权委托书范文
2014/09/13 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
长江七号观后感
2015/06/11 职场文书
宾馆客房管理制度
2015/08/06 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL