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 相关文章推荐
理解JavaScript的prototype属性
Feb 11 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
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
Content-type 的说明
2006/10/09 PHP
php读取msn上的用户信息类
2008/12/05 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
优良学风班总结材料
2014/02/08 职场文书
给校长的建议书
2014/03/12 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
微信早安问候语
2015/11/10 职场文书
2019个人半年工作总结
2019/06/21 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang