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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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判断变量类型常用方法
2012/04/24 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
js+css在交互上的应用
2010/07/18 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JavaScript Promise启示录
2014/08/12 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
python读取oracle函数返回值
2016/07/18 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Django URL参数Template反向解析
2020/11/24 Python
详解python中的异常和文件读写
2021/01/03 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
加工操作管理制度
2014/01/19 职场文书
投标承诺函范文
2015/01/21 职场文书
会计出纳岗位职责
2015/03/31 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android