博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript学习总结(十四)——JavaScript编写类的扩展方法
阅读量:6832 次
发布时间:2019-06-26

本文共 3689 字,大约阅读时间需要 12 分钟。

  在​J​a​v​a​S​c​r​i​p​t​中​可以使​用​类的p​r​o​t​o​t​y​p​e属性来​扩​展​类的属​性​和​方​法,在实际开发当中,当JavaScript内置的那些类所提供的动态方法和动态属性不满足我们实际开发时,我们就可以通过"prototype"属性给自定义类添加方法和属性或者扩展原有的类中的方法和属性。

一、扩展JavaScript内置类,添加动态方法

语法格式:

  类名.prototype.方法名 = function([param1],[param2],....[paramn]) {

    .................

  }

  [param1],[param2],....[paramn]这些参数都是可选的

  使用这种方式给类添加的扩展方法都是动态的,动态方法是针对类的实例对象的,所以调用必须要用"对象.方法名"的形式去调用,不能用"类名.方法名"的形式去调用!

1.1、使用prototype属性扩展String类

  String类是JavaScript内置的一个类,但是这个String类没有quote方法,此时就可以使用String类的prototype属性去扩展String类了,为String类添加一个实例方法(动态方法),这样每一个String类对象就都有quote方法了,这就达到了将String类扩展的效果,增强了String类的使用。

1 /*扩展为String类,为String类增加quote(两边加字符)方法*/2         String.prototype.quote = function(quotestr) {3             if (!quotestr) {4                 quotestr = "\"";5             }6             return quotestr + this + quotestr;7         };

测试String类新添加的quote方法

1 alert("abc".quote());      2 alert("abc".quote("|"));

测试结果:

1.2、使用prototype扩展Number类

1 Number.prototype.add=function(n){2     //哪个对象调用this所在的函数,那么this代表的就是哪个对象实例3     return this+n;4 }

测试Number类新添加的add方法

1 var i= new Number(10);//等价于var i=10;2 alert("i.Add(10).Add(30)的结果是:"+i.Add(10).Add(30));3 var b=40;4 alert("b.Add(90)的结果是:"+b.Add(90));

测试结果:

1.3、使用prototype扩展Array类

1 Array.prototype.findVal=function(val){ 2         var index=-1; 3         //哪个对象调用this所在的函数,那么this代表的就是哪个对象实例 4         for(var i=0;i

测试Array类新添加的findVal方法

1 var arr = new Array();2 arr[0]="孤傲苍狼";3 arr[1]="白虎神皇";4 arr[2]="灭世魔尊";5 alert("arr.FindVal(\"白虎神皇\")返回的索引是:"+arr.FindVal("白虎神皇"));

测试结果:

  以上三个小例子就是使用类的prototype属性扩展了String类,Number类,Array类,分别给这三个类添加了本身不存在的quote,add,findVal方法,JavaScript所有的类都可以使用prototype去扩展,当觉得类本身提供的方法和属性不满足实际应用需求时,就可以根据需要进行扩展,为类添加新的方法和属性,增强类的使用功能!

二、扩展JavaScript内置类,添加静态方法

  JavaScript是可以给类添加静态的扩展方法的,语法格式如下:

  类名.方法名 = function([param1],[param2],....[paramn]) {

    .................

  }

  [param1],[param2],....[paramn]这些参数都是可选的

  使用这种方式给类添加的扩展方法都是静态的,动态方法是针对类的实例对象的,所以调用必须要用"对象.方法名"的形式去调用,而静态方法是针对类的,用"类名.方法名"的形式去调用!

  C#中的String类有一个静态的Format方法非常强大,在拼接字符串时特别方便,JavaScript的String类并没有Format方法,但是我们可以去扩展String类,为String类添加类似C#中的String类的静态的Format方法

范例:扩展String类,添加Format静态方法,模仿C#中的String.Format方法

1 // ---------------------------------------------------------------------- 2 //  3 // 扩展String类,添加Format静态方法,模仿C#中的String.Format方法 4 //  5 // 
str
6 // ---------------------------------------------------------------------- 7 if (!String.Format) { 8 String.Format = function () { 9 if (arguments.length == 0) {10 return null;11 }12 var str = arguments[0];13 if (arguments[1] instanceof Array) {14 var arr = arguments[1];15 for (var i = 0; i < arr.length; i++) {16 var re = new RegExp('\\{' + i + '\\}', 'gm');17 str = str.replace(re, arr[i]);18 }19 } else {20 for (var i = 1; i < arguments.length; i++) {21 var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');22 str = str.replace(re, arguments[i]);23 24 }25 }26 return str;27 }28 }

测试为String类扩展的Format静态方法

1 var str="我是{0},我在总结{1}和{2}的学习,我很喜欢{3}这2门语言!";2 //使用"类名.方法名"的形式去调用类的静态方法3 str = String.Format(str,"孤傲苍狼","java","JavaScript","'java'和'JavaScript'");//把str中的占位符{0},{1},{2},{3}用具体的内容替换掉4 alert(str);

运行结果:

  

  这个小例子就是扩展了String类,给String类添加了一个静态的Format方法,JavaScript所有的类都可以添加静态扩展方法,当觉得类本身提供的静态方法和静态属性不满足实际应用需求时,就可以根据需要进行扩展,为类添加新的静态方法和静态属性,增强类的使用功能!

  以上就是对JavaScript编写类的扩展方法的总结,大家可以根据实际情况对JavaScript内置的那些类编写扩展方法,满足在开发中实际需求!有一个比较著名的prototype.js库就是针对JavaScript内置的那些类进行扩展,编写了大量的扩展方法!学习编写JavaScript扩展方法时,可以去多多参考prototype.js的写法,我本人现在也在看prototype.js的源码,过段时间再和大家分享我的心得吧!文章中如果有写得不对的地方,欢迎朋友们指正,感激不尽!

转载地址:http://dbtkl.baihongyu.com/

你可能感兴趣的文章
DNS故障处理一例(转)
查看>>
单点登录CAS解决方案<一>:纯净CAS-Server
查看>>
create instance 生成创建虚拟机从nova到调用libvirt流程(pycharm debug):
查看>>
一道关于计算机如何做加法的面试题
查看>>
疗伤之设计模式
查看>>
我的友情链接
查看>>
如何设计Android App测试用例
查看>>
SpringMvc+Hibernate+Mysql保存表情字符(昵称)到数据库报错的问题?
查看>>
微软2016校园招聘在线笔试 B Professor Q's Software [ 拓扑图dp ]
查看>>
Java Eclipse常规设置
查看>>
ios官方菜单项目重点剖析附项目源码
查看>>
构建javaweb项目
查看>>
大大大大板子
查看>>
使用博客园时,如何在自己的博客上显示头像?
查看>>
【作业】简单绘图程序
查看>>
二分查找
查看>>
复制文字,链接,剪贴板的使用
查看>>
正向与反向代理的理解
查看>>
菜鸟学习WPF(一):开篇
查看>>
*Algs4-1.5.26Erdos-Renyi模型的均摊成本图像-(未读懂题)
查看>>