JavaScript 专题之惰性函数

需求

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

解决一：普通方法

var t;
function foo() {if (t) return t;t = new Date()return t;
}

问题有两个，一是污染了全局变量，二是每次调用foo的时候都需要进行一次判断

解决二：闭包

我们很容易想到用闭包避免污染全局变量

var foo = (function() {var t;return function() {if (t) return t;t = new Date();return t;}
})();

解决三：函数对象

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

function foo() {if (foo.t) return foo.t;foo.t = new Date();return foo.t;
}

解决四：惰性函数

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

var foo = function() {var t = new Date();foo = function() {return t;};return foo();
};

更多应用

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

// 简化写法
function addEvent (type, el, fn) {if (window.addEventListener) {el.addEventListener(type, fn, false);}else if(window.attachEvent){el.attachEvent('on' + type, fn);}
}

问题在于我们每当使用一次addEvent都会进行一次判断利用惰性函数，我们可以这样做

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) {el.attachEvent('on' + type, fn);}}
}

当然我们也可以使用闭包的形式

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

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

var addEvent = (function(){if (window.addEventListener) {addEvent=function (type, el, fn) {el.addEventListener(type, fn, false);}el.addEventListener(type, fn, false);}else if(window.attachEvent){addEvent=function (type, el, fn) {el.attachEvent('on' + type, fn);}el.attachEvent('on' + type, fn);}
})();

其实就是把addEvent函数的内容重写，之前是有判断，但第一次判断之后，就重新写了addEvent，他就紧紧剩下一个 el.attachEvent(‘on’ + type, fn)或（el.addEventListener(type, fn, false)）这条语句

JavaScript 专题之惰性函数相关推荐

JavaScript 专题之函数柯里化
JavaScript 专题系列第十三篇,讲解函数柯里化以及如何实现一个 curry 函数定义维基百科中对柯里化 (Currying) 的定义为: In mathematics and comput ...
JavaScript 惰性函数
概念惰性函数,表示函数执行的分支只会在函数第一次调用的时候执行.在一次调用过程中,该函数会被覆盖威另一个按照合适方式执行的函数.这样对原函数的调用就不会再经过执行的分支了. 简单的来说,就是可以记录 ...
JavaScript专题之从零实现jQuery的extend
JavaScritp 专题系列第七篇,讲解如何从零实现一个 jQuery 的 extend 函数前言 jQuery 的 extend 是 jQuery 中应用非常多的一个函数,今天我们一边看 jQu ...
JavaScript 专题之如何判断两个对象相等
JavaScript 专题系列第十二篇,讲解如何判断两个参数是否相等前言虽然标题写的是如何判断两个对象相等,但本篇我们不仅仅判断两个对象相等,实际上,我们要做到的是如何判断两个参数相等,而这必然会 ...
export function函数传参_04 js高阶函数（惰性函数、柯里化函数、compose函数）和单例设计模式...
高阶函数的定义在<javascript设计模式和开发实践>中是这样定义的. 函数可以作为参数被传递: 函数可以作为返回值输出. 结合这两个特点,首先想到的肯定是回调函数,回调函数也是高阶 ...
web前端html怎么求最大值和最小值,第8篇-JavaScript专题之如何求数组的最大值和最小值...
前言取出数组中的最大值或者最小值是开发中常见的需求,但你能想出几种方法来实现这个需求呢? Math.max JavaScript 提供了 Math.max 函数返回一组数中的最大值,用法是: 值得注 ...
JavaScript 专题（九）数组中查找指定元素
JavaScript 专题(九)数组中查找指定元素上一篇文章中,我们了解了数组扁平化的思想,并学习了 lodash 是如何处理数组扁平化的. 这次我们来讨论在数组中查找元素时所用的一些方法,并且参考 ...
JavaScript专题（二）：深入理解iframe
原文地址为: JavaScript专题(二):深入理解iframe 一目的 iframe是网页布局中重要的元素,是解决一些常见前端问题的必修课,而iframe总是让人捉摸不透,不好掌握.关于ifra ...
JavaScript专题（七）类型转换
JavaScript专题之最让人头疼的类型转换目录前言一.类型转换是什么? 二.原始值转换的基本规则三.对象转字符串和数字四.常见的类型转换运算符五.常见的类型转换操作写在最后前言在 ...