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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
vue.js实现简单购物车功能
May 30 Javascript
如何利用node转发请求详解
Sep 17 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python分析作业提交情况
2017/11/22 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
PyCharm代码格式调整方法
2018/05/23 Python
python爬取微信公众号文章的方法
2019/02/26 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
介绍一下Python下range()函数的用法
2013/11/07 面试题
展览会邀请函
2015/02/02 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
政审证明范文
2015/06/19 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python