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 1.5最新版本的改进细节分析
Jan 19 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JavaScript实现美化滑块效果
May 17 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php 函数中使用static的说明
2012/06/01 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
python 实现性别识别
2020/11/21 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
人民调解员培训方案
2014/06/05 职场文书
装修活动策划方案
2014/08/27 职场文书
2014年宣传工作总结
2014/11/18 职场文书
硕士学位论文评语
2014/12/31 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
仙境之桥观后感
2015/06/16 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL