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 相关文章推荐
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
了解JavaScript中的选择器
May 24 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python如何在终端里面显示一张图片
2016/08/17 Python
python3实现微型的web服务器
2019/09/03 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
促销活动总结
2014/04/28 职场文书
社区清明节活动总结
2014/07/04 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
硕士论文致谢范文
2015/05/14 职场文书
运动会通讯稿600字
2015/07/20 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
SSM VUE Axios详解
2021/10/05 Vue.js
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技