JS原型与继承操作示例

 更新时间:2019年05月09日 11:29:26   作者:Yxh_blogs  
这篇文章主要介绍了JS原型与继承操作,涉及javascript面向对象程序设计中原形与继承的相关定义、实例化操作技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试运行结果如下:

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • js实现随机点名系统(实例讲解)

    js实现随机点名系统(实例讲解)

    下面小编就为大家带来一篇js实现随机点名系统(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 利用原生JavaScript实现造日历轮子实例代码

    利用原生JavaScript实现造日历轮子实例代码

    这篇文章主要给大家介绍了关于如何利用原生JavaScript实现造日历轮子的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js工具方法弹出蒙版

    js工具方法弹出蒙版

    js工具方法弹出蒙版,需要的朋友可以参考一下
    2013-05-05
  • JavaScript判断是否手机浏览器的五种方法

    JavaScript判断是否手机浏览器的五种方法

    现在手机网站已经很普及了,有时候前端网页需要判断,用户使用的是手机浏览器还是电脑浏览器。这篇文章整理了JavaScript判断是否手机浏览器的五种方法,通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
    2022-11-11
  • JavaScript 实现的checkbox经典实例分享

    JavaScript 实现的checkbox经典实例分享

    本文主要给大家分享的是JavaScript实现checkbox多项选择的经典代码,非常的简单实用,有需要的小伙伴可以参考下
    2016-10-10
  • 详解如何在JavaScript中创建线性仪表图

    详解如何在JavaScript中创建线性仪表图

    线性仪表图表示显示所需值的垂直或水平线性刻度,带有颜色刻度以及单个或多个指针。本文将详细讲解如何利用JavaScript创建线性仪表图,需要的可以参考一下
    2022-03-03
  • 如何写JS数组sort的比较函数

    如何写JS数组sort的比较函数

    我们知道,数组的sort方法可以对数组元素进行排序,默认是按ASCII字母表顺序排序。如果要根据其他的顺序排序就需要为sort方法提供一个比较函数作为参数。这里讲的就是如何写这个比较函数。
    2010-07-07
  • 一次记住JavaScript的6个正则表达式方法

    一次记住JavaScript的6个正则表达式方法

    这篇文章主要介绍了一次记住JavaScript的6个正则表达式方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • JS图片无缝、平滑滚动代码

    JS图片无缝、平滑滚动代码

    这篇文章主要介绍了JS图片无缝、平滑滚动的实现,需要的朋友可以参考下
    2014-03-03
  • JS模拟并美化的表单控件完整实例

    JS模拟并美化的表单控件完整实例

    这篇文章主要介绍了JS模拟并美化的表单控件实现方法,涉及javascript结合css样式美化表单的功能,非常美观实用,需要的朋友可以参考下
    2015-08-08

最新评论