JScript中的prototype(原型)属性研究
今天看到同事使用js中的Prototype,感觉很是新鲜。由此想深入学习一下prototype(英['prəʊtətaɪp] 美['protə'taɪp]n. 原型;标准,模范),在学习prototype(原型)之前直接给出模仿同事代码写出的测试案例。
案例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txt" />
<input type="button" id="btnPrototypeTest" value="prototypeTest" onclick="test(document.getElementById('txt').value)" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function JSPrototype() { }
JSPrototype.prototype = {
ShowName: function (name) {
alert(name);
},
ShowAge: function () {
return "的年龄为24";
}
}
var jsPrototype = new JSPrototype();
function test(name) {
jsPrototype.ShowName(name + jsPrototype.ShowAge());
}
</script>
以下内容来自:http://www.cnblogs.com/birdshome/archive/2005/02/17/105403.html
我们知道JScript中对象的prototype属性,是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢?
对于对象的prototype属性的说明,JScript手册上如是说:所有 JScript 内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。
下面我们看三个经典的prototype属性的使用示例。
1、为脚本环境内建对象添加方法:
{
if (max < this[i])
max = this[i];
}
return max;
};
2、为用户自定义类添加方法:
{
this.m_Name = name;
}
TestObject.prototype.ShowName = function()
{
alert(this.m_Name);
};
3、更新自定义类的prototype:
{
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属性怎么使用后,下面我们再来深入的研究它。
JScript中的prototype(原型)属性研究(2)
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不一样呢?! 这个不是我说就说出来的,也不是我吹出来的,看看这个示例,你就能大概糊涂:
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了。好了不废话了,看示例及结果分析。
rp = new RP();
alert(RP.PropertyA);
RP.MethodA();
alert(rp.PropertyA);
rp.MethodA();
</script>
运行结果闪亮登场:
RP.MethodA
100
this.MethodA
这个%$@#^$%&^...,不要着急,继续看哦!
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>
运行结果再次登场:
A Runtime Error has occurred.
Do you wish to Debug?
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方法:
String.prototype.trim()
{
return this.replace(/(^\s+)|(\s+$)/g, "");
}
</scritp>
显然JScript中的这种用法也是prototype pattern中的prototype不能解释和支持的。
这下对于JScript OOP中原型继承法的理解因该没有任何的障碍了吧?同时也应该明白为什么原型继承法有那么大的天生缺陷了吧?当然如果有任何问题,欢迎继续讨论。
附演示示例源代码:
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>
The End.
JScript中的prototype(原型)属性研究的更多相关文章
- java基础64 JavaScript中的Arrays数组对象和prototype原型属性(网页知识)
1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...
- js中的prototype原型解析
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- javascript之prototype原型属性
这个地方有点绕,仔细理解代码的意义. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- javascript中的prototype(原型)认识
prototype实现了对象与对象的继承,在JS中变量,函数,几乎一切都是对象,而对象又有_ptoro_属性,这个属性就是通常说的原型,是用来指向这个对象的prototype对象,prototype对 ...
- prototype原型属性
<script type="text/javascript"> /* 需求:想把getMax与searchEle方法添加 到数组对象中. functoin Array( ...
- javascript之prototype原型属性案例
练习: 给字符串对象添加一个toCharArray的方法,然后再添加一个reverse(翻转)的 方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)
通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法):造成了一定的资源浪费 function Obj(name,age){ this.name=name; ...
- jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析
首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492 ...
- javascript的基础知识及面向对象和原型属性
自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; cons ...
随机推荐
- android HttpGet 另开线程获取网络数据问题
android跨线程通讯可以使用android.os.Handler-android.os.Message这两类对象完成. public static void getResultForHttpGet ...
- Make a travel blog by Blogabond the theme of wordpress
We can record our place which we have ever went.If you want to know any more you can visit :http://w ...
- 蜂窝移动网络是什么,它和 Wi-Fi 有什么区别? 蓝牙和无线有什么区别?
蜂窝移动网络是什么,它和 Wi-Fi 有什么区别? 转自知乎用户的一个回答: 原题问的是"数据流量是什么",不知道怎么又被改成"蜂窝移动网络是什么"了.说下个人 ...
- dojo demo, server验证username是否已经被使用
这个demo有助于理解JS与server的协同工作. 文档结构如上图. 主要是三个文件: main.js table.html validateUserName.jsp (代码见文章末尾) 页面打 ...
- OA 权限控制
对于加入删除 初始化password等操作的权限 控制 第一种方法就是在每一个超链接前加 推断 如 <s:if test="#session.user.hasPrivilegeByNa ...
- android开发 不注意的异常
近期刚上班,做了一个应用,要上线.測试天天測试,天天有bug,个人总结了几个常常忽略的地方: 1:在 继承 BaseAdapter 的 @Override public int getCount() ...
- Android官方技术文档翻译——Ant 任务
本文译自Android官方技术文档<Ant Tasks>,原文地址:http://tools.android.com/tech-docs/ant-tasks. 由于是抽着时间译的.所以这篇 ...
- android soundpool 參数说明
SoundPool 类的构造函数例如以下: SoundPool(int maxStreams, int streamType, int srcQuality) 作用:实例化一个SoundPool 实例 ...
- 利用maven中resources插件的copy-resources目标进行资源copy和过滤
maven用可以利用如下配置进行资源过滤,pom.xml的配置如下: <build> <!-- 主资源目录 --> <resources> <resource ...
- 12款令程序员惊叹的CSS3效果库
最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...