使用prototype定义对象类型 / 开发进行时...

使用prototype定义对象类型

from javaeye

prototype提供了一套JavaScript面向对象基础设施，我们可以使用它来进行面向对象编程，定义对象类型方式如下：

var Person = Class.create();
Person.prototype = {
    initialize : function(name, age) {
        this.name = name;
        this.age = age;
    },
    toString : function() {
        document.writeln("[name]:"+this.name+"<br>"+"[age]:"+this.age);
    }
}

先使用Class.create()来创建一个对象类型，然后定义该对象类型，注意initialize方法是Person的构造器，完整的HTML如下：
test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Object</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script type="text/javascript">

var Person = Class.create();
Person.prototype = {
    initialize : function(name, age) {
        this.name = name;
        this.age = age;
    },
    toString : function() {
        document.writeln("[name]:"+this.name+"<br>"+"[age]:"+this.age);
    }
}

var person = new Person("robbin",30);
person.toString();
</script>
</body>
</html>

定义对象类别

注意JavaScript中对象类别的定义，使用function来定义对象类别，初始化对象使用new操作符

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.toString = function() {
        document.writeln("[name]:"+this.name+"<br>"+"[age]:"+this.age);
    }
}

完整的简单HTML
simple.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
<script language="javascript" type="text/javascript">
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.toString = function() {
        document.writeln("[name]:"+this.name+"<br>"+"[age]:"+this.age);
    }
}
</script>
</head>

<body>
<script type="text/javascript">
    var person = new Person();
    person.name="robbin";
    person.age=30;
    person.toString();
</script>
</body>
</html>

枚举JS对象的属性

枚举JavaScript对象的函数：


function iterator(obj) {
    for (var property in obj) {
        document.writeln("<p>" + property + " : " + obj[property] + "</p>");
    }
}

一个简单示例，JS对象定义：
test.js


function Employee () {
	this.name = "";
	this.dept = "general";
}

function Manager() {
	this.reports = [];
}
Manager.prototype = new Employee();

function WorkerBee() {
	this.projects = [];
}
WorkerBee.prototype = new Employee();

function SalesPerson() {
	this.dept = "sales";
	this.quota = 100;
}
SalesPerson.prototype = new WorkerBee();

function Engineer() {
	this.dept = "engineering";
	this.machine = "";
}
Engineer.prototype = new WorkerBee();
Engineer.prototype.specialty = "code";

function iterator(obj) {
    for (var property in obj) {
        document.writeln("<p>" + property + " : " + obj[property] + "</p>");
    }
}

HTML页面为：
test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
<style type="text/css">
p {
    font-size: 12px;
    font-family: Verdana;
    line-height: 0.5em;
}
</style>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<script type="text/javascript">
    engineer = new Engineer();
    iterator(engineer);

</script>
</body>
</html>

直接定义对象实例

可以不必定义对象类别而直接定义对象实例

var person = {
  name : "",
  age : 0,
  toString: function() {
      document.writeln("[name]:"+this.name+"<br>"+"[age]:"+this.age);
  }
}

完整的HTML例子：
simple.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
<script language="javascript" type="text/javascript">
var person = {
  name : "",
  age : 0,
  toString: function() {
    document.writeln("[name]:"+this.name+"<br>"+"[age]:"+this.age);
  }
}
</script>
</head>

<body>
<script type="text/javascript">
    person.name="robbin";
    person.age=30;
    person.toString();
</script>
</body>
</html>

以上来自javaeye的 JavaScript面向对象编程系列~
觉得很不错

有心得的也post吧~

评论已关闭