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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
BootStrap中
Dec 10 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 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
关于js与php互相传值的介绍
2013/06/25 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Python 初始化多维数组代码
2008/09/06 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python实现猜拳小游戏
2020/04/05 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
python3.4中清屏的处理方法
2020/07/06 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
文艺演出策划方案
2014/06/07 职场文书
保护环境的标语
2014/06/09 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
外科护士长工作总结
2015/08/12 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS