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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
使用javascript插入样式
Mar 14 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vuex存储token示例
Nov 11 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 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
PHP函数超时处理方法
2016/02/14 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
Yii2中datetime类的使用
2016/12/17 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python语法分析之字符串格式化
2019/06/13 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python实现代码统计程序
2019/09/19 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
社区党建工作方案
2014/06/10 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python