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常用函数 不错
Sep 08 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
js+css实现select的美化效果
Mar 24 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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之密码加密的几种方式
2015/07/29 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
PHP强制转化的形式整理
2020/05/22 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
深入浅析var,let,const的异同点
2018/08/07 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
详解python基础之while循环及if判断
2017/08/24 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python telnet登陆功能实现代码
2020/04/16 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
python合并多个excel文件的示例
2020/09/23 Python
如何用python写个模板引擎
2021/01/14 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
旅游网创业计划书
2014/01/31 职场文书
行政主管职责范本
2014/03/07 职场文书
保密协议书范本
2014/04/22 职场文书
小学家长意见怎么写
2015/06/03 职场文书
失恋33天观后感
2015/06/11 职场文书
学校体育节班级口号
2015/12/25 职场文书