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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
Javascript 陷阱 window全局对象
Nov 26 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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的TS和NTS的区别
2019/03/13 PHP
php面向对象重点知识分享
2019/09/27 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
python中@property和property函数常见使用方法示例
2019/10/21 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python socket服务常用操作代码实例
2020/06/22 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
JAVA中的关键字有什么特点
2014/03/07 面试题
车祸赔偿收入证明
2014/01/09 职场文书
公司联欢会策划方案
2014/05/19 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
信息技术国培研修日志
2015/11/13 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏