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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
深入理解vue路由的使用
Mar 24 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
详解微信小程序回到顶部的两种方式
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(8) php 数组
2010/03/05 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python中偏函数用法示例
2018/06/07 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python实现查找所有程序的安装信息
2020/02/18 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
详解python变量与数据类型
2020/08/25 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
奉献演讲稿范文
2014/05/21 职场文书
机关作风建设整改方案
2014/10/27 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016年母亲节寄语
2015/12/04 职场文书
MySQL基础(二)
2021/04/05 MySQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript