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 相关文章推荐
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
详解javascript数组去重问题
Nov 06 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
JavaScript实现省市联动效果
Nov 22 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根据年月获取季度的方法
2014/03/31 PHP
PHP强制转化的形式整理
2020/05/22 PHP
纯文字版返回顶端的js代码
2013/08/01 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
Python的subprocess模块总结
2014/11/07 Python
整理Python中的赋值运算符
2015/05/13 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python字典的常用方法总结
2019/07/31 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python操作redis数据库的三种方法
2020/09/10 Python
如何基于Python按行合并两个txt
2020/11/03 Python
《满井游记》教学反思
2014/02/26 职场文书
三八节主持词
2014/03/17 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
学生打架检讨书
2014/10/20 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
捐款仪式主持词
2015/07/04 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
中秋节感想
2015/08/10 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers