面向对象的JavaScript

面向对象的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 >