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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
JS中递归函数
Jun 17 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
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
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
php实现的二分查找算法示例
2017/06/20 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
8种常用的Python工具
2020/08/05 Python
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
冰淇淋店的创业计划书
2014/02/07 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
赔偿协议书范本
2014/09/12 职场文书
反四风对照检查材料
2014/09/22 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
现货白银电话营销话术
2015/05/29 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python