1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.      </head>
  7.      <body>
  8.          <h1>结算程序</h1>
  9.          <p>
  10.              <input type="text" placeholder="原价" id="money" />
  11.          </p>
  12.          <p>
  13.              <select id="level">
  14.                  <option value="0">普通顾客</option>
  15.                  <option value="1">VIP会员</option>
  16.                  <option value="2">金卡会员</option>
  17.                  <option value="3">砖石会员</option>
  18.              </select>
  19.          </p>
  20.          <p>
  21.              <input type="button"id="btn" value="结算" />
  22.          </p>
  23.          <p id="result"></p>
  24.          <script src="test_4es5.js" type="text/javascript" charset="utf-8"></script>
  25.      </body>
  26.  </html>

原型定义对象的方式缺点是较为麻烦，但是好处是创建对象里面不包括变量和方法的声明

原型定义的对象创建的速度快，占用内存小，推荐使用

  1.  function Calculator() {
  2.  
  3.  }
  4.  Calculator.prototype.money = null;
  5.  Calculator.prototype.level = null;
  6.  Calculator.prototype.pay = function() {
  7.      if(this.level == 0) {
  8.          return this.money;
  9.      } else if(this.level == 1) {
  10.          return `${this.money * 0.96}元`;
  11.      } else if(this.level == 2) {
  12.          return this.money * 0.92;
  13.      } else if(this.level == 3) {
  14.          return this.money * 0.85;
  15.      } else {
  16.          throw "会员等级错误";
  17.      }
  18.  }
  19.  
  20.  function DoubleElevenCalculator() {
  21.  
  22.  };
  23.  DoubleElevenCalculator.prototype = new Calculator();
  24.  DoubleElevenCalculator.prototype.pay = function() {
  25.      if(this.level == 0) {
  26.          var num = Math.floor(this.money / 200);
  27.          return `实际需支付${this.money}元,赠送${num}张50元代金券`;
  28.      } else if(this.level == 1) {
  29.          var num = Math.floor(this.money / 500);
  30.          return `实际需支付${this.money*0.9}元,赠送${num}张100元餐券`
  31.      } else if(this.level == 2) {
  32.          var num = Math.floor(this.money / 300);
  33.          return `实际需支付${this.money*0.85}元,赠送${num}张100元代金券`;
  34.      } else if(this.level == 3) {
  35.          var num = Math.floor(this.money / 200);
  36.          return `实际需支付${this.money*0.8}元,赠送${num}张100元代金券`;
  37.      } else {
  38.          throw "会员等级错误";
  39.      }
  40.  }
  41.  
  42.  var btn = document.querySelector("#btn");
  43.  btn.addEventListener("click", function() {
  44.      //var calculator = new Calculator();
  45.      var calculator = new DoubleElevenCalculator();
  46.      calculator.money = document.querySelector("#money").value;
  47.      var money = new Number(money);
  48.      calculator.level = document.querySelector("#level").value;
  49.      var level = new Number(level);
  50.      var temp = calculator.pay();
  51.      document.querySelector("#result").innerHTML = temp;
  52.  
  53.  });
  1.  
  1.  /*
  2.   * 发法一new Object()
  3.   * 对象只能调用一次，不能重复利用，也不能被继承
  4.   */
  5.  
  6.  /*
  7.  var plane = new Object();
  8.  plane.speed=800;
  9.  plane.fly=function(){
  10.      console.log("飞行速度"+this.speed);
  11.  }
  12.  plane.fly();
  13.  */
  14.  
  15.  /*
  16.   * 方法二json
  17.   */
  18.  /*
  19.   var plane={
  20.      speed:800,
  21.      fly:function(){
  22.          console.log("飞行速度"+this.speed);
  23.      }
  24.  }
  25.  plane.fly();
  26.   */
  27.  
  28.  /*
  29.   * 方法3函数模拟类
  30.   * 不能继承
  31.   */
  32.  /*
  33.  function Plane(){
  34.      this.speed=800;
  35.      this.fly=function(){
  36.          console.log("飞行速度"+this.speed);
  37.      }
  38.  }
  39.  var plane =new Plane();
  40.  plane.fly();
  41.  */
  42.  
  43.  /*
  44.   * 方法4    最好
  45.   */
  46.  function Plane() {
  47.  
  48.  }
  49.  Plane.prototype.speed = null;
  50.  Plane.prototype.fly = function() {
  51.      console.log("飞行速度" + this.speed);
  52.  }
  53.  var plane = new Plane();
  54.  plane.speed = 800;
  55.  plane.fly();
  56.  
  57.  function FightPlane() {
  58.  
  59.  }
  60.  FightPlane.prototype = new Plane(); //继承父类prototype所有的内容
  61.  FightPlane.prototype.fly = function() {
  62.      console.log("战斗机飞行速度" + this.speed)
  63.  }
  64.  plane = new FightPlane();
  65.  plane.speed = 2000;
  66.  plane.fly();

JS5模拟类的更多相关文章

  1. js模拟类

    ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类. js中的类,既是重点,也是难点,很多时候都感觉模棱两可. 首先强调一下js中很重要的3个知识点:thi ...

  2. JavaScript 高级篇之闭包、模拟类,继承（五）

    本篇主要分享我对闭包的理解及使用闭包完成私有属性.模拟类.继承等,结合大量例子,希望大家能快速掌握!首先让我们先从一些基本的术语开始吧     一.javascript中的闭包 1.我们一起先来理解什 ...

  3. poj1068解题报告（模拟类）

    POJ 1068,题目链接http://poj.org/problem?id=1068 题意: 对于给出给出的原括号串S,对应两种数字密码串P.W: S         (((()()()))) P- ...

  4. 在 JavaScript 中使用构造器函数模拟类

    今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统 ...

  5. 【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态

    一.简介 Lua是一门非常强大.非常灵活的脚本语言,自它从发明以来,无数的游戏使用了Lua作为开发语言.但是作为一款脚本语言,Lua也有着自己的不足,那就是它本身并没有提供面向对象的特性,而游戏开发是 ...

  6. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  7. [LeetCode] 数学计算模拟类问题：加法，除法和幂，注意越界问题。题 剑指Offer，Pow(x, n) ，Divide Two Integers

    引言 数学计算的模拟类题目,往往是要求实现某种计算(比如两数相除),实现的过程中会有所限定,比如不允许乘法等等. 这类题目首先要注意计算过程中本身的特殊情况.比如求相除,则必须首先反映过来除数不能为0 ...

  8. 【转载】【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态

    [游戏开发]在Lua中实现面向对象特性——模拟类.继承.多态   阅读目录 一.简介 二.前提知识 三.Lua中实现类.继承.多态 四.总结 回到顶部 一.简介 Lua是一门非常强大.非常灵活的脚本语 ...

  9. javascript模拟类的最佳实践

    1:怎样模拟一个类 在sencha touch2 系列里面定义一个类和new出这个类的对象 Ext.define( "Animal", { config: { name: null ...

随机推荐

  1. 51nod 1270 数组的最大代价 思路：简单动态规划

    这题是看起来很复杂,但是换个思路就简单了的题目. 首先每个点要么取b[i],要么取1,因为取中间值毫无意义,不能增加最大代价S. 用一个二维数组做动态规划就很简单了. dp[i][0]表示第i个点取1 ...

  2. JS数字金额转换为货币汉字形式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  3. Online Bayesian Probit Regression介绍之Factor Graph

    下面就开始讲讲概率图中的Factor Graph.概率图博大精深,非我等鼠辈能够完全掌握,我只是通过研究一些通用的模型,对概率图了解了一点皮毛.其实我只是从概率这头神兽身上盲人摸象地抓掉几根毛,我打算 ...

  4. 决策树模型组合之随机森林与GBDT

    版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...

  5. R语言包下载（转载）

    http://blog.csdn.net/hongjinlongno1/article/details/53130893 包含几乎所有包,很方便

  6. Elasticsearch 数据搜索

    ES即简单又复杂,你可以快速的实现全文检索,又需要了解复杂的REST API.本篇就通过一些简单的搜索命令,帮助你理解ES的相关应用.虽然不能让你理解ES的原理设计,但是可以帮助你理解ES,探寻更多的 ...

  7. java 学习笔记——类之间的关系之封装、继承与多态的详解

    封装 一个封装的简单例子 封装就是把对象的属性(状态)和方法(行为)结合在一起,并尽可能隐蔽对象的内部细节,成为一个不可分割的独立单位(即对象),对外形成一个边界,只保留有限的对外接口使之与外部发生联 ...

  8. TargetType Mismatch

    TargetType Mismatch 环境:windowsphone 8,silerlight toolkit, 页面报TargeType Mismatch错误或者 length 0,是因为Syst ...

  9. ViewData 不可以有特殊字符，比如. ,等只允许数字字符和空格

    ViewData 不可以有特殊字符,比如. ,等只允许数字字符和空格

  10. Spring ——简介及环境搭建跑通Hello

    Spring Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.是为了解决企业应用程序开发复杂性而创建的.框架的主要优 ...