1. 程式人生 > >javascript函式基礎--擴充套件函式的方法,鏈式語法,函式節流,模擬過載

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