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 * 方法二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();