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 上下滚动广告
Jun 17 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
javascript 日期常用的方法
2009/11/11 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
村官工作鉴定评语
2014/01/27 职场文书
廉洁自律承诺书
2014/03/27 职场文书
辞职书格式样本
2015/02/26 职场文书
员工表扬信怎么写
2015/05/05 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis