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 相关文章推荐
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 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和XSL stylesheets转换XML文档
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
深入理解Python3中的http.client模块
2017/03/29 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
报关报检委托书
2014/04/08 职场文书
家长通知书教师评语
2014/04/17 职场文书
村抢险救灾方案
2014/05/09 职场文书
1000字打架检讨书
2014/11/03 职场文书
客户答谢会致辞
2015/01/20 职场文书
商务司机岗位职责
2015/04/10 职场文书
《小小的船》教学反思
2016/02/18 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL