深入浅出理解JavaScript闭包的功能与用法

编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
这篇文章主要介绍了深入浅出理解JavaScript闭包的功能与用法,结合实例形式从变量、函数的内部属性与作用域链分析了javascript闭包的相关概念、功能与使用技巧,需要的朋友可以参考下

本文实例讲述了JavaScript闭包的功能与用法。分享给大家供大家参考,具体如下:

理解闭包关键是理解JS的对象的本质以及垃圾收集机制。函数也是对象,也有属性,通常执行一个函数时,局部变量在函数执行完后,内存会被回收,这是JS的垃圾收集机制决定的,如果想保存局部变量所占用的内存,就必须把保存在另一个不被回收的变量中,通常是全局变量。函数在创建时,内部属性[[Scope]]保存了作用域链,作用域链中包含外部函数以及全局对象的变量,被称为变量对象。所以把内部函数返回时,由于把函数保存了,所以内部属性[[Scope]]所保存的变量对象也就保存了而没有被回收,因此局部变量也就被保存了。

最简单的闭包:

function f1() {
 var i = 0;
 return function () {
 var j = 0;
 i++;
 console.log(i,j);
 };
}
var fn = f1();
fn();//1 0
fn();//2 0

还有诸如给元素添加事件,事件函数保存着外部函数的变量,通过这个特性可以让按钮显示被点击次数。

当然可以创建多层闭包,最内部函数保存所有外部函数以及全局对象的变量,但并不是任何地方都用闭包,因为其始终都带有[[Scope]]属性,所有比较占内存,所以在需要的时候才用。

闭包在模块化编程,为函数或对象创建私有变量的时候非常有用,可以避免全局污染以及变量命名冲突的问题。

值得注意的是因为[[Scope]]与函数有关,如上述例子,在两次执行f1函数把返回的函数保存在不同的变量中,其外部函数的变量是互不影响的。如:

function f1() {
 var i = 0;
 return function () {
 var j = 0;
 i++;
 console.log(i,j);
 };
}
var fn = f1();
fn();//1 0
fn();//2 0
var fn1 = f1();
fn1();//1 0
fn(); //3 0
fn1();//2 0

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:测试一下上述代码的运行效果,以加深对javascript闭包的认识。

更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板