JS中的phototype是JS中比较难理解的一个部分
本文基于下面几个知识点:
1 原型法设计模式
在.Net中可以使用clone()来实现原型法
原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。
2 javascript的方法可以分为三类:
a 类方法
b 对象方法
c 原型方法
例子:
{
this .name = name;
// 对象方法
this .Introduce = function (){
alert( " My name is " + this .name);
}
}
// 类方法
People.Run = function (){
alert( " I can run " );
}
// 原型方法
People.prototype.IntroduceChinese = function (){
alert( " 我的名字是 " + this .name);
}
// 测试
var p1 = new People( " Windking " );
p1.Introduce();
People.Run();
p1.IntroduceChinese();
3 obj1.func.call(obj)方法
意思是将obj看成obj1,调用func方法
好了,下面一个一个问题解决:
prototype是什么含义?
javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。
A.prototype = new B();
理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。
先看一个实验的例子:
{
this .showMsg = function ()
{
alert( " baseClass::showMsg " );
}
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg
我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。
extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。
那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?
下面是扩展实验2:
{
this .showMsg = function ()
{
alert( " baseClass::showMsg " );
}
}
function extendClass()
{
this .showMsg = function ()
{
alert( " extendClass::showMsg " );
}
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示extendClass::showMsg
实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
那么又会有一个新的问题:
如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?
答案是可以使用call:
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance); // 显示baseClass::showMsg
这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用,调用它的对象方法showMsg”
好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);
这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法
最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:
function baseClass()
{
this .showMsg = function ()
{
alert( " baseClass::showMsg " );
}
this .baseShowMsg = function ()
{
alert( " baseClass::baseShowMsg " );
}
}
baseClass.showMsg = function ()
{
alert( " baseClass::showMsg static " );
}
function extendClass()
{
this .showMsg = function ()
{
alert( " extendClass::showMsg " );
}
}
extendClass.showMsg = function ()
{
alert( " extendClass::showMsg static " )
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示extendClass::showMsg
instance.baseShowMsg(); // 显示baseClass::baseShowMsg
instance.showMsg(); // 显示extendClass::showMsg
baseClass.showMsg.call(instance); // 显示baseClass::showMsg static
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance); // 显示baseClass::showMsg
< / script>
作者:轩脉刃(yjf512)
出处:(http://www.cnblogs.com/yjf512/)
版权声明:本文的版权归作者与博客园共有。欢迎转载阅读,转载时须注明本文的详细链接。
[参考文章]
http://tech.ddvip.com/2009-05/1243588303121461.html
http://jetway.iteye.com/blog/56533
http://xiaofeizm55333.iteye.com/blog/80913
我们知道JScript中对象的prototype属性,是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢? 对于对象的prototype属性的说明,JScript手册上如是说:所有 JScript 内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。 下面我们看三个经典的prototype属性的使用示例。 1、为脚本环境内建对象添加方法: 程序代码 Array.prototype.max = function() { var i, max = this[0]; for (i = 1; i < this.length; i++) { if (max < this[i]) max = this[i]; } return max; }; 2、为用户自定义类添加方法: 程序代码 function TestObject(name) { this.m_Name = name; } TestObject.prototype.ShowName = function() { alert(this.m_Name); }; 3、更新自定义类的prototype: 程序代码 function TestObjectA() { this.MethodA = function() { alert('TestObjectA.MethodA()'); } } function TestObjectB() { this.MethodB = function() { alert('TestObjectB.MethodB()'); } } TestObjectB.prototype = new TestObjectA(); 第三个很眼熟吧?对啊,它就是我们前面介绍的原型继承法呀~~ 不过今天我们不是研究"继承",之所以可以这样来实现一种继承,只是利用了prototype属性的一个副作用而已。 prototype还有一个默认的属性:constructor,是用来表示创建对象的函数的(即我们OOP里说的构造函数)。constructor属性是所有具有prototype属性的对象的成员。它们包括除Global和Math对象以外的所有JScript内部对象。constructor属性保存了对构造特定对象实例的函数的引用。 弄清楚了JScript中prototype属性怎么使用后,下面我们再来深入的研究它。 上面的文章中我罗列了一下prototype属性在JScript中的各种用法,但是prototype这个东西却不是JScript创造出来的,JScript实际上是使用了我们设计模式中prototype pattern的一种衍生形式。下面我先简单的说一下prototype pattern,然后再来看到底JScript中的prototype是怎么回事?! What's prototype pattern? Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype. 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。 原型模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建的细节,工作原理是:通过将一个原型对象传给那个要发动创建的对象,这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建。 继续了解到底什么是prototype pattern,可以参看'设计模式之Prototype(原型)'这篇文章,即使不懂Java也没有关系,把它的代码都当C#看就行了。 搞清楚什么是原型了吧?反正记着一点,prototype pattern是的实现是依赖于clone这个操作的,当然要shallow copy还是deep copy的clone看自己的需要了。 下面我们继续说JScript里的prototype,为什么我们说它和prototype pattern里的prototype不一样呢?! 这个不是我说就说出来的,也不是我吹出来的,看看这个示例,你就能大概糊涂: 程序代码 <script language="javascript"> function RP() { RP.PropertyA = 1; RP.MethodA = function() { alert("RP.MethodA "); }; this.PropertyA = 100; this.MethodA = function() { alert("this.MethodA"); }; } RP.prototype.PropertyA = 10; RP.prototype.MethodA = function() { alert("RP.prototype.MethodA"); }; </script> 不要着急,还没有开始做示例,只是给出了我们用来演示的一个类。RP是什么?rpwt吗?当然不是了,RP是ResearchPrototype了。好了不废话了,看示例及结果分析。 程序代码 <script language="javascript"> rp = new RP(); alert(RP.PropertyA); RP.MethodA(); alert(rp.PropertyA); rp.MethodA(); </script> 运行结果闪亮登场: 1 RP.MethodA 100 this.MethodA 这个%$@#^$%&^...,不要着急,继续看哦! 程序代码 <script language="javascript"> rp = new RP(); delete RP.PropertyA; alert(RP.PropertyA); delete RP.MethodA; RP.MethodA(); delete rp.PropertyA; alert(rp.PropertyA); delete rp.MethodA; rp.MethodA(); </script> 运行结果再次登场: 程序代码 undefined A Runtime Error has occurred. Do you wish to Debug? Line: 32 Error: Object doesn't support this property or method 10 RP.prototype.MethodA 好玩吧,看出来什么名堂了吗?这里的RP.PropertyA和RP.MethodA只是用来做参照的,可是怎么把this.PropertyA和this.MethodA都delete了,还能出来结果,而且还是prototype导入的属性和方法呢? 这就是JScript的prototype和prototype pattern中prototype最大的不同了,JScript中的这个所谓的prototype属性其实是个语言本身支持的特性,这里没有发生任何的copy,不管shallow还是deep的。对于JScript的解释引擎,它在处理"."或"[keyName]"引用的对象的属性和方法时,先在对象本身的实例(this)中查找,如果找到就返回或执行。如果没有查找到,就查找对象的prototype(this.constructor.prototype)里是否定义了被查找的对象和方法,如果找到就返回或执行,如果没有查找到,就返回undefined(对于属性)或runtime error(对于方法)。 正因为prototype导入类实例的属性或方法是动态查找的,所以我们才能对系统内部对象添加prototype属性和方法,比如给String对象添加trim方法: 程序代码 <script lanuage="javascript"> String.prototype.trim() { return this.replace(/(^\s+)|(\s+$)/g, ""); } </scritp> 显然JScript中的这种用法也是prototype pattern中的prototype不能解释和支持的。 这下对于JScript OOP中原型继承法的理解因该没有任何的障碍了吧?同时也应该明白为什么原型继承法有那么大的天生缺陷了吧?当然如果有任何问题,欢迎继续讨论。 附演示示例源代码: 程序代码 <html> <head> <meta name="author" content="birdshome@博客园"> <title>JScript Prototype Research</title> </head> <body> <script language="javascript"> function RP() { RP.PropertyA = 1; RP.MethodA = function() { alert("RP.MethodA "); }; this.PropertyA = 100; this.MethodA = function() { alert("this.MethodA"); }; } RP.prototype.PropertyA = 10; RP.prototype.MethodA = function() { alert("RP.prototype.MethodA"); }; </script> <script language="javascript"> rp = new RP(); delete RP.PropertyA; alert(RP.PropertyA); delete RP.MethodA; RP.MethodA(); delete rp.PropertyA; alert(rp.PropertyA); delete rp.MethodA; rp.MethodA(); </script> </body> </html>