JavaScript prototype 属性详解与原型链应用

prototype属性与原型链机制

一、什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性，是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会”继承”赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢？ 对于对象的prototype属性的说明，JavaScript手册上如是说：所有 JavaScript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法)，但该对象不能被赋予不同的原型。然而，用户定义的对象可以被赋给新的原型。 在JavaScript中，prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象（Function），函数对象都有一个子对象prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。在通过new创建一个类的实例对象的时候，prototype对象的成员都成为实例化对象的成员。 1、该对象被类所引用，只有函数对象才可引用； 2、在new实例化后，其成员被实例化，实例对象方可调用。 同时，函数是一个对象，函数对象若直接声明成员，不用被实例化即可调用。 JavaScript通过一种链接机制来支持继承，而不是通过完全面向对象语言（如Java）所支持的基于类的继承模型。每个JavaScript对象都有一个内置的属性，名为prototype。prototype属性保存着对另一个JavaScript对象的引用，这个对象作为当前对象的父对象。

prototype实际应用与扩展示例

当通过点记法访问对象的函数或属性时，若对象自身未定义该成员，JavaScript引擎会检查该对象的prototype属性所引用的对象。若原型对象中仍不存在，则继续向上查找原型对象的原型，依次沿链搜索，直至找到目标或到达链尾。若链尾仍未找到，则返回undefined。这种继承结构体现为“has a”关系而非“is a”关系。 常见的内置类包括Array、Boolean、Date、Function、Number、Object和String等，其相关方法常被频繁使用。但在实际开发中，现有方法可能无法满足需求，prototype机制由此应运而生。以下通过由浅入深的实例讲解prototype的具体用法： 首先是一个基础示例： JavaScript代码 function func(){ func.prototype.name = “prototype of func”; } var f = new func(); alert(f.name); //prototype of func 先创建func对象，设置其prototype的name属性，随后实例化f并访问该属性。 1. 基础扩展示例： （1）数字相加： JavaScript代码 Number.prototype.add=function(num){ return (this+num);//这里的this指向Number }; alert((3).add(15));//18 （2）Boolean.rev()：用于布尔变量取反。 实现方法：Boolean.prototype.rev = function(){return(!this);} 试验：alert((true).rev()) -> 显示 false 2. 已有方法的实现与增强： (1) Array.push(new_element) 作用：在数组末尾添加新元素。 实现方法： Array.prototype.push = function(new_element){ this[this.length]=new_element; return this.length; } 进一步增强该方法，使其支持一次添加多个元素： 实现方法： Array.prototype.pushPro = function() { var currentLength = this.length; for (var i = 0; i < arguments.length; i++) { this[currentLength + i] = arguments[i]; } return this.length; } 同理，可通过增强Array.pop实现删除任意位置、任意数量的元素（此处省略具体代码）。 3. 新功能实现与深入应用： 在实际编程中，更多需求是添加新功能而非仅增强现有方法。以下举例说明： (1) String.left() 问题：VB中的left函数从字符串左侧截取n个字符，但无法区分全角和半角，导致中英文混排时截取长度不一致。 作用：从字符串左侧截取n个字符，支持区分全角和半角字符。 实现方法： String.prototype.left = function(num,mode){ if(!/\d+/.test(num))return(this); var str = this.substr(0,num); if(!mode) return str; var n = str.Tlength() – str.length; num = num – parseInt(n/2); return this.substr(0,num); } 试验：alert(“aa啦啦aa”.left(4)) -> 显示 aa啦啦 alert(“aa啦啦aa”.left(4,true)) -> 显示 aa啦 本方法调用了前文提到的String.Tlength()方法，展示了自定义方法间的组合能力。 (2) Date.DayDiff() 作用：计算两个日期变量之间的间隔（年、月、日、周）。 实现方法： Date.prototype.DayDiff = function(cDate,mode){ try{ cDate.getYear(); }catch(e){ return(0); } var base =60*60*24*1000; var result = Math.abs(this – cDate); switch(mode){ case “y”: result/=base*365; break; case “m”: result/=base*365/12; break; case “w”: result/=base*7; break; default: result/=base; break; } return(Math.floor(result)); } 试验：alert((new Date()).DayDiff((new Date(2002,0,1)))) -> 显示 329 alert((new Date()).DayDiff((new Date(2002,0,1)),”m”)) -> 显示 10 可进一步扩展以计算小时、分钟或秒。 (3) Number.fact() 作用：计算某数字的阶乘。 实现方法： Number.prototype.fact=function(){ var num = Math.floor(this); if(num<0)return NaN; if(num==0 || num==1) return 1; else return (num*(num-1).fact()); } 试验：alert((4).fact()) -> 显示 24 此例展示了递归在prototype方法中的可行性。 实例：取数组最大值： JavaScript代码 var oArr=new Array(); oArr=[100,190,199,189,3000,400,4001]; Array.prototype.MAX=function(){ var i,max=this[0]; for(i=1;i<this.length;i++){ if(max<this[i]){ max=this[i]; } } return max; } alert(oArr.MAX()); 实例：为用户自定义类添加方法： JavaScript代码 function TestObject() { this.m_Name = “ffffffffff”; } TestObject.prototype.ShowName = function() { alert(this.m_Name); }; var f=new TestObject(); f.ShowName(); 更新自定义类的prototype： JavaScript代码 function TestObjectA() { this.MethodA = function() { alert(‘TestObjectA.MethodA()'); } } function TestObjectB() { this.MethodB = function() { alert(‘TestObjectB.MethodB()'); } } TestObjectB.prototype = new TestObjectA(); 这被视为一种继承方式，后续可深入学习。 再看一个复杂示例： JavaScript代码 function RP() { RP.PropertyA = 1; RP.MethodA = function() { alert(“RP.MethodA ”); }; this.PropertyA = 100; this.MethodA = function() { alert(“this.MethodA”); }; } RP.prototype.PropertyA = 10; RP.prototype.MethodA = function() { alert(“RP.prototype.MethodA”); }; //以下执行 rp = new RP(); alert(RP.PropertyA);//警告结果为：1 RP.MethodA();//警告结果为：RP.MethodA alert(rp.PropertyA);//警告结果为：100 rp.MethodA();//警告结果为：this.MethodA delete RP.PropertyA; alert(RP.PropertyA);//警告结果为：undefined delete rp.PropertyA; alert(rp.PropertyA);//警告结果为：100 delete rp.MethodA; rp.MethodA();//警告结果为：RP.prototype.MethodA 最后是一个带参数的计算圆面积示例： JavaScript代码 <script type=“text/javascript”> function Circle(x,y,r){ this.x = x; this.y = y; this.r = r; //this.prototype = null ; /*这句代码可以看作是隐含存在的，因为javascript 中“类”的定义和函数的定义结构上没有差异，所以可以说，所有函数都隐藏有这样一个属性。*/ } Circle.prototype.area=function(){ return this.r*this.r*3.1415926; } var Circ=new Circle(0,0,5); alert(parseInt(Circ.area())); </script>