javascript中的prototype属性使用说明(函数功能扩展)


Posted in Javascript onAugust 16, 2010

这是一个比较特殊的属性,Javascript中的继承一般都依赖这属性实现。
在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(); // undefined

prototype就是一个作用于类的属性。默认情况下,所有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.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
vue中监听返回键问题
Aug 28 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
javascript下高性能字符串连接StringBuffer类
Aug 16 #Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 #Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 #Javascript
JavaScript实用技巧(一)
Aug 16 #Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 #Javascript
新手常遇到的一些jquery问题整理
Aug 16 #Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 #Javascript
You might like
php长字符串定义方法
2012/07/12 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php数组指针操作详解
2017/02/14 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
关于js datetime的那点事
2011/11/15 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
使用javascript插入样式
2016/03/14 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
js简单时间比较的方法
2016/08/02 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
python实现在控制台输入密码不显示的方法
2015/07/02 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python得到单词模式的示例
2018/10/15 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python-openCV开运算实例
2020/07/05 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
大学生演讲稿
2014/04/25 职场文书
求职教师自荐书
2014/06/19 职场文书
英语课外活动总结
2014/08/27 职场文书
119消防日活动总结
2014/08/29 职场文书
高三化学教学反思
2016/02/22 职场文书