日期:2014-05-16  浏览次数:20379 次

js面向对象(三)

?

“基于原型(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>&nbsp;
                <input id="titleTxt" type="text" />
                <img src="imgs/search.gif" onclick="searches();"/>
            </div>
            <div id="userInfoDiv">
            	您好,<span id="userSpan">游客</span>&nbsp;&nbsp;
            </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