javascript学习实录 之三(对象原型引用prototype) --刘小小尘
2013-05-07 09:07
459 查看
这一次 讲一下,对象的原型引用prototype
对于对象,有一个属性 : prototype 属性
先看一下API中讲解的
如例子所思,你可以为对象添加一些你需要的任何方法,很简单的,来看一下一个实例,StringUtils ,增加trim方法,和反转方法
使用对象原型,给String对象添加了trim 和reverse方法,下次调用的时候,只需要 s.trim() 或者 s.reverse() 即可
根据api说明
只有这几个对象有prototype属性
以下为从网上摘抄的内容,有不对的地方,欢迎指正
对于对象,有一个属性 : prototype 属性
先看一下API中讲解的
返回对象类型原型的引用。 objectName.prototype objectName 参数是对象的名称。 说明 用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。 例如,要为 Array 对象添加返回数组中最大元素值的方法。 要完成这一点,声明该函数,将它加入 Array.prototype, 并使用它。 function array_max( ){ var i, max = this[0]; for (i = 1; i < this.length; i++) { if (max < this[i]) max = this[i]; } return max; } Array.prototype.max = array_max; var x = new Array(1, 2, 3, 4, 5, 6); var y = x.max( ); 该代码执行后,y 保存数组 x 中的最大值,或说 6。 所有 JScript 固有对象都有只读的 prototype 属性。可以象该例中那样为原型添加功能,但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。
如例子所思,你可以为对象添加一些你需要的任何方法,很简单的,来看一下一个实例,StringUtils ,增加trim方法,和反转方法
/** * class description : * User: Administrator * Date: 13-5-6 * Time: 下午10:42 * 修改描述 : */ function trim() { var start, end; start = 0; end = this.length - 1; while(start <= end && this.charAt(start) == " ") start++; while(start <= end && this.charAt(end) == " ") end--; return this.substring(start, end + 1); } function reverse() { var str = ""; for(var x = this.length; x > 0; x--) { str += this.charAt(x); } return str; } //添加对象的原型引用 String.prototype.trim = trim; String.prototype.reverse = reverse;
使用对象原型,给String对象添加了trim 和reverse方法,下次调用的时候,只需要 s.trim() 或者 s.reverse() 即可
根据api说明
只有这几个对象有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>
相关文章推荐
- JavaScript之面向对象学习五(JS原生引用类型Array、Object、String等等)的原型对象介绍
- javascript学习笔记 - 引用类型 单体内置对象
- javascript之对象学习笔记(二)--对象原型,继承
- JavaScript 的原型对象 Prototype
- JavaScript为对象原型prototype添加属性的两种方式
- javaScript中的prototype来龙去脉,原型、构造函数、实例对象
- JavaScript基础学习<五>对象参数引用
- 一步步学习javascript基础篇(4):面向对象设计之创建对象(工厂、原型和构造函数等模式)
- javascript原型对象prototype
- javascript学习笔记一:javascript原型+对象字面量等
- Javascript的原型对象和prototype属性
- JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法
- JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)
- [前端JS学习笔记]JavaScript prototype 对象
- 【JavaScript】学习理解prototype原型时的一些代码片段
- javascript学习实录 之六(div开关闭合效果实例) --刘小小尘
- 「祖」prototype //原型对象的引用 20140804 ①文本处理
- C#面向对象设计模式学习笔记(5) - Prototype 原型模式(创建型模式)
- javascript学习笔记10(基于组合与动态原型创建对象)