【JS】JavaScript的作用域和闭包

素颜马尾好姑娘i 2023-07-24 14:39 38阅读 0赞

# 作用域 #

在编程语言中，作用域控制着变量和参数可见性及生命周期。对程序员来说，这是一项重要的服务，因为它减少了名称冲突，并且提供了自动内存管理。

var foo =  function(){ 
    	var a=3,b=5;
    	var bar = function(){ 
    		var b=7,c=11;
    		//此时，a为3，b为7， c为11
    		a+=b+c;
    		//此时，a为21，b为7，c为11
    	}
    	//a=3,b=5,c没有定义
    	bar();
    	//此时，a为21，b为5
    }

由于JavaScript不支持块级作用域，所以不推荐延迟声明变量，最好的做法是在函数体的顶部就声明所有需要用到的变量。

# 闭包Closure #

作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量（除了 this 和 arguments），这种函数可以访问它被创建时所处的上下文环境，被称为闭包。如下示例：

step函数可以访问到 level 这个变量，并且在自己的作用域里面对level进行改变。

我们了解了闭包的原理。所以现在有一个需求，点击一个节点的时候，应该弹出一个对话框显示节点的序号，先看一个错误的例子：

<body>
    <button type="button" class="nodes">nodes</button>
    <button type="button" class="nodes">nodes</button>
    <button type="button" class="nodes">nodes</button>
    <script type="text/javascript"> //构造一个函数，用错误的方式给一个数组中的节点设置事件处理程序 //当点击一个节点的时候，按照预期，应该弹出一个对话框显示节点的序号 //但它总会显示节点的数目 var add_the_handles = function(nodes) { var i; for (i = 0; i < nodes.length; i += 1) { nodes[i].onclick = function(e){ alert(i) } } } add_the_handles(document.getElementsByClassName("nodes")) </script>
    </body>

上面这个例子中，我们在点击每一个按钮的时候，并没有显示每一个节点顺序值，而是显示了节点的数量3，这是因为事件处理器函数绑定了变量 i 本身，而不是函数在构造是的变量i的值。

我们对上面的例子进行改良：

<body>
    <button type="button" class="nodes">nodes</button>
    <button type="button" class="nodes">nodes</button>
    <button type="button" class="nodes">nodes</button>
    <script type="text/javascript"> //构造一个函数，用正确的方式给一个数组中的节点设置事件处理程序 //点击一个节点，将会弹出一个对话框显示节点的序号 var add_the_handles = function(nodes) { var helper = function(i) { return function(e) { alert(i) } } var i; for (i = 0; i < nodes.length; i += 1) { nodes[i].onclick = helper(i) } } add_the_handles(document.getElementsByClassName("nodes")) </script>
    </body>

避免在循环中创建函数，它可能只会带来无谓的计算，还会引起混淆，正如上面第一个错误的示例。我们可以先在循环之外创建一个辅助函数，让这个辅助函数再返回一个绑定了当前 i 值得函数，这样就不会混淆了。