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 /* 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 ?* 方法二json17 ?*/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模拟类
原文地址：http://www.cnblogs.com/liuxuanhang/p/7800960.html