javaScript之惰性函数

发表于 阅读次数：

什么是惰性函数

JS惰性函数，是针对优化频繁使用的函数。常用于函数库的编写、单例模式之中。

需求

我们现在需要写一个foo函数，这个函数返回首次调用时的Date对象。

解决一：普通方法
1
2
3
4
5
6
var t;
function foo() {
    if(t) return t;
    t = new Date();
    return t;
}

这里有两个问题存在：

  1. 声明了一个全局变量
  2. 每次调用foo的时候都需要进行一次判断。
解决二：闭包

解决全局变量污染，闭包就非常的合适

1
2
3
4
5
6
7
8
var foo = (function(){
    var t;
    return function(){
        if(t) return t;
        t = new Date();
        return t;
    }
})();

解决了变量全局污染的问题，但是没有解决调用时必须进行一次判断的问题

解决三：函数对象

函数也是一种对象，利用这个特性，我们也可以解决这个问题

1
2
3
4
5
function foo() {
    if(foo.t) return foo.t;
    foo.t = new Date();
    return foo.t
}

依旧没有解决调用时必须进行一次判断的问题。

解决四：惰性函数

惰性函数就是解决每次都要进行判断的这个问题，解决原理很简单，重写函数

1
2
3
4
5
6
7
var foo = function() {
    var t = new Date();
    foo = function() {
        return t;
    };
    return foo();
};

更多应用

DOM事件添加中，为了兼容现代浏览器和IE浏览器，我们需要对浏览器环境进行一次判断：

1
2
3
4
5
6
7
8
//简化写法
function addEvent(type, el, fn) {
    el.addEventListener(type, fn, false) {
    }
    else if(window.attachEvent) {
        el.attachEvent('on' + type, fn);
    }
}

问题在于我们每当使用一次addEvent时都会进行一次判断。

利用惰性函数，我们可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addEvent(type, el, fn) {
    if(window.addEventListener) {
        addEvent = function(type, el, fn) {
            el.addEventListener(type, fn, false);
        }
    }
    else if(window.attachEvent) {
        addEvent = function(type, el, fn) {
            addEvent = function(type, el, fn) {
                el.attachEvent('on' + type, fn)
            }
        }
    }
}

我们也可以使用闭包的写法：

1
2
3
4
5
6
7
8
9
10
11
12
var addEvent = (function(){
    if(window.addEventListener) {
        return function(type, el, fn) {
            el.addEventListener(type, fn, false);
        }
    }
    else if(window.attachEvent) {
        return function(type, el, fn) {
            el.attachEvent('on' + type, fn);
        }
    }
})();

当我们每次都需要进行条件判断，其实只需判断一次，接下来的使用方式都不会发生改变的时候，想想是否可以考虑使用惰性函数。