JavaScript Closure 理解闭包的几个关键点

JavaScript闭包与计数器

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 62 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bebass/p/6370496.html

文章标签：

本文介绍JavaScript闭包的概念及其实现原理，探讨如何利用闭包解决计数器问题，确保计数器的值不被外部随意更改。

参考：　http://www.runoob.com/js/js-function-closures.html

http://kb.cnblogs.com/page/110782/

闭包的几个关键点:

1) 理解JavaScript变量作用域: 全局变量和局部变量

2) 代码结构: 外部function定义内部function, 内部function作为外部function的返回值

3) 内部function可以访问外部function的局部变量; 外部function的局部变量将一直存在于内存中

为什么使用闭包时外部函数的局部变量将一直存在于内存中？

因为外部function返回内部function的引用，并且这个引用又引用了外部function的局部变量，所以外部function的局部变量将一直存在内存中

计数器的困境:

设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。

你可以使用全局变量，函数设置计数器递增：

var counter = 0;

function add() {
    counter += 1;
}

add();
add();
add();

// 计数器现在为 3

计数器数值在执行 add() 函数时发生变化。

但问题来了，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。

如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值：

function add() {
    var counter = 0;
    counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违，输出的都是 1 !

使用闭包解决计数器问题:

var func = function () {
    var counter = 0;
    return function () {return counter += 1;}
}

var add = func();

add();
add();
add();

// 计数器为 3

或函数自我调用

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

转载于:https://www.cnblogs.com/bebass/p/6370496.html