JS5模拟类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>结算程序</h1>
<p>
<input type="text" placeholder="原价" id="money" />
</p>
<p>
<select id="level">
<option value="0">普通顾客</option>
<option value="1">VIP会员</option>
<option value="2">金卡会员</option>
<option value="3">砖石会员</option>
</select>
</p>
<p>
<input type="button"id="btn" value="结算" />
</p>
<p id="result"></p>
<script src="test_4es5.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
原型定义对象的方式缺点是较为麻烦，但是好处是创建对象里面不包括变量和方法的声明
原型定义的对象创建的速度快，占用内存小，推荐使用
function Calculator() {
}
Calculator.prototype.money = null;
Calculator.prototype.level = null;
Calculator.prototype.pay = function() {
if(this.level == 0) {
return this.money;
} else if(this.level == 1) {
return `${this.money * 0.96}元`;
} else if(this.level == 2) {
return this.money * 0.92;
} else if(this.level == 3) {
return this.money * 0.85;
} else {
throw "会员等级错误";
}
}
function DoubleElevenCalculator() {
};
DoubleElevenCalculator.prototype = new Calculator();
DoubleElevenCalculator.prototype.pay = function() {
if(this.level == 0) {
var num = Math.floor(this.money / 200);
return `实际需支付${this.money}元,赠送${num}张50元代金券`;
} else if(this.level == 1) {
var num = Math.floor(this.money / 500);
return `实际需支付${this.money*0.9}元,赠送${num}张100元餐券`
} else if(this.level == 2) {
var num = Math.floor(this.money / 300);
return `实际需支付${this.money*0.85}元,赠送${num}张100元代金券`;
} else if(this.level == 3) {
var num = Math.floor(this.money / 200);
return `实际需支付${this.money*0.8}元,赠送${num}张100元代金券`;
} else {
throw "会员等级错误";
}
}
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
//var calculator = new Calculator();
var calculator = new DoubleElevenCalculator();
calculator.money = document.querySelector("#money").value;
var money = new Number(money);
calculator.level = document.querySelector("#level").value;
var level = new Number(level);
var temp = calculator.pay();
document.querySelector("#result").innerHTML = temp;
});
/*
* 发法一new Object()
* 对象只能调用一次，不能重复利用，也不能被继承
*/ /*
var plane = new Object();
plane.speed=800;
plane.fly=function(){
console.log("飞行速度"+this.speed);
}
plane.fly();
*/ /*
* 方法二json
*/
/*
var plane={
speed:800,
fly:function(){
console.log("飞行速度"+this.speed);
}
}
plane.fly();
*/ /*
* 方法3函数模拟类
* 不能继承
*/
/*
function Plane(){
this.speed=800;
this.fly=function(){
console.log("飞行速度"+this.speed);
}
}
var plane =new Plane();
plane.fly();
*/ /*
* 方法4 最好
*/
function Plane() { }
Plane.prototype.speed = null;
Plane.prototype.fly = function() {
console.log("飞行速度" + this.speed);
}
var plane = new Plane();
plane.speed = 800;
plane.fly(); function FightPlane() { }
FightPlane.prototype = new Plane(); //继承父类prototype所有的内容
FightPlane.prototype.fly = function() {
console.log("战斗机飞行速度" + this.speed)
}
plane = new FightPlane();
plane.speed = 2000;
plane.fly();
JS5模拟类的更多相关文章
- js模拟类
ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类. js中的类,既是重点,也是难点,很多时候都感觉模棱两可. 首先强调一下js中很重要的3个知识点:thi ...
- JavaScript 高级篇之闭包、模拟类,继承（五）
本篇主要分享我对闭包的理解及使用闭包完成私有属性.模拟类.继承等,结合大量例子,希望大家能快速掌握!首先让我们先从一些基本的术语开始吧 一.javascript中的闭包 1.我们一起先来理解什 ...
- poj1068解题报告（模拟类）
POJ 1068,题目链接http://poj.org/problem?id=1068 题意: 对于给出给出的原括号串S,对应两种数字密码串P.W: S (((()()()))) P- ...
- 在 JavaScript 中使用构造器函数模拟类
今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统 ...
- 【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态
一.简介 Lua是一门非常强大.非常灵活的脚本语言,自它从发明以来,无数的游戏使用了Lua作为开发语言.但是作为一款脚本语言,Lua也有着自己的不足,那就是它本身并没有提供面向对象的特性,而游戏开发是 ...
- [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】
[原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言 最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...
- [LeetCode] 数学计算模拟类问题：加法，除法和幂，注意越界问题。题 剑指Offer，Pow(x, n) ，Divide Two Integers
引言 数学计算的模拟类题目,往往是要求实现某种计算(比如两数相除),实现的过程中会有所限定,比如不允许乘法等等. 这类题目首先要注意计算过程中本身的特殊情况.比如求相除,则必须首先反映过来除数不能为0 ...
- 【转载】【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态
[游戏开发]在Lua中实现面向对象特性——模拟类.继承.多态 阅读目录 一.简介 二.前提知识 三.Lua中实现类.继承.多态 四.总结 回到顶部 一.简介 Lua是一门非常强大.非常灵活的脚本语 ...
- javascript模拟类的最佳实践
1:怎样模拟一个类 在sencha touch2 系列里面定义一个类和new出这个类的对象 Ext.define( "Animal", { config: { name: null ...
随机推荐
- struts2一个和多个文件上传及下载
struts2的文件上传相比我们自己利用第三方jar包(commons-fileupload-1.2.1.jar commons-io-1.3.2.jar )要简单的多,当然struts2里面也是 ...
- es6函数的rest参数和拓展运算符(...)的解析
es6的新特性对函数的功能新增加了rest参数和...的拓展运算符.这是两个什么东西呢? 先来看一个问题:如何获取一个函数除了定义的参数之外的其他参数?传统的做法是借助函数的arguments关键字来 ...
- JavaWeb（三）JSP概述
一.JSP概述 1.1.JSP简介 一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束.JSP是一种Java servlet,主要用于实现 ...
- 我的第一个python web开发框架（4）——数据库结构设计与创建
小白做好前端html设计后,马上开始进入数据库结构设计步骤. 在开始之前,小白回忆了一下老大在公司里培训时讲过的数据库设计解说: 对于初学者来说,很多拿到原型时不知道怎么设计数据表结构,这是很正常的事 ...
- php使用PHPMailer邮件类发送邮件
PHPMailer是一个用于发送电子邮件的PHP函数包.它提供的功能包括:*.在发送邮时指定多个收件人,抄送地址,暗送地址和回复地址*.支持多种邮件编码包括:8bit,base64,binary和qu ...
- 从实践的角度理解cookie的几个属性
cookie的处理流程大致分为以下几步: 1.浏览器初次请求服务器. 2.服务器认为有必要设置cookie,通过响应报文首部:Set-Cookie告知浏览器,cookie的内容. 3.浏览器本地保存( ...
- KMP算法的细节问题
preface: 想必,很多人都知道D.E.Knuth与V.R.Pratt和J.H.Morris同时提出所谓的狂拽酷炫屌炸天的KMP算法,在对字符串的匹配(或是字符串的查找)方面表现出比较好的效率,该 ...
- Linux Redis集群搭建与集群客户端实现(Python)
硬件环境 本文适用的硬件环境如下 Linux版本:CentOS release 6.7 (Final) Redis版本: Redis已经成功安装,安装路径为/home/idata/yangfan/lo ...
- 点击jsp页面上的超链接后怎么找到对应的servlet
首先超链接是一个像是url一部分的东西,其实不追求深入的道理可以联想到web.xml中的一个<url-pattern>,其实它俩也的确是对应关系,然后<url-pattern> ...
- UWP取出图片主色调
一切都要从风车动漫的新详情页说起... 当我最初拿到风车动漫新详情页的UI设计概念图时,新详情页中有两点: 1.图片的高斯模糊 2.取出图片的主色调(主要用于tag和相关动漫的标题背景) 大概就是要这 ...