好程序员技术分析JavaScript闭包特性详解

简介: 好程序员技术分析JavaScript闭包特性详解,今天来总结一下js闭包的那些事,以及遇到的坑和解决方法,希望对你有所帮助。是的,没看错标题,重要的事情要说三篇,JavaScript闭包。首先先简要总结闭包特性:函数的局部变量在函数返回之后仍然可用栈上的内存空间在函数返回之后仍在存在,不被回收给个例子。

好程序员技术分析JavaScript闭包特性详解,今天来总结一下js闭包的那些事,以及遇到的坑和解决方法,希望对你有所帮助。
是的,没看错标题,重要的事情要说三篇,JavaScript闭包。
首先先简要总结闭包特性:
函数的局部变量在函数返回之后仍然可用
栈上的内存空间在函数返回之后仍在存在,不被回收
给个例子。下面这段代码会返回一个函数的引用:
function sayHello2(name) {

var text = 'Hello ' + name; // Local variable
var sayAlert = function() { alert(text); }
return sayAlert;

}
say2 = sayHello2('Bob');
say2(); // alerts "Hello Bob"
对于这段代码,C程序员可能会认为sayAlert和say2一样,都是指向一个函数的指针。但实际上它俩有一个重要区别: 在JavaScript中,你可以认为一个函数的指针变量同时拥有两个指针。一个指向这个函数,另一个隐藏的指针指向一个闭包。
重点在于你的函数内是否引用的外部变量。
在JavaScript中,如果你在一个函数内定义一个新的函数,那么这个新的函数就是一个闭包。 对于C或者其他高级语言,函数执行结束并返回之后,它所占用的栈空间将被释放回收。函数内定义的局部变量将不再可用。但在JavaScript中,并不这样。如上所示,函数执行结束后,它所占用的栈空间并不会被全部回收。
上面是基本理论。更进一步,再来一个例子:
//code from http://www.goodprogrammer.org/html5_class.shtml function say667() {

// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;

}
var sayNumber = say667();
sayNumber(); // alerts 667
这个例子说明:闭包中使用的函数局部变量并非是值拷贝,而是引用。say667()执行结束之后number所在的那块内存的值为667,而sayNumber()是在say667()执行结束之后才执行,当它访问number所在的内存时,结果自然也是667。
再进一步,看看用closure时易发生的错误的例子:
function buildList(list) {

var result = [];
for (var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push( function() {alert(item + ' ' + list[i])} );
}
return result;

}

function testList() {

var fnlist = buildList([1,2,3]);
// Using j only to help prevent confusion -- could use i.
for (var j = 0; j < fnlist.length; j++) {
    fnlist[j]();
}

}
时刻保持清醒:变量是在内存里的,闭包使用的是内存的引用而不是那块内存的值拷贝。
当你在循环中定义函数(闭包)的时候得小心,它可能并不像你最开始想的那样工作。关键有两个:
子函数使用的是外部函数的局部变量的引用。
循环内只是定义了子函数,并没有执行这个字函数。
最后,来一个最抽象的例子:
function newClosure(someNum, someRef) {

// Local variables that end up within closure
var num = someNum;
var anArray = [1,2,3];
var ref = someRef;
return function(x) {
    num += x;
    anArray.push(num);
    alert('num: ' + num +
        '\nanArray ' + anArray.toString() +
        '\nref.someVar ' + ref.someVar);
  }

}
obj = {someVar: 4};
fn1 = newClosure(4, obj);
fn2 = newClosure(5, obj);
fn1(1); // num: 5; anArray: 1,2,3,5; ref.someVar: 4;
fn2(1); // num: 6; anArray: 1,2,3,6; ref.someVar: 4;
obj.someVar++;
fn1(2); // num: 7; anArray: 1,2,3,5,7; ref.someVar: 5;
fn2(2); // num: 8; anArray: 1,2,3,6,8; ref.someVar: 5;
这个例子说明,闭包的创建时机是在函数被调用的时候。每次函数调用都会生成一个新的闭包,也就是一块新的内存区域。因为函数每次调用都会新分配一块栈内存,这是一回事。
最后我自己来总结一下闭包:
函数的局部变量在其他地方被引用
闭包有两种基本情况:闭包的返回值是一个函数,它其中使用了该闭包的局部变量;闭包内定义了内部函数,内部函数引用了闭包的局部变量
每次函数调用,都会生成一个新的闭包,分配新的内存
实例:(滑过tab)
window.onload= function(){
var tits = $('#tabTit1 li');
var cons = $('#tabCon1 .con');
var len = cons.length;
var liChange = function(){
for(var n=0;ntits[n].className = tits[n].className.replace(/s*cur/g,'');
cons[n].className = cons[n].className.replace(/s*cur/g,'');
}
}
for(var i = 0; itits[i].i = i;
tits[i].onmouseover = function(){
liChange();
cons[this.i].addClass('cur');
tits[this.i].addClass('cur');
}
}
};

相关文章
|
5月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
135 1
|
2月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
142 70
|
1月前
|
数据采集 前端开发 JavaScript
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
72 17
|
2月前
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
146 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
2月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
94 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
监控 网络协议 算法
基于问题“如何监控局域网内的电脑”——Node.js 的 ARP 扫描算法实现局域网内计算机监控的技术探究
在网络管理与安全领域,监控局域网内计算机至关重要。本文探讨基于Node.js的ARP扫描算法,通过获取IP和MAC地址实现有效监控。使用`arp`库安装(`npm install arp`)并编写代码,可定期扫描并对比设备列表,判断设备上线和下线状态。此技术适用于企业网络管理和家庭网络安全防护,未来有望进一步提升效率与准确性。
63 8
|
1月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
74 11
|
5月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
182 62
|
5月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
160 4
下一篇
oss创建bucket