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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
完美解决axios跨域请求出错的问题
Feb 05 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
什么是MVC,好东西啊
2007/05/03 PHP
php 301转向实现代码
2008/09/18 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
动态添加js事件实现代码
2009/03/12 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
详解python中sort排序使用
2019/03/23 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
在django中自定义字段Field详解
2019/12/03 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
材料员岗位职责
2014/03/13 职场文书
五一活动标语
2014/06/30 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
教师节祝酒词
2015/08/11 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电