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中给animation加更多的运作效果实例
Sep 05 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
jquery中radio checked问题
Mar 16 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php中错误处理操作实例分析
2019/08/23 PHP
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
python分割文件的常用方法
2014/11/01 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python类的动态修改的实例方法
2017/03/24 Python
python实现图书借阅系统
2019/02/20 Python
Django--权限Permissions的例子
2019/08/28 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
联想C++笔试题
2012/06/13 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
八一建军节感言
2014/02/28 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
软环境建设心得体会
2014/09/09 职场文书
2014年电厂工作总结
2014/12/04 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android