js 建立类

js是一门很强大的语言，灵活，方便。 目前我接触到的语言当中，从语法角度上讲，只有 Ruby 比它更爽。

不过我接触的动态语言只有： js ruby python flash的as 简单的几门， 应该算是井底之蛙之见。

js 语法成分简单，没有 ruby 语言复杂。因此有时候我以为她更干净（Ruby Fans 不要***我哦，我也是很爱很爱很爱Ruby的）！

Prototype.js 无疑是 js的漂亮之做，从它身上应该能够学到一些东西。

若是你用 js 在页面仅仅能写出 if, alert等简单的验证代码，或者想多了解一下Js, 那么此文可能对你有帮助。

好了，开始吧。

如今我忽然想起了 Thinking in java 中的 "一切皆是对像"， 其实我以为这句话 有点不适合 java 反却是更适合 js

1.怎样构造(初始化)对象?

js 代码

var Prototype = {
 Version: '1.5.0_rc1',
 ScriptFragment: '(?:)((\n|\r|.)*?)(?:<\/script>)',

 emptyFunction: function() {},
 K: function(x) {return x}
}

就这样，初始化了一个对象(名字就叫 Prototype)，以及对象的四个成员: Version, ScriptFragment, emptyFunction, K

咱们也来试试:

js 代码

var bbs = {
 name: 'JavaEye',
 version: '2.0',
 describe: "作最棒的软件开发交流区",
 sayHello: function() { alert("hello, i'm javaeye! ") }
}

因而你能够这样使用： bbs.name 或 bbs.sayHello()

看到吗？ sayHello 是一个方法哦，不要惊慌，"一切都是对象"，因此它和 name 是同样的，只不过初始化，或定义的语法不同。想起 js 中的正则表达式中的那两个杆杆了吗？ 可爱吧！

方法是对象，因此它能够被看成参数传递，或者做为方法的返回值。

因此 Prototype 中有一个 Version 属性，还有一个匹配 script 的正则式字符串， 一个空方法emptyFunction，还有一个方法 K, 它仅仅返回参数。

没问题吧，继续！

2. 构造函数？

先让咱们写段代码吧(中学时，我语文极差(大学没语文了)，我想写代码让大家明白我内心真实的想法)：

js 代码

var Person = function(name) { // 这里 Person 是一个方法
this.name = name;
}
var bencode = new Persion("bencode"); // 这里像Java吧！
alert(bencode.name);

先看结果：
从 alert(bencode.name); 能够知道，bencode是对象， 而 name 就是 bencode 的属性， 它被正确地初始化为 "bencode"

因此 var bencode = new Persion("bencode"); 就是构造了一个新的对象，Person() 至关于构造函数

因此 new 这个关键字， 就是构造一个新的对象，而且在这个对象上调用相应的方法，并将这个对象返回。

按上面说： 方法 若是用在 在 new 后面，就至关于成了构造函数了。

话又说回来了， 若是 var bencode = new Persion("bencode") 是 构造了一个对象，像Java, 那么 Person 是否是类呢？
但是 Person 不是方法吗？ 但是方法不也是对象吗？ 类也是对象？

一切皆对象?

原本无一物！

好了，看 Prototype.js吧

js 代码

var Class = {
 create: function() {
returnfunction() {
this.initialize.apply(this, arguments);
 }
 }
}

初始化一个 Class 对象， 它有一个成员，是一个方法， 这个方法返因另外一个方法（方法是对象，因此能够做为参数或者返回值）

因此若是咱们这么作：

js 代码

var A = Class.create(); // 此时 A 是一个方法，方法体，下面解释
var a = new A(...); // 对方法使用 new 操做符，就是构造一个新的对象，而后在这个对象上调用这个方法( 如今是 A)

上面分析说？ A至关于类， 哈哈 Class.create(); // 终于名副其实
var a = new A(...); // 也是至关地直观， 就是构造一个新的对象，类型 是A

new 操做符构造了对象，并调用了 方法， 这个方法到底作了什么呢？ 也就是上面没有分析的东东，看看先：

js 代码

var Class = {
 create: function() {
returnfunction() { // 见[1]
this.initialize.apply(this, arguments); // 见[2]
 }
 }
}

[1]. new 操做符，就会在新产生的对象上调用这个方法
[2]. 哦？ 这里就是调用 this 对象上的 initialize方法， 并传递 arguments
换句话说，就是把构造的任务委托给 initialize 方法
initialize? 哪里来？ 见下面，类的扩展(继承)

3. Prototype?

看段老代码：

js 代码

var Person = function(name) {
this.name = name;
}
var bencode = new Person("bencode");

bencode不是一个自闭的人，他应该能够向javaeye介绍一下本身。
像这样：

js 代码

bencode.sayHello();

假如不能实现以上功能的话， 上面的 new，上面全部的东东都等于垃圾。

因此。须要给 Person 类加"实例方法"

题外话： 静态方法如何添加？ 看上面的 Class.create, 仅仅是一个对象的成员而已

好， 再来一段 (为了完整性，上面的几句话，再抄一次)

js 代码

var Person = function(name) {
this.name = name;
}
Person.prototype = { // protype 是啥?
 sayHello: function() {
 alert("hi, javaeye, I'm " + this.name);
 }
}
var bencode = new Person("bencode");
bencode.sayHello();

运行代码，经过！

prototype是啥？ 请暂时忘记 Prototype(prototype.js) 这个库，名字同样而已！

让咱们再从结果上去分析（第一次咱们用这种方法分析而得出了 new 的做用），

咱们在思考：
要想 bencode.sayHello() 正常运行
bencode 是一个对象, 这是咱们已经知道的
sayHello() 应该是 bencode 这个对象的方法才能够

但是bencode 这个对象是 new 操做符产生的, 而 new 此时做用于 Person 这个 "类"
那么， 哦？ 那么有两种可能:
1. new 产生的那个新对象是否是就是 Person.prototype
2. Person.prototype 中的成员 将会被 new 操做符添加到 新产生的对象中

再看:

js 代码

Person.prototype = {
 sayHello: function() {
 alert("hi, javaeye, I'm " + this.name); // 这里有this
 }
}

this.name, 这里的 this 指什么？因此第一个可能讲不通呀

回忆起这段：

js 代码

var Person = function(name) {
this.name = name;
}

若是这里的 this 表明着新产生的对象的话。
那么第二种状况就讲得通了， new 将会把 Person.prototype 这个对象的成员放到 这个新对象中。 与当前行为相符。

因此： Person 的 Prototype 对象中的 成员, 将会被添加到 新产生的对象 中(我是这样理解的)
(不知道 Js解释器是否是开源的， 有空我得去看看，怎么实现的。)

嘿，默认的 Prototype 就是 Object 哦！

4. 扩展？继承？

什么是扩展？啥是继承？ ! 我从爸爸那获得了什么？
想不通！

仍是实际点：

有一个类A, 它有一个 sayHello方法

js 代码

var A = function() {
}

A.prototype = {
 sayHello: function() {
 alert("sayHello A")
 }
}

我想构造一个 B 类，让他继承 A 对象， 这句话太抽象。

其实咱们可能想这样：

js 代码

var b = new B();
b.sayHello(); // 调用 A 的 sayHello

这应该是继承的第一层含义（重用）

怎么办到呢？

var B = function() { // 这里是有一个B类了
}

怎么样添加"实例方法"? 快点想起 Prototype!!!

B.prototype = A.prototype

这样行了吗？ 恭喜, 运行经过！

让咱们整合一次

js 代码

var A = function() {
}
A.prototype = {
 sayHello: function() {
 alert("sayHello A");
 }
}

var B = function() {
}
B.prototype = A.prototype;

var b = new B();
b.sayHello();

但是若是 B 是这样呢?

js 代码

var B = function() {
}
B.prototype = {
 sayHi: function() {
 alert("sayHi B");
 }
}

咱们是否是应该将 A.prototype 中的内容添加到 B.prototype 对象中，而不是代替它呢？ 固然。

这样才能"扩展"

题外话？多态在哪里？ 嘿嘿

好了，足够多了， 那prototype.js 是怎么样"扩展"的呢？

js 代码

Object.extend = function(destination, source) {
for (var property in source) {
 destination[property] = source[property];
 }
return destination;
}

这个只是简单地把 source 的成员， 添加到 destination 对象中嘛, 哪里看得出扩展？

若是我这样呢？

js 代码

var A = function() {
}
A.prototype = {
 sayHello: function() {
 alert("sayHello A")
 }
}

var B = function() {
}
Object.extend(B.prototype, A.prototype); // 先添加父类(A)成员
Object.extend(B.prototype, { // 再添加B类成员, 若是是同名，则覆盖，行为符合 "多态"
 sayHi: function() {
 alert("sayHi B");
 }
});

回忆刚才的 Class.create()：

js 代码

var Person = Class.create();
var bencode = new Person("bencode");

刚才说过， 调用 new 时， 将会建立一个新对象，而且调用 Person 方法， Person 方法会委托给 "新产生对象"的 initialize方法

怎么样给新产生对象添加 initialize 方法？ 哈哈，轻松

js 代码

Object.extend(Person.prototype, {
 initialize: function() {
this.name = name;
 } //,
// 下面能够添加其余实例方法。
});

因此， 咱们使用 Prototype 建立类通常格式是这样的：

js 代码

var ClassName = Class.create();
Object.extend(ClassName.prototype, {
 initialize: function(...) { // 这就至关于构造函数
 }
//...
});

若是咱们要继承一个类，只要：

js 代码

var ClassName = Class.create();
Object.extend(ClassName.prototype, SuperClassName.prototype);
Object.extend(ClassName.prototype, {
 initialize: function(...) {
 }
//...
});

面向对象部分基本上就这样。

但愿对你们有点帮助!

原本想再接着写 Prototype.js 的源码解读，但一来是由于时间，第二是发现也没有这个必要。
这种东西是看起来快，写起来慢的。哈哈!

原文网址

http://www.iteye.com/topic/57760