javascript中的prototype属性实例分析说明


Posted in Javascript onAugust 09, 2010

在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(); // undefinedprototype就是一个作用于类的属性。默认情况下,所有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动态给table添加、删除行 改进版
Jan 19 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 #Javascript
jquery下json数组的操作实现代码
Aug 09 #Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 #Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 #Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 #Javascript
javascript 防止刷新,后退,关闭
Aug 07 #Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 #Javascript
You might like
PHP中的类-什么叫类
2006/11/20 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
JS控件的生命周期介绍
2012/10/22 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
Bootstrap table分页问题汇总
2016/05/30 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python创建进程fork用法
2015/06/04 Python
python与php实现分割文件代码
2017/03/06 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
3分钟学会一个Python小技巧
2018/11/23 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python文件操作基础流程解析
2020/03/19 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
财政专业求职信范文
2014/02/19 职场文书
文化宣传方案
2014/03/13 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
文案策划专业自荐信
2014/07/07 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python