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 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 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
mysql 字段类型说明
2007/04/27 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
nodejs aes 加解密实例
2018/10/10 NodeJs
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python脚本实现格式化css文件
2015/04/08 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python实现堆排序的实例讲解
2020/02/21 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
大专学生推荐信范文
2013/11/19 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
董事长秘书工作总结
2015/08/14 职场文书
《山中访友》教学反思
2016/02/24 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
golang中字符串MD5生成方式总结
2021/07/04 Golang
redis数据结构之压缩列表
2022/03/21 Redis