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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
React进阶学习之组件的解耦之道
Aug 07 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
node使用async_hooks模块进行请求追踪
Jan 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP中PDO的错误处理
2011/09/04 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python openpyxl使用方法详解
2019/07/18 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
中层干部竞争上岗演讲稿
2014/01/13 职场文书
明星员工获奖感言
2014/08/14 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
初中语文教学随笔
2015/08/15 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
高中历史教学反思
2016/02/19 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
Github 使用python对copilot做些简单使用测试
2022/04/14 Python