javascript函数基础--扩展函数的方法,链式语法，函数节流/防抖,模拟重载，绑定函数bind（）

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);//Math对象后面使用对象this，通过（this）传入

})

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

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

   return this.replace(/^\s+|\s+$/g,'');//对象this使用replace方法

})

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()//  str.trim()这个去空格后还是字符串，可以直接点击字符串的方法

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);

}

}

3.1 防抖

<input placeholder="请输入">

// 防抖  将输入的多次操作变成一次

let inputInfo = document.querySelector('input');
inputinfo.addEventListener('input',antiShake(fn,2000));
function antiShake(fn,wait){
        let timeout = null;

        if(timeout) clearTimeout(timeout)

        timeout = setTimeout(fn,wait)
}

function fn(){ // 发起请求

 

}

3.2 节流

// 节流 一定时间内只调用一次函数 针对高频监听事件

let box = document.querySelectot(".box")

box.addEventlistener('touchmove',throttle(fn,2000))

function throttle(event,time){

  let timer = null

        return function(){

              if(!timer){

                 timer = setTimeout(()=>{

                        event();

                        timer = null;

                        },time)

               }

        }

}

function fn(){ // 发起请求

}

节流2，通过时间戳

function throttle(fn, wait) {

            let prev  = 0

            return function () {

                let now = Date.now();

                if (now - prev > wait) {

                    fn()
                    prev  = now

                }

            }

        }
        let btns = document.getElementById('csc');
        btns.addEventListener('click',throttle(a, 3000))
        function a(){
            console.log('123');
        }
 

4.使用Arguments模拟重载

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));