Tue, 20 Mar 2007 05:20:00 GMT

�?prototype.js 深入学习(f��n) javascript 的面向对象特�?/font>

1.怎样构�?初始�?对象?

js 代码

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

��p��P��初始化了一个对�?名字��叫 Prototype)�Q�以�?qi��ng)对象的四个成�? Version, ScriptFragment, emptyFunction, K

我们也来试试:

js 代码

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

于是你可以这样��用：(x��) bbs.name �?bbs.sayHello()

看到吗？ sayHello 是一个方法哦�Q�不要惊慌，"一切都是对�?�Q�所以它�?name 是一��L(f��ng)��Q�只不过初始化，或定义的语法不一栗��想�?js 中的正则表达式中的那两个杆杆了吗�Q?可爱吧！

�Ҏ(gu��)��是对象，所以它可以被当作参��C��递，或者作为方法的�q�回倹{�?/p>

所�?Prototype 中有一�?Version 属性，�q�有一个匹�?script 的正则式字符�Ԍ�� 一个空�Ҏ(gu��)��emptyFunction�Q�还有一个方�?K, 它仅仅返回参数�?/p>

没问题吧�Q��l�！

2. 构造函敎ͼ�

先让我们写段代码�?中学�Ӟ��我语文极�?大学没语文了)�Q�我惛_��代码让你们明白我心里真实的想�?�Q?/p>

js 代码

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

先看�l�果�Q?br />�?alert(bencode.name); 可以知道�Q�bencode是对象， �?name ��是 bencode 的属性，它被正确地初始化�?"bencode"

所�?var bencode = new Persion("bencode"); ��是构造了一个新的对象，Person() 相当于构造函�?/p>

所�?new �q�个关键字， ��是构造一个新的对象，�q�且在这个对象上调用相应的方法，�q�将�q�个对象�q�回�?/p>

按上面说�Q?�Ҏ(gu��)�� 如果用在 �?new 后面�Q�就相当于成了构造函��C��?/p>

话又说回来了�Q?如果 var bencode = new Persion("bencode") �?构造了一个对象，像Java, 那么 Person 是不是类呢？
可是 Person 不是�Ҏ(gu��)��吗？可是�Ҏ(gu��)��不也是对象吗�Q?�c�M��是对象？

一切皆对象?

本来无一物！

好了�Q�看 prototype.js�?/p>

js 代码

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

初始化一�?Class 对象�Q?它有一个成员，是一个方法， �q�个�Ҏ(gu��)��q�因另一个方法（�Ҏ(gu��)��是对象，所以可以作为参数或者返回��|��

所以如果我们这么做�Q?

js 代码

var A = Class.create(); // 此时 A 是一个方法，�Ҏ(gu��)��体，下面解释
var a = new A(...); // �Ҏ(gu��)��法��用 new 操作�W�，��是构造一个新的对象，然后在这个对象上调用�q�个�Ҏ(gu��)��( 现在是 A)

上面分析��_(d��)�� A相当于类�Q?哈哈 Class.create(); // �l�于名副其实
var a = new A(...); // 也是相当地直观， ��是构造一个新的对象，�c�d�� 是A

new 操作�W�构造了对象�Q��ƈ调用�?�Ҏ(gu��)��Q?�q�个�Ҏ(gu��)��到底做了什么呢�Q?也就是上面没有分析的东东�Q�看看先�Q?/p>

js 代码

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

[1]. new 操作�W�，��׃��(x��)在新产生的对象上调用�q�个�Ҏ(gu��)��
[2]. 哦？ �q�里��是调用 this 对象上的 initialize�Ҏ(gu��)��Q?�q�传�?arguments
换句话说�Q�就是把构造的��d��委托�l?initialize �Ҏ(gu��)��
initialize? 哪里来？见下面，�cȝ��扩展(�l�承)

3. prototype?

看段老代码：(x��)

js 代码

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

bencode不是一个自闭的人，他应该可以向javaeye介绍一下自己�?br />像这��P��(x��)

js 代码

bencode.sayHello();

假如不能实现以上功能的话�Q?上面�?new�Q�上面所有的东东都等于垃圾�?/p>

所以。需要给 Person �c�d��"实例�Ҏ(gu��)��"

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

好，再来一�D?(��Z��完整性，上面的几句话�Q�再抄一��?

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();

�q�行代码�Q�通过�Q?/p>

prototype是啥�Q?��h��时忘�?Prototype(prototype.js) �q�个库，名字一栯��已�Q?/p>

让我们再从结果上��d��析（�W�一�ơ我们用�q�种�Ҏ(gu��)��分析而得��Z�� new 的作用）�Q?/p>

我们在思考：(x��)
要想 bencode.sayHello() 正常�q�行
bencode 是一个对�? �q�是我们已经知道�?br /> sayHello() 应该�?bencode �q�个对象的方法才可以

可是bencode �q�个对象�?new 操作�W��生的, �?new 此时作用�?Person �q�个 "�c?
那么�Q?哦？那么有两�U�可�?
1. new 产生的那个新对象是不是就�?Person.prototype
2. Person.prototype 中的成员 ��会(x��)�?new 操作�W�添加到 ��C�生的对象�?

再看:

js 代码

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

this.name, �q�里�?this 指什么？所以第一个可能讲不通呀

回忆赯��D�：(x��)

js 代码

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

如果�q�里�?this 代表着��C�生的对象的话�?br />那么�W�二�U�情况就讲得通了�Q?new ��会(x��)�?Person.prototype �q�个对象的成员放�?�q�个新对象中�?与当前行为相�W��?/p>

所以：(x��) Person �?prototype 对象中的成员, ��会(x��)被添加到 ��C�生的对象 �?我是�q�样理解�?
(不知�?Js解释器是不是开源的�Q?有空我得�ȝ��看，怎么实现的�?

嘿，默认�?prototype ��是 Object 哦！

4. 扩展�Q��承？

什么是扩展�Q�啥是��承？ ! 我从爸爸那得��C��什么？
想不通！

�q�是实际点：(x��)

有一个类A, 它有一�?sayHello�Ҏ(gu��)��

js 代码

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

我想构造一�?B �c�，让他�l�承 A 对象�Q?�q�句话太抽象�?

其实我们可能惌��P��(x��)

js 代码

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

�q�应该是�l�承的第一层含义（重用�Q?/p>

怎么办到呢？

var B = function() { // �q�里是有一个B�c�M��
}

怎么��h��?实例�Ҏ(gu��)��"? 快点惌��v prototype!!!

B.prototype = A.prototype

�q�样行了吗？恭喜, �q�行通过�Q?/p>

让我们整合一��?/p>

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 中的内容��d��?B.prototype 对象中，而不是代替它呢？当然�?/p>

�q�样才能"扩展"

题外话？多态在哪里�Q?嘿嘿

好了�Q��够多了，那prototype.js 是怎么�?扩展"的呢�Q?/p>

js 代码

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

�q�个只是��单地�?source 的成员， ��d��?destination 对象中嘛, 哪里看得出扩展？

如果我这样呢�Q?/p>

js 代码

var A = function () {
}
A.prototype = {
sayHello: function () {
alert( "sayHello A" )
}
}
var B = function () {
}
Object.extend(B.prototype, A.prototype); // 先添加父�c?A)成员
Object.extend(B.prototype, { // 再添加B�c�L��? 如果是同名，则覆盖，行�ؓ(f��)�W�合 "多�?
sayHi: function () {
alert( "sayHi B" );
}
});

回忆刚才�?Class.create()�Q?/p>

js 代码

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

刚才说过�Q?调用 new �Ӟ�� 会(x��)创徏一个新对象�Q��ƈ且调�?Person �Ҏ(gu��)��Q?Person �Ҏ(gu��)��?x��)委托�?"��C�生对�?�?initialize�Ҏ(gu��)��

怎么��L(f��ng)��C�生对象添�?initialize �Ҏ(gu��)��Q?哈哈�Q�轻�?/p>

js 代码

Object.extend(Person.prototype, {
initialize: function () {
this .name = name;
} //,
// 下面可以��d��其他实例�Ҏ(gu��)��?
});

所以，我们使用 prototype 创徏�c�M��般格式是�q�样的：(x��)

js 代码

var ClassName = Class.create();
Object.extend(ClassName.prototype, {
initialize: function (...) { // �q�就相当于构造函�?
}
//...
});

如果我们要��承一个类�Q�只要：(x��)

js 代码

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

面向对象部分基本上就�q�样�?/p>

没有鱼的�?/a> 2007-03-20 13:20 发表评论

亚洲图片123,欧美激情一二三,在线亚洲人成电影网站色www