js中prototype用法详细介绍


Posted in Javascript onNovember 14, 2013

prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解:

首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类。我们所常见的类包括:数组变量(Array)、逻辑变量(Boolean)、日期变量(Date)、结构变量(Function)、数值变量(Number)、对象变量(Object)、字符串变量(String) 等,而相关的类的方法,也是程序员经常用到的(在这里要区分一下类的注意和属性发方法),例如数组的push方法、日期的get系列方法、字符串的split方法等等,
但是在实际的编程过程中不知道有没有感觉到现有方法的不足?prototype 方法应运而生!下面,将通过实例由浅入深讲解 prototype 的具体使用方法:

1、最简单的例子,了解 prototype:

(1) Number.add(num):作用,数字相加

实现方法:Number.prototype.add = function(num){return(this+num);}
试验:alert((3).add(15)) -> 显示 18

(2) Boolean.rev(): 作用,布尔变量取反

实现方法:Boolean.prototype.rev = function(){return(!this);}
试验:alert((true).rev()) -> 显示 false

是不是很简单?这一节仅仅是告诉读者又这么一种方法,这种方法是这样运用的。

2、已有方法的实现和增强,初识 prototype:

(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 来实现删除任意位置,任意多个元素(具体代码就不再细说了)

(2) String.length

作用:这实际上是 String 类的一个属性,但是由于 JavaScript 将全角、半角均视为是一个字符,在一些实际运用中可能会造成一定的问题,现在我们通过 prototype 来弥补这部不足。

实现方法:

String.prototype.cnLength = function(){
         var arr=this.match(/[^\x00-\xff]/ig);
         return this.length+(arr==null?0:arr.length);
     }

试验:alert("EaseWe空间Spaces".cnLength()) -> 显示 16

这里用到了一些正则表达式的方法和全角字符的编码原理,由于属于另两个比较大的类别,本文不加说明,请参考相关材料。

3、新功能的实现,深入 prototype:在实际编程中所用到的肯定不只是已有方法的增强,更多的实行的功能的要求,下面我就举两个用 prototype 解决实际问题的例子:

(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("EaseWe空间Spaces".left(8)) -> 显示 EaseWe空间
     alert("EaseWe空间Spaces".left(8,true)) -> 显示 EaseWe空

本方法用到了上面所提到的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能够实现的面向对象的特征有:
·公有属性(public field)
·公有方法(public Method)
·私有属性(private field)
·私有方法(private field)
·方法重载(method overload)
·构造函数(constructor)
·事件(event)
·单一继承(single inherit)
·子类重写父类的属性或方法(override)
·静态属性或方法(static member)

例子一(JavaScript中允许添加行为的类型):可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String

<script type="text/javascript">   
Object.prototype.Property = 1;   
Object.prototype.Method = function ()   
{   
    alert(1);   
}   var obj = new Object();   
alert(obj.Property);   
obj.Method();   
</script>   
<script type="text/javascript">
Object.prototype.Property = 1;
Object.prototype.Method = function (){ alert(1);} 
var obj = new Object();
alert(obj.Property);
obj.Method();
</script>

例子二(prototype使用的限制):在实例上不能使用prototype,否则发生编译错误
<script type="text/javascript">   
var obj = new Object();   
obj.prototype.Property = 1; //Error  
//Error  
obj.prototype.Method = function()   
{   
    alert(1);   
}   
</script>   <script type="text/javascript">var obj = new Object();obj.prototype.Property = 1; //Error//Errorobj.prototype.Method = function(){ alert(1);}</script>

例子三(如何定义类型上的静态成员):可以为类型定义“静态”的属性和方法,直接在类型上调用即可
<script type="text/javascript">   
Object.Property = 1;   
Object.Method = function()   
{   
    alert(1);   
}   alert(Object.Property);   
Object.Method();   
</script>   
<script type="text/javascript">Object.Property = 1;Object.Method = function(){ alert(1);} alert(Object.Property);Object.Method();</script>

例子五():这个例子演示了通常的在JavaScript中定义一个类型的方法
<script type="text/javascript">   
function Aclass()   
{   
this.Property = 1;   
this.Method = function()   
{   
    alert(1);   
}   
}   
var obj = new Aclass();   
alert(obj.Property);   
obj.Method();   
</script>  
<script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();alert(obj.Property);obj.Method();</script>

例子六(JavaScript中允许添加行为的类型):可以在外部使用prototype为自定义的类型添加属性和方法。
<script type="text/javascript">   
function Aclass()   
{   
this.Property = 1;   
this.Method = function()   
{   
    alert(1);   
}   
}   
Aclass.prototype.Property2 = 2;   
Aclass.prototype.Method2 = function  
{   
    alert(2);   
}   
var obj = new Aclass();   
alert(obj.Property2);   
obj.Method2();   
</script>   <script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}Aclass.prototype.Property2 = 2;Aclass.prototype.Method2 = function{ alert(2);}var obj = new Aclass();alert(obj.Property2);obj.Method2();</script>

例子八():可以在对象上改变属性。(这个是肯定的)也可以在对象上改变方法。(和普遍的面向对象的概念不同)
<script type="text/javascript">   
function Aclass()   
{   
this.Property = 1;   
this.Method = function()   
{   
    alert(1);   
}   
}   
var obj = new Aclass();   
obj.Property = 2;   
obj.Method = function()   
{   
    alert(2);   
}   
alert(obj.Property);   
obj.Method();   
</script>  
<script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ alert(2);}alert(obj.Property);obj.Method();</script>

例子九():可以在对象上增加属性或方法
<script type="text/javascript">   
function Aclass()   
{   
this.Property = 1;   
this.Method = function()   
{   
    alert(1);   
}   
}   
var obj = new Aclass();   
obj.Property = 2;   
obj.Method = function()   
{   
    alert(2);   
}   
alert(obj.Property);   
obj.Method();   
</script>   <script type="text/javascript">function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ alert(2);}alert(obj.Property);obj.Method();</script>

例子十(如何让一个类型继承于另一个类型):这个例子说明了一个类型如何从另一个类型继承。
<script type="text/javascript">   
function AClass()   
{   
       this.Property = 1;   
       this.Method = function()   
       {   
              alert(1);   
       }   
}   function AClass2()   
{   
       this.Property2 = 2;   
       this.Method2 = function()   
       {   
              alert(2);   
       }   
}   
AClass2.prototype = new AClass();   
var obj = new AClass2();   
alert(obj.Property);   
obj.Method();   
alert(obj.Property2);   
obj.Method2();   
</script>   
<script type="text/javascript">function AClass(){ this.Property = 1; this.Method = function() { alert(1); }} function AClass2(){ this.Property2 = 2; this.Method2 = function() { alert(2); }}AClass2.prototype = new AClass(); var obj = new AClass2();alert(obj.Property);obj.Method();alert(obj.Property2);obj.Method2();</script>

 例子十一(如何在子类中重新定义父类的成员):这个例子说明了子类如何重写父类的属性或方法。
<script type="text/javascript">   
function AClass()   
{   
       this.Property = 1;   
       this.Method = function()   
       {   
              alert(1);   
       }   
}   function AClass2()   
{   
       this.Property2 = 2;   
       this.Method2 = function()   
       {   
              alert(2);   
       }   
}   
AClass2.prototype = new AClass();   
AClass2.prototype.Property = 3;   
AClass2.prototype.Method = function()   
{   
       alert(4);   
}   
var obj = new AClass2();   
alert(obj.Property);   
obj.Method();   
</script>  
Javascript 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
require.js的用法详解
Oct 20 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 #Javascript
JS获取农历日期具体实例
Nov 14 #Javascript
提高jQuery性能的十个诀窍
Nov 14 #Javascript
优化Jquery,提升网页加载速度
Nov 14 #Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 #Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 #Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 #Javascript
You might like
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
Yii快速入门经典教程
2015/12/28 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript 日期常用的方法
2009/11/11 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
django 多数据库及分库实现方式
2020/04/01 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
质检部职责
2013/12/28 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
七夕情人节促销方案
2014/06/07 职场文书
酒店员工管理制度
2015/08/05 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers