javascript中的prototype属性使用说明(函数功能扩展)


Posted in Javascript onAugust 16, 2010

这是一个比较特殊的属性,Javascript中的继承一般都依赖这属性实现。
在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许['a','b','c'].push('d');这样的操作存在。类本身也是一个对象,也可以定义属性和方法:

function Test(){}; 
Test.str = 'str'; 
Test.fun = function(){return 'fun';}; 
var r1 = Test.str; // str 
var r2 = Test.fun(); // fun 
var inst = new Test(); 
var r3 = inst.str; // undefined 
var r4 = inst.fun(); // undefined

prototype就是一个作用于类的属性。默认情况下,所有Javascript类都会有一个prototype属性,但是类实例没有。
function Test(){}; 
var p1 = typeof(String.prototype); // object 
var p2 = typeof(Test.prototype); // object 
var p3 = typeof(new Test().prototype); // undefined 
var p4 = typeof(Object.prototype); // object 
var p5 = typeof(new Object().prototype); // undefined

取值与赋值
在Javascript中,当我们取一个对象中并不存在的属性或是方法时,它会试图查看该对象所对应的类中的prototype属性中是否包含该属性或是方法,而prototype也是一个Javascript对象,若是其中也没有,该prototype又会访问它对应的类的prototype,如此一级级地向上访问,直到找到需要的属性或方法,或是prototype属性为null。
function Test(){}; 
Test.test = 'str'; 
function pt1() 
{ this.test1 = 'pt1'; }; 
function pt2() 
{ this.test2 = 'pt2'; }; 
pt2.prototype.test3 = 'test3'; 
pt2.prototype.test1 = 'test4'; 
pt1.prototype = new pt2(); 
Test.prototype = new pt1(); 
var inst = new Test(); 
var p1 = inst.test; // undefined 
var p2 = inst.test1; // pt1 而不是 test4 
var p3 = inst.test2; // pt2 
var p4 = inst.test3; // test3

相对于取值,赋值就简单得多了。它并不会一层层向上查找prototype中的属性值,而直接对当前的实例进行赋值,没有则创建。
内置类的增强
在Javascript中并不能直接修改内置类的prototype。但是可以通过修改prototype的属性达到修改内置类行为的目的。
Array.prototype = {push:function(){alert('test1');}}; // 不起作用 
Array.prototype.push = function(){alert('test2');}; // 可以 
var test = new Array('a','b','c'); 
test.push('d'); // test2

一次可以插入多个元素的Array.push函数:
Array.prototype.pushs = function() 
{ 
var pos = this.length; 
for(var i=0; i<arguments.length; i++) 
{ 
this[++pos] = arguments[i]; 
} 
return this.length; 
} 
var test = new Array('a','b','c'); 
test.pushs('d','e');

值得注意的是,为内置类的prototype添加的函数,在使用for语句输出属性时,也会被显示:
var str; 
for(var i in test) 
{ 
str += (' ' + i); // '0 1 2 3 4 5 pushs' pushs自定义函数。 
}

但是可以通过hasOwnProperty()进行判断:
var str; 
for(var i in test) 
{ 
if(test.hasOwnProperty(i)) // 过滤掉pushs函数。 
{ str += (' ' + i); } 
}
]
一点点注意事项
前面说过,prototype是类的一个属性。更改prototype中的属性值,有可能会带来意想不到的灾难!
function Test(){} 
Test.prototype.num = 3; 
var inst1 = new Test(); 
var inst2 = new Test(); 
Test.prototype.num = 4; // 所有指向Test.prototype.num的值。 
var p1 = inst1.num; // 4 
var p2 = inst2.num; // 4 
inst1.num = 5; // 赋值,会为inst对象创建一个num属性。 
Test.prototype.num = 6; // 所有指向Test.prototype.num的值。 
var p3 = inst1.num; // 5 这里返回的是刚创建的inst1.num的值,而不是Test.prototype.num的值。 
var p4 = inst2.num; // 6 
delete Test.prototype.num; 
var p5 = inst1.num; // 5 inst1.num依然存在。 
var p6 = inst2.num; // undefined Test.prototype.num 被删除了。
Javascript 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 #Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 #Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 #Javascript
JavaScript实用技巧(一)
Aug 16 #Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 #Javascript
新手常遇到的一些jquery问题整理
Aug 16 #Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 #Javascript
You might like
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP设置进度条的方法
2015/07/08 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
JS实现手风琴特效
2020/11/08 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Python实现分割文件及合并文件的方法
2015/07/10 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python中map的基本用法示例
2018/09/10 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
Python如何读取、写入CSV数据
2020/07/28 Python
一套带答案的C++笔试题
2014/01/10 面试题
保护环境倡议书500字
2014/05/19 职场文书
2016年国陪研修感言
2015/11/18 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python