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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
Angular表单验证实例详解
Oct 20 Javascript
angular select 默认值设置方法
Jun 23 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
深入理解javascript中的this
2021/02/08 Javascript
python抓取文件夹的所有文件
2018/02/27 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python unittest框架操作实例解析
2020/04/13 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
工厂采购员岗位职责
2014/04/08 职场文书
合作经营协议书
2014/04/17 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
军训拉歌口号
2014/06/13 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫