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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
javascript实现拼图游戏
Jan 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
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP培训要多少钱
2017/06/06 PHP
php给数组赋值的实例方法
2019/09/26 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python统计单词出现的次数
2018/04/04 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
中学生期末评语
2014/02/03 职场文书
亲子拓展活动方案
2014/02/20 职场文书
出纳员岗位职责
2014/03/13 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
Go 中的空白标识符下划线
2022/03/25 Golang
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang