javascript中的prototype属性实例分析说明


Posted in Javascript onAugust 09, 2010

在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(); // undefinedprototype就是一个作用于类的属性。默认情况下,所有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判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js实现图片放大展示效果
Aug 30 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 #Javascript
jquery下json数组的操作实现代码
Aug 09 #Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 #Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 #Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 #Javascript
javascript 防止刷新,后退,关闭
Aug 07 #Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 #Javascript
You might like
php URL编码解码函数代码
2009/03/10 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
node.js基础知识小结
2018/02/26 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
python实现电子词典
2020/03/03 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
电脑教师的教学自我评价
2013/11/26 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
小学科学教学反思
2014/01/26 职场文书
上班迟到检讨书
2014/09/15 职场文书
起诉状范本
2015/05/20 职场文书
2016年母亲节广告语
2016/01/28 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
php实例化对象的实例方法
2021/11/17 PHP
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python