当柳上原的风吹向天际的时候...

真正的快乐来源于创造
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks
面向对象的JavaScript

JS中对象的定义

JavaScript把其中的对象定义为“属性的无序集合，每个属性存放一个原始值，对象或者函数”。
因此，在JavaScript中，对象由特性（atrribute）构成，特性可以是原始值，也可以是引用值。如果特性存放的是函数，它将被看做对象的方法（method），否则该特性被看做属性（property）。

对象的创建

对象是使用关键字new后跟要实例化的类的名字创建的，如：
Var obj=new Object();
Var str=new String();
第一行代码创建了一个Object类的实例，并把它设定给变量obj；第二行代码创建了一个String的实例，并把它设定给变量str。
如果构造函数无参数，括号不是必需的。
如果把对象的所有引用都设置为null，可以强制性的废除对象。

关键字this

在JavaScript中，要掌握的最重要的概念之一是关键字this的用法，它用在对象的方法中。关键字this总是指向调用该方法的对象，如：

<script language="javascript">
<!--
window.onload=function(){
  var cube=new Object;
  cube.sideLength=6;
  cube.getVolumn=function(){
  return this.sideLength*this.sideLength*this.sideLength;
  }
 
  alert(cube.getVolumn());
}
//-->
</script>

 

使用构造函数方式创建对象

<script language="javascript">
<!--

window.onload=function(){
  // 创建Cube类的一个实例
  var cube=new Cube(3,7.8);
   
  // 显示方块的体积
  alert(cube.getVolumn());
  
  // 显示方块的重量
  alert(cube.getWeight());
}


function Cube(sideLength,density){
  // 给类Cube分配一个属性sideLength，其值等于sideLength的值
  this.sideLength=sideLength;
  
  // 给类Cube分配一个属性density，其值等于density的值
  this.density=density;

  // 给类Cube分配一个函数，函数名在等号左边，函数体在等号右边
  this.getVolumn=function(){
    return this.sideLength*this.sideLength*this.sideLength;
  }

  // 给类Cube分配一个函数，其中调用了本类的其它函数
  this.getWeight=function(){
    return this.getVolumn()*this.density;
  }
}

//-->
</script>


使用混合的构造函数/原型方式创建对象

<script language="javascript">
<!--

window.onload=function(){
  var cube=new Cube(3,7.8);
   
  alert(cube.getVolumn());
  alert(cube.getWeight());
}


function Cube(sideLength,density){
  this.sideLength=sideLength;
  this.density=density;
}

Cube.prototype.getVolumn=function(){
  return this.sideLength*this.sideLength*this.sideLength;
}

Cube.prototype.getWeight=function(){
  return this.getVolumn()*this.density;
}

//-->
</script>

 

理解protoType

我们可以把protoType理解为创建新对象所依赖的原型，protoType对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype对象的任何属性和方法都被传递给那个类的所有实例。

使用混合方式创建实例的完整例子

 

<html>
 <head>
  <title>使用混合方式创建类实例</title>
 </head>
  <body>   
    <div>
    <table border="1" class="holder" cellspacing="0" width="300" height="20">
      <caption>人员名单</caption>
      <tbody id="personList"> 
        <TR>
          <TH width="50">ID</TH>
          <TH>姓名</TH>
          <TH width="100">年龄</TH>
        </TR> 
      </tbody>
    </table>
    </div>
    <hr/>
    <div>
      姓名:<input type="text" name="name"/><br/>
      年龄:<input type="text" name="age"/><br/>
      &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="btn" value="提交"/><br/>
    </div>
  </body>
</html>
<script language="javascript">
<!--

function $(id){
  return document.getElementById(id);
}

window.onload=function(){
  $("btn").onclick=function(){
    var emp=new Employee($("name").value,$("age").value); 
    $("personList").appendChild(emp.getInfoLine()); 
    
    $("name").value="";         
    $("age").value="";
  }
}

var sn=0;

function Employee(name,age){
  sn++;
  
  this.name=name;
  this.age=age;
}

Employee.prototype.getName=function(){
  return this.name;
}

Employee.prototype.getAge=function(){
  return this.age;
}

Employee.prototype.getInfoLine=function(){
  var row=document.createElement("tr");
  row.setAttribute("height",20);
 
  var cell1=document.createElement("td");
  cell1.appendChild(document.createTextNode(sn));
  row.appendChild(cell1); 

  var cell2=document.createElement("td");
  cell2.appendChild(document.createTextNode(this.name));
  row.appendChild(cell2); 

  var cell3=document.createElement("td");
  cell3.appendChild(document.createTextNode(this.age));
  row.appendChild(cell3); 

  return row;
}
//-->
</script>

 

posted on 2009-02-26 12:07 何杨 阅读(200) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航: