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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
取选中的radio的值
Jan 11 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
vue路由实现登录拦截
Mar 24 Vue.js
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/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
js调用设备摄像头的方法
2018/07/19 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
Python yield 使用方法浅析
2017/05/20 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python实现ip地址的包含关系判断
2020/02/07 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
元旦晚会策划方案
2014/02/18 职场文书
仓库规划计划书
2014/04/28 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
助学感谢信范文
2015/01/21 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书