js之继承

     在js中，我们可以通过prototype属性，实现继承，从而达到代码的复用。下面我们将从两个案例中介绍如何通过prototype属性实现继承。

案例一：给String类添加成员方法

#arguments 函数参数列表
String.prototype.format=function(){
 if(!arguments) return this;
    if(arguments.length==1){  // 只有1个数据
       return this.replace(new RegExp("\\{0\\}", "g"), arguments[0]);
    }
    var tmp = this;
    for(var i=0;i<arguments.length;i++){
     tmp = tmp.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
    }
    return tmp;
};

   当浏览器解析该js脚本后，所有的字符串实例都具备了format方法。测试代码如下：

#输出i am zhangsan
var str = "i am {0}";
alert(str.format("zhangsan"));

 

案例二：jquery自定义插件

    首先，理解jquery中的几个概念，jQuery.fn = jQuery.prototype是等价的，就像$是JQuery的简写一样，fn也是prototype的简写。

    1，为JQuery添加类方法：

#为jQuery类添加类方法，可以理解为添加静态方法。
$.extend({
    //初始化
    init:function(){
    },
   //销毁
   destory:function(){    
   }
})
等价于
(function($) {  
    $.init=function(){}
    $.destory=function(){}      
})(jQuery);  
或者
jQuery.init=function(){}
jQuery.destory=function(){}

    测试代码如下：

$.init();$.destory();

     2，为JQuery添加成员方法(自定义插件属于此范畴)：

     jQuery.fn.extend = jQuery.prototype.extend，用于扩展JQuery成员方法。

#常用方式一
(function(){
     //相加
    $.fn.add = function(options){
           var defaults = {a:0,b:0};//默认参数
           var opts = $.extend(defaults,options);//options传入参数
           return opts.a + opts.b;
     }
     //相减
    $.fn.dev = function(options){
           var defaults = {a:0,b:0};
           var opts = $.extend(defaults,options);
           return opts.a - opts.b;
     }
})(jQuery);

#常用方式二
(function(){
     $.fn.extend({
          add : function(options){
             var defaults = {a:0,b:0};//默认参数
             var opts = $.extend(defaults,options);//options传入参数
             return opts.a + opts.b;
          },
          dev : function(options){
             var defaults = {a:0,b:0};
             var opts = $.extend(defaults,options);
             return opts.a - opts.b;
         }
   });
})(jQuery);

    ps：这样每个JQuery对象都可以使用add和dev方法了;

    测试示例如下：

var result = $(window).add({a:3});
alert(result);//输出3

    ps：将dom文档对象强转为JQuery对象方式。示例：$(window)

           $.extend(defaults,options);//传入则以传入的为准，未传入则以默认的为准；例如测试示例中，没有传入参数b，则以默认的为准(即b取值为0)。