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 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js倒计时小程序
Nov 05 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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
Terran兵种对照表
2020/03/14 星际争霸
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
微信小程序switch组件使用详解
2018/01/31 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python学生信息管理系统修改版
2018/03/13 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
python 实现简单的FTP程序
2019/12/27 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python 如何创建一个线程池
2020/07/28 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
青年文明号服务承诺
2014/03/31 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
领导新年致辞2016
2015/07/29 职场文书
python如何正确使用yield
2021/05/21 Python