javascript函数基础--扩展函数的方法,链式语法,函数节流,模拟重载

javascript允许为 基本数据类型 定义方法。通过为Object.prototype添加原型方法,该方法被所有的对象可用,这样的方式对 函数 数组 字符串 数字 正则表达式 和布尔值都适用,如:通过给Funciton.prototype增加方法,使该方法对 所有函数  可用,

Function.prototype.method=function(name,func){

 if(!this.prototype[name]){//避免覆盖基类的原生方法

   this.prototype[name]=func;

   return this;

    }

}

Function.prototype增加一个method()方法后不必使用prototype这个属性了然后调用method()方法直接为 各种 

 基本类型 添加方法,如javascript没有单独的整数类型,

我们可以通过Number.prototype添加一个integer()方法只提取数字中的整数

Number.method('integer',function(){

  return Math[this<0?'ceil':'floor'](this);

})

console.log((-10/3).integer());//-3

String.method('trim',funciton(){

   return this.replace(/^\s+|\s+$/g,'');

})

console.log(""+"  abc ".trim()+""); //"abc"

2.链式语法:让某些方法返回this而不是没有返回值(undefined),就可以进行级联操作  --链式语法

Function.prototype.method=function(name,func){

     if(!this.prototype[name]){//避免覆盖基类的原生方法

              this.prototype[name]=func;

             return this;

     }

}

String.method('trim',funciton(){

   return this.replace(/^\s+|\s+$/g,'');

})

String.method('writeln',funciton(){

   document.writeln(this)

   return this

})

String.method('alert',funciton(){

   return this;

})

var str="   abc  ";

str.trim().writeln().alert()

3.函数节流

让某些代码可以在 间断的情况下连续重复执行,实现的 方法是使用定时器对函数进行节流

var processor={

  timeoutId:null;

 performProcessing:function(){//实际执行的方法}

 process:function(0{

     clearTimeout(this.timeoutId);

     var that=this;

    this.timeoutId=setTimeout(function(){

    that.performProcessing();

   },100);

}

}

Processor.process();

简化:

function.throttle(mehtod,context){

   clearTimeout(method.tId);

     metod.tId=setTimeout(function(){

     method.call(context)

   })

}

函数节流解决一些代码(特别是事件)的无间断执行,这些问题严重影响浏览器的性能,可能造成浏览器变慢或直接崩溃

如resize mousemove  mouseover mouseout等事件的无间断进行,加入定时器将事件 节流(在事件触发时加入一个定时器来执行事件处理程序)

oTrigger.onmouserover=function(e){

       oContainer.autoTimeoutId&&clearTimeout(oContainer.autoTimeoutId);

       e=e||window.event;

    var target=e.target||e.srcElement;

   if((/li$/i).test(target.nodeName)){

     oContainer.timeoutId=setTimeout(function(){

        addTweenForContainer(oContainer,Otrigger,target);

    },300);

}

}

4.模拟重载

function  sayHello(){

    switch(arguments.length){

   case 0:

        return "Hello";

   case 1:

        return "Hello,"+arguments[0];

  case 2:

     return (arguments[1]=="cn"?"您好,":"Hello,")+arguments[0];

 }

}

sayHello();//"hello"

sayHello("Alex");//"hello,Alex"

sayHello("Alex","cn");  //"你好,Alex"

arguments.callee的使用:使匿名function可以被递归调用

function fibonacci(num){

     return (function(num){

      if(typeof num !=="number")

           return -1;

      number=parseInt(num);

      if(num<1)

          return -1;

     if(num==1||num==2)

        return 1;

     return arguments.callee(num-1)+arguments.callee(num-2);

   })(num)

}

fibonacci(100)

5.绑定函数bind()(纠正this上下文)

function bind(fn,context){

      return function(){

               return fn.apply(context,arguments)

    };

}

var handler={   

          message:'Event handled',

         handleClick:function(event){

            alert(this.message)

    }

};

var btn=document.getElementById('my-btn');

EventUtil.addHandler(btn,'click',handler.handleClick)//undefined,说明this指向了DOM按钮,没有指向handle

EventUtil.addHandler(btn,'click',funciton(event){//这里使用闭包

     handler.handleClick(event)

})

下面使用bind()

function bind(fn,context){

      return function(){

               return fn.apply(context,arguments)

    };

}

var handler={   

          message:'Event handled',

         handleClick:function(event){

            alert(this.message)

    }

};

var btn=document.getElementById('my-btn');

EventUtil.addHandler(btn,'click',bind( handler.handleClick,handler));

   

猜你喜欢

转载自blog.csdn.net/wenmin1987/article/details/83933006
今日推荐