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
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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&amp;mysql(六)
2006/10/09 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python带参数打包exe及调用方式
2019/12/21 Python
pytorch实现线性拟合方式
2020/01/15 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
个人自荐材料
2014/05/23 职场文书
夏季药店促销方案
2014/08/22 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python