| “基于原型（prototype）”的弱类型语言 | “基于类（class）型”的强类型语言 |
| 没有严格的“类”的概念，所有的对象全部是实例 | 通过类型创建实例，类型与实例是不同的实体 |
| 通过创建函数定义类，利用“new”关键字调用函数构造方法实例化对象 | 必须定义类型，然后利用“new”关键字调用类型的构造方法实例化对象 |
| 通过共享或复制原型（prototype）对象定义对象之间的层次结构，因此类型成员基于“原型链”继承 | 对象之间的层次结构通过类之间的层次结构定义，因此类型成员基于“类型链”继承 |
| 可以利用原型（prototype）对象在运行时为一个或所有对象动态的添加、修改或删除成员定义 | 类型创建后便不能更改，不能在运行时为类型添加或修改成员的定义 |
做了一个实例效果如下
页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在线购物系统</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/jsOnlineShop.css" />
<script language="javascript" src="js/OnlineShop.js"></script>
</head>
<body>
<div id="containerDiv">
<div id="barDiv">
<img src="imgs/titlebar.png" />
</div>
<div id="middleDiv">
<div id="searchDiv">
<select id="typeSelect">
<option>所有分类</option>
<option>图书</option>
</select>
<input id="titleTxt" type="text" />
<img src="imgs/search.gif" onclick="searches();"/>
</div>
<div id="userInfoDiv">
您好,<span id="userSpan">游客</span>
</div>
<div id="cartInfoDiv">
<span id="cartInfoDiv">
当前<img src="imgs/cart.gif" title="查看购物车" />
共有
<span id="cartProductsAmountSpan">0</span>
件商品
</span>
</div>
<div id="tradeHisDiv">
<img src="imgs/history.png" title="浏览历史交易" />
历史交易记录
</div>
</div>
<div id="mainDiv">
<div id="productsDiv"></div>
</div>
<div id="bottomDiv">
<a href="#">公司简介</a>
|
<a href="#">诚聘英才</a>.
|
<a href="#">网站加盟</a>
|
<a href="#">百货招商</a>
|
<a href="#">交易条款</a>
</div>
</div>
</body>
</html>
js代码
// JavaScript Document
// JavaScript Document
function Book(){
var prodId = null; // 商品编号
var prodType = null; // 商品 类型
var prodName = null; // 商品名称
var prodPirce = null; // 商品价格
var prodBrefInfo = null; // 商品简介
var prodCount = null; //商品数量
var prodImagePath = null; // 商品图片 路径
var pulibsher = null; // 出版商
var publicshDate = null; // 出版日期
var authors = null; // 书籍 作者
// 创建 public 的 setter and getter mehtods
this.setPordId = function(pId){
prodId = pId;
};
this.getPordId = function(){
return prodId;
};
this.setProdType = function(type){
prodType = type;
};
this.getProdType = function(){
return prodType;
};
this.setProdName = function(name){
prodName = name;
};
this.getProdName = function(){
return prodName;
};
this.setProdPirce = function(price){
prodPirce = price;
};
this.getProdPirce = function(){
return prodPirce;
};
this.setProdBrefInfo = function(info){
prodBrefInfo = info;
};
this.getProdBrefInfo = function(){
return prodBrefInfo;
};
this.setProdCount = function(count){
prodCount = count;
};
this.getProdCount = function(){
return prodCount;
};
this.setProdImagePath = function(images){
prodImagePath = images;
};
this.getProdImagePath = function(){
return prodImagePath;
};
this.setPulibsher = function(her){
pulibsher = her;
};
this.getPulibsher = function(){
return pulibsher;
};
this.setPublicshDate = function(date){
publicshDate = date;
};
this.getPublicshDate = function(){
return publicshDate;
};
this.setAuthors = function(author){
authors = author;
};
this.getAuthors = function(){
return authors;
};
}
// 以上 为book 创建了共有的属性方法
// 用静态 方法来实例会 Book
Book.getInstance = function(id,type,name,price,info,count,
image,her,dates,author){
var book = new Book();
book.setPordId(id);
book.setProdType(type);
book.setProdName(name);
book.setProdPirce(price);
book.setProdBrefInfo(info);
book.setProdCount(count);
book.setProdImagePath(image);
book.setPulibsher(her);
book.setPublicshDate(dates);
book.setAuthors(author);
return book;
};
//定义 保存书籍的数组 ，用来保存 书籍的商品
var productsArr = new Array(
//Product1
Book.getInstance("001","图书","Java编程思想（第4版）","99.00",
"本书赢得了全球程序员的广泛赞誉，即使是最晦涩的概念，"
+ "在Bruce Eckel的文字亲和力和小而直接的编程示例面前也会化解于无形。"
+ "从Java的基础语法到最高级特性（深入的面向对象概念、"
+ "多线程、自动项目构建、单元测试和调",
100,"thinkInJava.jpg","机械工业出版社","2007年06月","（美）埃克尔 著，陈昊鹏 译 "),
//Product2
Book.getInstance("002","图书","Java核心技术：卷Ⅰ基础知识","73.30",
"《Java核心技术》出版以来一直畅销不衰，深受读者青睐，"
+ "每个新版本都尽可能快地跟上Java开发工具箱发展的步伐，"
+ "而且每一版都重新改写了部分内容，以便适应Java的最新特性。"
+ "本版也不例外，它反映了Java SE 6的新特性。全书共14章，包括"
+ "Java基本的程序结构、对象与类、继承、接口与内部类、"
+ "图形程序设计、事件处理、Swing用户界面组件、部署应用程序和Applet、"
+ "异常日志断言和调试、泛型程序设计、集合以及多线程等内容。"
+ "全书对Java技术的阐述精确到位，叙述方式深入浅出，并包含大量示例，"
+ "从而帮助读者充分理解Java语言以及Java类库的相关特性。",
75,"corejava1.jpg","机械工业出版社","2008年06月",
"（美）昊斯特曼 著，叶乃文，邝劲筠，杜永萍 译"),
//Product3
Book.getInstance("003","食品","浙新牌明前一级碧螺春","78.00",
"天然、健康、品味生活 “浙新”牌系列茶叶于1999年被评为北京市“双保可信商品”，"
+ "2001年获得国家内贸局“中国放心饮品推荐品牌”，2002年获北京市第二届绿茶节“优质奖”，"
+ "2004年公司通过ISO9001：2000质量体系认证，2006年3月公司生产基地通过QS认证，"
+ "被授予“浙江省示范茶厂”。基地生产的“江南大佛龙”牌龙井荣获"
+ "“2006北马连道第六届茶叶节暨浙江绿茶博览会金奖”、“2006年第十三届上海国际茶文化节金奖”，"
+ "2007年通过QS北京分装认证，同年被评为北京马连道十强品牌茶企业。",
30,"blc.jpg","江苏","2008年7月","18个月","150g"),
//Product4
Book.getInstance("004","食品","雀巢奶茶香浓原味","11.80",
"雀巢拥有世界知名的系列饮品，包括巧克力麦芽营养饮品以及果味茶饮品。"
+ "在中国，雀巢除了引进世界知名品牌和雀巢冰爽茶、雀巢巧伴伴、雀巢美禄之外，"
+ "还特别为中国消费者推出添加了维生素的固体饮料以满足其口味需求。 "
+ "雀巢奶茶，精心搭配牛奶和上等红茶，香浓而不涩的口味，如牛奶般幼滑细腻、"
+ "醇香厚滑的口感让你品味美好生活。",
200,"qcnc.jpg","上海","2009年4月","2年","150g"),
//Product5
Book.getInstance("005","图书","C#高级编程(第6版)","123.60",
"本书为C#经典名著!是Wrox红皮书中最畅销的品种之一。从第1版开始就名满天下"
+ "，其第3版被评选为2005年最权威的十大IT图书之一，并荣获 “2005年度引进版"
+ "科技类优秀图书”奖。更可贺的是，其第4版又荣获“2006年最受读者喜爱的十大"
+ "技术开发类图书”！第6版在详尽论述C# 2005的基础上，又增加了.NET 3.0 "
+ "Framework的新特性，更加完善了C#的技术。是缺乏C#或.NET编程经验，但有其他"
+ "语言编程经验的开发人员，以及了解.NET 2.0，而且对.NET 3.0和Visual Studio "
+ "2005有兴趣的程序员全面掌握C#的首选教程。",
70,"advCsharp6.jpg","清华大学出版社","2007年06月","（美）埃克尔 著，陈昊鹏 译 "),
//Product6
Book.getInstance("006","图书","SQL Server 2005宝典","98.70",
"像专家那样开发和管理SQL Server 2005数据库<br/>"
+ "经验丰富的数据库开发人员考虑的是盒子里面的问题，因为这是代码的依附之地。"
+ "本书详尽而全面，引领您探索SQL Server 2005这个最新、最酷、功能最强大的"
+ "盒子的奥秘。全书由七部分组成，以合乎逻辑的顺序重点探讨了最重要的元素，"
+ "读者可轻松地找到感兴趣的内容，这包括基础知识、最佳实践、有针对性的示例以"
+ "及示例代码。本书深入探讨了SQL Server 2005数据库的开发、管理和维护。"
+ "是您踏上成功之路的跳板。",
65,"sql2005bible.jpg","人民邮电出版社","2008年1月","（美）尼尔森（Nielsen,P.） 著，"
+ "赵子鹏，袁国忠，乔健 译"),
//Product7
Book.getInstance("007","图书","藏地密码6","17.20",
"《藏地密码》被广大读者誉为“一部关于西藏的百科全书式小说”。翻开《藏地密码》，"
+ "犹如进入一幅从未展开过的西藏千年隐秘历史画卷……从横穿可可西里到深入喜马拉雅雪山深处，"
+ "从藏獒“紫麒麟传说”到灵獒“海蓝兽**”，从宁玛古经秘闻到格萨尔王史诗，从公元838年"
+ "西藏最黑暗时期的“朗达玛禁佛”到1938年和1943年希特勒两次派人进藏之谜<br/>"
+ "跟随《藏地密码》的脚步，您将穿越西藏深不可测的千年历史迷雾，看尽西藏绵延万里的雪域高原风光，"
+ "走遍西藏每一个传说中永不可抵达的神奇秘境。",
23,"zdmm6.jpg","重庆出版社","2009年4月","何马 著"),
//Product8
Book.getInstance("008","食品","多美滋金装多学1加幼儿配方奶粉","54.50",
"多美滋源自1896年始创于荷兰的皇家Numico集团，作为世界上较早生产婴幼儿配方奶粉的企业之一，"
+ "皇家Numico专注于婴幼儿营养研究和产品开发。经过100多年的发展，其业务遍及世界100多个国家，"
+ "尤其在欧洲，已成为婴幼儿营养品市场的领导者。1993年，皇家Numico是全球首"
+ "家将DHA\ARA加入配方奶粉的生产商之一。2006年，金装多美滋在中国率先将国际专利益生元组合添"
+ "加到系列配方奶粉中，经权威临床验证，它能天然增强宝宝的抵抗力，延续母乳对宝宝的保护。",
90,"dmzjz.jpg","北京","2008年11月","18个月","400g/盒(1-3岁)"),
//Product9
Book.getInstance("009","图书","倾城之恋","18.80",
"一九四四年八月十五日，张爱玲的小说集《**》由上海杂志社出版，"
+ "书中收入中短篇小说《金锁记》、《倾城之恋》、《茉莉香片》、"
+ "沉香屑：第一炉香》、《沉香屑：第二炉香》、《琉璃瓦》、"
+ "《心经》、《年青的时候》、《花凋》和《封锁》。《**》的出版，"
+ "是中国现代文学史上的一件大事，也奠定了张爱玲在中国现代文学"
+ "进程中的历史地位。“五四”开创的新文学运动衍变到此，才出现了"
+ "一种新的发展可能。本书《张爱玲集·倾城之恋》收入《**》增订"
+ "本的全部，同时在附录部分收入《**》各版的作者自序和关于"
+ "倾城之恋》的两篇创作体会。",
50,"qczl.jpg","北京十月文艺出版社","2006年12月 ","张爱玲 著 "),
//Product10
Book.getInstance("010","食品","散装普洱小沱茶","89.00",
"云南沱茶，1989年获全国名茶称号，又是具有独特风格的传统名茶。云南下关"
+ "沱茶1985年荣获国家优质产品银质奖章。云南普洱沱茶1986年获世界食品汉白玉"
+ "金冠奖。 云南沱茶属紧压茶。产销历史很长。明代《滇略》一书既有“士蔗所用，"
+ "皆普茶也，蒸而成团”的记载。产地大理白族自治州下关市，坐落在终年积雪的"
+ "仓山之麓；碧波荡漾的洱海之滨，风光明媚，环境优美，泉水清冽，是加工精制茶叶"
+ "的理想地方。 云南沱茶用优质毛茶做原料，经高温蒸压精制而成碗形，具有色泽乌润，"
+ "汤色清澈，馥郁清香，醇爽回甘的特点，外形紧结端正，冲泡后色，香，味俱佳，"
+ "且能持久，耐人品尝。",
138,"szpe.jpg","浙江","2007年3月","长期","200g/罐"),
//Product11
Book.getInstance("011","食品","好丽友蛋黄派","16.60",
"成立于1956年的（株）Orion是韩国四大食品公司之一。（株）Orion 在20世纪90年代中期"
+ "进入中国市场，并决心把中国市场建成“Best Global Pie Company”形象的典范。"
+ "好丽友生产的产品包括好丽友•派、好丽友•蛋黄派、好丽友•鲜莓派、好丽友•提拉米苏、"
+ "Q蒂摩卡巧克力蛋糕、好丽友哇水果口香糖、和好丽友木糖醇无糖口香糖等。其中，"
+ "好丽友•派是（株）Orion于1974年开发的产品，畅销海外60多个国家和地区，在世界巧克力"
+ "派市场占有70%的份额。",
58,"hlypi.jpg","河北","2009年1月","一年","23克×12块"),
//Product12
Book.getInstance("012","图书","藏地密码5","17.30",
"这是一个西藏已经开放为全世界的旅游胜地却依旧守口如瓶的秘密"
+ "——公元838年，吐蕃末代赞普朗达玛登位，随即宣布禁佛。"
+ "在那次禁佛运动中，僧侣们提前将大量经典和圣物埋藏起来，"
+ "随后将其秘密转移至一个隐秘的地方，他们在那里修建了神庙，"
+ "称为帕巴拉神庙。随着时光流失，战火不断，那座隐藏着无尽佛家"
+ "珍宝的神庙彻底消失于历史尘埃之中……",
39,"zdmm5.jpg","重庆出版社","2009年01月","何马 著"),
//Product13
Book.getInstance("013","食品","多美滋孕妇及哺乳期妇女营养奶粉","146.20",
"多美滋妈妈奶粉是最底脂肪、最底热量的孕期哺乳期配方奶粉，帮助维持孕期合理体重，"
+ "有利于妈妈产后体形恢复。<br/>"
+ "成份：矿物质11种：碳酸钙、柠檬酸钾、乳酸亚铁、柠檬酸铁铵、硫酸锌等。"
+ "维生素15种：维生素A醋酸酯、维生素E醋酸酯、盐酸硫胺素、盐酸吡哆醇、核黄素、"
+ "烟酰胺、叶酸、泛酸钙、生物素、维生素B12、维生素C、B-胡萝卜素等 。"
+ "DHA:帮助胎儿大脑及视网膜的发育<br/>"
+ "叶酸：帮助预防胎儿先天性神经管畸形等严重出生缺陷。",
60,"dmzmm.jpg","北京","2009年2月","18个月","900G/罐"),
//Product14
Book.getInstance("014","图书","世界上最神奇的24堂课","18.50",
"一部在美国被禁70年的经典！一部让拿破仑·希尔获益匪浅的民间秘本！一部"
+ "据传令比尔·盖茨辍学创业的神秘著作！在美国畅销20万册后，被禁70年！本"
+ "书不是写给所有人的，它的无穷力量属于慧眼识货之人，属于坚持阅读完全书"
+ "之人。他们将突破局限，获得巨大的财富和成功。全面挖掘内巨大的潜能，令"
+ "拿破仑·希尔致谢的心灵励志教程，史蒂夫·格瑞葛评价：“这是一本充分发"
+ "展人类潜能的最杰出书籍。”",
12,"24classes.jpg","新世界出版社","2007年02月","（美）查尔斯·哈奈尔 著，福源 译 "),
//Product15
Book.getInstance("015","食品","雀巢巧克力威化","23.90",
"“Nestle”的意思是“小小鸟巢”，这个温馨的鸟巢作为雀巢公司的标志，深受消费者熟悉和喜爱"
+ "，它代表着雀巢公司的理念：关爱、安全、自然、营养。作为全球最大的食品公司，雀巢秉承"
+ "一贯的理念和原则，以人为本，以质量为重，为世界各国的消费者提供优质食品，带来美好生活。 ",
40,"qcwh.jpg","天津","2008年10月","一年","24x20g"),
//Product16
Book.getInstance("016","食品","美赞臣安儿宝A+(新)","939.00",
"大脑有数以亿计的神经元，而神经元之间的沟通 － 神经传导在儿童期的发育最为迅速。"
+ "高水平的DHA能促进脑细胞之间的高效联接和沟通，脑细胞间的高效联接可以促使学习更快更好。"
+ "全新的安儿宝A＋、安儿健A＋和安学健A＋参照美国医学研究所(IOM)的相关推荐量，将DHA含量"
+ "提升至原配方的4倍以上。",
15,"mzcA.jpg","北京","2008年12月","18个月","400克*15盒/箱")
);
// 为指定 的 样式 显示 图书的信息 需要 重写 Book 类 的toString 方法
Book.prototype.toString = function(){
var prodDivStr = "<div id =\"productDiv\">"
+ "<div id=\"productImgDiv\">"
+ "<img id=\"productImg\" src = \"imgs/"+this.getProdImagePath()+"\"/>"
+ "</div>"
+ "<div id = \"productInfoDiv\">"
+ "<div id=\"productSaleDiv\">"
+ "<div id = \"productNameDiv\" class = \"productInfo1\">" +this.getProdName()+"</div>"
+ "<div id=\"productPriceDiv\" class=\"productInfo1\">单价:￥"+this.getProdPirce()+"</div>"
+ "<div id=\"buyDiv\"><img src=\"imgs/booksale.gif\" onclick=\":buy(\'"+this.getPordId()+"\')\"/></div>"
+ "<div id=\"productCountDiv\" class=\"productInfo1\">当前数量:<span id=\""+ this.getPordId()+ "\">"
+ this.getProdCount()+"</span>件</div></div>"
+"<div id=\"productOtherInfoDiv\" class=\"productInfo2\">"+
+"出版社："+this.getPulibsher()+"</br>"
+"出版时间:"+this.getPublicshDate()+"<br>"
+"作者:"+this.getAuthors()+"<br/></div>"
+"<div id=\"productBriefInfoDiv\" class=\"productInfo3\">"
+(this.getProdBrefInfo()?this.getProdBrefInfo().intercept(interceptProdBreiINfoLength):"")
+"</div></div></div>";
return prodDivStr;
}
// 商品 简介的 截取 长度
var interceptProdBreiINfoLength = 100 ;
//为String 类 添加截取 指定长度的fangf
String.prototype.intercept = function(len){
if(this.length > len){
return this.substring(0,len)+"...";
}else{
return this;
}
}
var dataList = []; // 保存书籍的查询结果
window.onload = function(){
alert("1");
dataList = productsArr ;
// alert(dataList.length);
showProducts(); // 显示
}
//根据要求第一次打开页面时学要浏览所有的书籍信息
function showProducts(){
var productsDivHTML = "";
for( var i in dataList)
{
productsDivHTML += dataList[i].toString();
}
document.getElementById("productsDiv").innerHTML = productsDivHTML;
}
// 提供查询功能
function searches(){
var typeSelect = document.getElementById("typeSelect");
var titleTxt = document.getElementById("titleTxt");
// 得到下拉狂中的值
var typeValue = typeSelect.options[typeSelect.selectedIndex].text;
var title = titleTxt.value; //得到文本狂中的关键字
if(typeValue=="所有分类"||typeValue==""){
dataList = productsArr ;
}else{
dataList = query(typeValue,title);
}
if(dataList.length>0){
alert("查询到符合条件数据一共有"+dataList.length+"条！");
}else{
alert("没有符合条件的数据");
}
titleTxt.select();//高亮
showProducts();
}
// query 方法根据商品种类和书籍名称来执行具体的查询
function query(type,title)
{
var result = [];
for(var i in productsArr ){
var prodType = productsArr[i].getProdType();
if(title ==""){
if(type == prodType){
result.push(productsArr[i]);
}
}else{
if((type ==prodType || type == "所有分类")&&
productsArr[i].getProdName().toLowerCase().indexOf(title)!=-1){
result.push(productsArr[i]);
}
}
}
return result;
}
/* var Cart = function Cart(){
当前购物车的商品
var products = [];
购物车汇总商品的编号清单 形式 002 001 003
var productsIdList = "";
清空购物车中的商品
this.clear = function(){
products.length = 0;
productsIdList = "";
};
购物车中的商品
this.getProducts = function(){
return products;
};
向购物车中添加商品
this.addProduct = function(product){
var index = productsIdList.indexOf();
}*/