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实现上传图片并预览的效果实现代码
Apr 11 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
Javascript验证方法大全
Sep 21 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
亲自动手实现vue日历控件
Jun 26 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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清除和销毁session的方法分析
2015/03/19 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
玩转vue的slot内容分发
2018/09/22 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Python应用库大全总结
2018/05/30 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
公司培训欢迎词
2014/01/10 职场文书
企业文化标语大全
2014/06/10 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
大队委员竞选稿
2015/11/20 职场文书
庭外和解协议书
2016/03/23 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
详解python字符串驻留技术
2021/05/21 Python