JS5模拟类

Posted 2020-10-13 刘选航

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS5模拟类相关的知识，希望对你有一定的参考价值。

 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();

以上是关于JS5模拟类的主要内容，如果未能解决你的问题，请参考以下文章