prototypejs让你更深入的了解javascrip精.docx
- 文档编号:7152960
- 上传时间:2023-01-21
- 格式:DOCX
- 页数:7
- 大小:18.53KB
prototypejs让你更深入的了解javascrip精.docx
《prototypejs让你更深入的了解javascrip精.docx》由会员分享,可在线阅读,更多相关《prototypejs让你更深入的了解javascrip精.docx(7页珍藏版)》请在冰豆网上搜索。
prototypejs让你更深入的了解javascrip精
js是一门很强大的语言,灵活,方便。
目前我接触到的语言当中,从语法角度上讲,只有Ruby比它更爽。
不过我接触的动态语言只有:
jsrubypythonflash的as简单的几门,应该算是井底之蛙之见。
js语法成分简单,没有ruby语言复杂。
所以有时候我觉得她更干净(RubyFans不要攻击我哦,我也是很爱很爱很爱Ruby的!
Prototype.js无疑是js的漂亮之作,从它身上应该可以学到一些东西。
如果你用js在页面仅仅能写出if,alert等简单的验证代码,或者想多了解一下Js,那么此文可能对你有帮助。
好了,开始吧。
现在我突然想起了Thinkinginjava中的"一切皆是对像",其实我觉得这句话有点不适合java反倒是更适合js
1.怎样构造(初始化对象?
js代码
varPrototype={
Version:
'1.5.0_rc1',
ScriptFragment:
'(?
:
((\n|\r|.*?
(?
:
<\/script>',
emptyFunction:
function({},
K:
function(x{returnx}
}
就这样,初始化了一个对象(名字就叫Prototype,以及对象的四个成员:
Version,ScriptFragment,emptyFunction,K
我们也来试试:
js代码
varbbs={
name:
'JavaEye',
version:
'2.0',
describe:
"做最棒的软件开发交流区",
sayHello:
function({alert("hello,i'mjavaeye!
"}
}
于是你可以这样使用:
bbs.name或bbs.sayHello(
看到吗?
sayHello是一个方法哦,不要惊慌,"一切都是对象",所以它和name是一样的,只不过初始化,或定义的语法不一样。
想起js中的正则表达式中的那两个杆杆了吗?
可爱吧!
方法是对象,所以它可以被当作参数传递,或者作为方法的返回值。
所以Prototype中有一个Version属性,还有一个匹配script的正则式字符串,一个空方法emptyFunction,还有一个方法K,它仅仅返回参数。
没问题吧,继续!
2.构造函数?
先让我们写段代码吧(中学时,我语文极差(大学没语文了,我想写代码让你们明白我心里真实的想法:
js代码
varPerson=function(name{//这里Person是一个方法
this.name=name;
}
varbencode=newPersion("bencode";//这里像Java吧!
alert(bencode.name;
先看结果:
从alert(bencode.name;可以知道,bencode是对象,而name就是bencode的属性,它被正确地初始化为"bencode"
所以varbencode=newPersion("bencode";就是构造了一个新的对象,Person(相当于构造函数所以new这个关键字,就是构造一个新的对象,并且在这个对象上调用相应的方法,并将这个对象返回。
按上面说:
方法如果用在在new后面,就相当于成了构造函数了。
话又说回来了,如果varbencode=newPersion("bencode"是构造了一个对象,像Java,那么Person是不是类呢?
可是Person不是方法吗?
可是方法不也是对象吗?
类也是对象?
一切皆对象?
本来无一物!
好了,看Prototype.js吧
js代码
varClass={
create:
function({
returnfunction({
this.initialize.apply(this,arguments;
}
}
}
初始化一个Class对象,它有一个成员,是一个方法,这个方法返因另一个方法(方法是对象,所以可以作为参数或者返回值
所以如果我们这么做:
js代码
varA=Class.create(;//此时A是一个方法,方法体,下面解释
vara=newA(...;//对方法使用new操作符,就是构造一个新的对象,然后在这个对象上调用这个方法(现在是A
上面分析说?
A相当于类,哈哈Class.create(;//终于名副其实
vara=newA(...;//也是相当地直观,就是构造一个新的对象,类型是A
new操作符构造了对象,并调用了方法,这个方法到底做了什么呢?
也就是上面没有分析的东东,看看先:
js代码
varClass={
create:
function({
returnfunction({//见[1]
this.initialize.apply(this,arguments;//见[2]
}
}
}
[1].new操作符,就会在新产生的对象上调用这个方法
[2].哦?
这里就是调用this对象上的initialize方法,并传递arguments
换句话说,就是把构造的任务委托给initialize方法
initialize?
哪里来?
见下面,类的扩展(继承
3.Prototype?
看段老代码:
js代码
varPerson=function(name{
this.name=name;
}
varbencode=newPerson("bencode";
bencode不是一个自闭的人,他应该可以向javaeye介绍一下自己。
像这样:
js代码
bencode.sayHello(;
假如不能实现以上功能的话,上面的new,上面所有的东东都等于垃圾。
所以。
需要给Person类加"实例方法"
题外话:
静态方法如何添加?
看上面的Class.create,仅仅是一个对象的成员而已好,再来一段(为了完整性,上面的几句话,再抄一次
js代码
varPerson=function(name{
this.name=name;
}
Person.prototype={//protype是啥?
sayHello:
function({
alert("hi,javaeye,I'm"+this.name;
}
}
varbencode=newPerson("bencode";
bencode.sayHello(;
运行代码,通过!
prototype是啥?
请暂时忘记这个库,名字一样而已!
让我们再从结果上去分析(第一次我们用这种方法分析而得出了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代码
varPerson=function(name{
this.name=name;
}
如果这里的this代表着新产生的对象的话。
那么第二种情况就讲得通了,new将会把Person.prototype这个对象的成员放到这个新对象中。
与当前行为相符。
所以:
Person的Prototype对象中的成员,将会被添加到新产生的对象中(我是这样理解的
(不知道Js解释器是不是开源的,有空我得去看看,怎么实现的。
嘿,默认的Prototype就是Object哦!
4.扩展?
继承?
什么是扩展?
啥是继承?
!
我从爸爸那得到了什么?
想不通!
还是实际点:
有一个类A,它有一个sayHello方法
js代码
varA=function({
}
A.prototype={
sayHello:
function({
alert("sayHelloA"
}
}
我想构造一个B类,让他继承A对象,这句话太抽象。
其实我们可能想这样:
js代码
varb=newB(;
b.sayHello(;//调用A的sayHello
这应该是继承的第一层含义(重用
怎么办到呢?
varB=function({//这里是有一个B类了
}
怎么样添加"实例方法"?
快点想起Prototype!
!
!
B.prototype=A.prototype
这样行了吗?
恭喜,运行通过!
让我们整合一次
js代码
varA=function({
}
A.prototype={
sayHello:
function({
alert("sayHelloA";
}
}
varB=function({
}
B.prototype=A.prototype;
varb=newB(;
b.sayHello(;
可是如果B是这样呢?
js代码
varB=function({
}
B.prototype={
sayHi:
function({
alert("sayHiB";
}
}
我们是不是应该将A.prototype中的内容添加到B.prototype对象中,而不是代替它呢?
当然。
这样才能"扩展"
题外话?
多态在哪里?
嘿嘿
好了,足够多了,那prototype.js是怎么样"扩展"的呢?
js代码
Object.extend=function(destination,source{
for(varpropertyinsource{destination[property]=source[property];}returndestination;}这个只是简单地把source的成员,添加到destination对象中嘛,哪里看得出扩展?
如果我这样呢?
js代码varA=function({}A.prototype={sayHello:
function({alert("sayHelloA"}}varB=function({}Object.extend(B.prototype,A.prototype;//先添加父类(A成员Object.extend(B.prototype,{//再添加B类成员,如果是同名,则覆盖,行为符合"多态"sayHi:
function({alert("sayHiB";}};回忆刚才的Class.create(:
js代码varPerson=Class.create(;varbencode=newPerson("bencode";刚才说过,调用new时,将会创建一个新对象,并且调用Person方法,Person方法会委托给"新产生对象"的initialize方法怎么样给新产生对象添加initialize方法?
哈哈,轻松js代码Object.extend(Person.prototype,{initialize:
function({this.name=name;}//,//下面可以添加其他实例方法。
};所以,我们使用Prototype创建类一般格式是这样的:
js代码varClassName=Class.create(;Object.extend(ClassName.prototype,{initialize:
function(...{//这就相当于构造函数
}//...};如果我们要继承一个类,只要:
js代码varClassName=Class.create(;Object.extend(ClassName.prototype,SuperClassName.prototype;Object.extend(ClassName.prototype,{initialize:
function(...{}//...};面向对象部分基本上就这样。
希望对大家有点帮助!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- prototypejs 更深 了解 javascrip
![提示](https://static.bdocx.com/images/bang_tan.gif)