JS对象类型-函数进阶篇-惰性函数
惰性函数和普通函数的区别是它的执行分支只在函数调用时执行一次,调用过程中函数会被另一种合适的执行方式覆盖,所以后面再调用这个函数时,就不会再执行分支语句。
使用场景
为了兼容各大浏览器,经常会在函数内部写大量if语句来检侧浏览器特性。比如为dom节点添加事件函数。
function addEvent(type, element, fn) {
if(element.addEventListener) {
element.addEventListener(type, fn, false)
}
else if(element.attachEvent){
element.attachEvent('on' + type, fn);
}
else{
element['on' + type] = fn;
}
}
上面的函数会在每次执行点击事件时,都进行浏览器能力检侧,理论上只要检测一次就知道支持哪个方法了,后面的点击事件不需要再执行一遍判断,下面改写一下。
惰性函数
在使用惰性函数重写上面的addEvent之前,先了解一下函数的重写:
function foo(){
console.log(1)
foo = function() {
console.log(2)
}
}
当第一次调用foo函数时,会打印1,然后函数会被覆盖掉。当第二次及以后调用时,会打印2。这就实现了函数的重写。
【addEvent()重写】
function addEvent(type, element, fn) {
if(element.addEventListener) {
addEvent = function(type, element, fn) {
element.addEventListener(type, fn, false)
}
}
else if(element.attachEvent){
addEvent = function(type, element, fn) {
element.attachEvent('on' + type, fn);
}
}
else{
addEvent = function(type, element, fn) {
element['on' + type] = fn;
}
}
return addEvent(type, element, fn);
}
当第一次调用addEvent函数时,会执行分支判断,新的函数覆盖掉原来的addEvent,以后再调用时执行的就是覆盖后的函数。
上面的函数有一个小问题,如果addEvent函数名称变化,内部的函数名要一起修改,这就比较麻烦。下面改写一下addEvent,把嗅探浏览器的操作函数提前执行,并返回一个包含了正确逻辑的函数。
var addEvent = (function () {
if (document.addEventListener) {
return function (type, element, fn) {
element.addEventListener(type, fn, false);
}
}
else if (document.attachEvent) {
return function (type, element, fn) {
element.attachEvent('on' + type, fn);
}
}
else {
return function (type, element, fn) {
element['on' + type] = fn;
}
}
})();
胖胖熊笔记,笔记已迁移
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥