1. 程式人生 > >js之惰性函數

js之惰性函數

console class lse com log pre 代碼 element func

惰性函數是js函數式編程的另一個應用,惰性函數表示函數執行的分支只會在函數第一次調用的時候執行,他的應用情景在於當我們遇到一個需要判斷場景去調用不同的方法時,避免重復進入函數內的if判斷,也就是說if判斷只進行一次,之後函數就會被分支裏的代碼替換掉

我們先看個例子

        function a(){
               console.log("this is a");
           }
           function a(){
               console.log("this is other a");
           }
           a(); 
//輸出this is other a //同名函數被覆蓋

在js中,不能存在同名函數,因為在創建詞法作用域時,函數聲明就會被提前,所以上面的例子中只輸出this is other a。

我們再看下面這個例子

               function b(){
               console.log(b);
               b1 = function(){
                   console.log(other b);
               }
           }
           b(); // 執行第一個b函數
b1();// 執行第二個函數

我們可以看見這裏執行了連個函數,b和b1 如果把b1換成b的話,我們就可以達到重寫b的目的,利用這步,我們就可以得到惰性函數

  function person(name){
                if(name=="jack"){
                    return  person = function(){
                        console.log("this is jack");
                    }
                }else if(name == "
tom"){ return person = function(){ console.log("this is tom"); } }else{ return person = function(){ console.log("this is others"); } } } person("jack")(); console.log(1); person();

技術分享圖片

這裏我們可以看出來,當第一次執行完person函數後,他就被後面的person函數替代了,此時的person函數只剩下console這個輸出了,這裏就是一個惰性函數的小例子

那麽惰性函數的實際應用在那裏呢,我們可以從實際的dom操作中感受,添加監聽事件的方法有兩種,ie和其他的

function addEvent(type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    }
    else if(element.attachEvent){
        element.attachEvent(on + type, fun);
    }
    else{
        element[on + type] = fun;
    }
}

這個函數會在每次運行時根據瀏覽器的不同選定相應的監聽器,但每次運行時所有的代碼都要跑一遍,這明顯不夠好,我們可以利用函數重寫,當函數第一次運行時,我們就判斷出來了瀏覽器支持哪種監聽器,以後只要將方法替換當前的方法就可以了

function addEvent(type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent(on + type, fun);
        }
    }
    else{
        addEvent = function (type, element, fun) {
            element[on + type] = fun;
        }
    }
    return addEvent(type, element, fun);
}

如上,就可以實現惰性函數的特性,只執行一次。

js之惰性函數