js闭包

最新推荐文章于 2023-05-27 15:22:43 发布

transformer_WSZ

最新推荐文章于 2023-05-27 15:22:43 发布

阅读量200

点赞数

分类专栏： javascript 文章标签： js

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript变量分为全局变量和局部变量。局部变量可以用到闭包。

全局变量

函数可以访问函数内部定义的变量，例如:

function test{
    var a = 4;
    return a * a;
}

函数也可以访问外部定义的变量，例如：

var a = 4;
function test{
    return a * a;
}

结果均为 : 16
- 在第一个实例中，a 是一个局部变量。局部变量只能用于定义它的函数内部，对于其他的函数或脚本代码是不可用的。
- 在第二个实例中，a 是一个全局变量。在web页面中全局变量属于 window 对象。
- 全局变量和局部变量即便相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内部定义。

从外部读取局部变量

出于种种原因，我们有时候需要得到函数内的局部变量。但是，正常情况下是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数 :

function f1(){
    var n = 999;
    function f2(){
        alert(n);
    }
}

在上面的代码中，函数 f2 就被包括在函数 f1 内部，这时 f1 内部的所有局部变量，对 f2 都是可见的。但是反过来不行，f2 内部的局部变量，对 f1 就是不可见的。这就是js语言的“链式作用域”结构，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然 f2 可以读取 f1 中的局部变量，那么只要把 f2 作为返回值，我们就可以在 f1 外部读取它的内部变量了。

function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;
}
var result=f1();
result(); // 999

闭包

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

function f1() {
    var n = 999;
    nAdd = function () { n += 1 }
    function f2() {
        alert(n);
    }
    return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000

在这段代码中，result 实际上就是闭包 f2 函数。它一共运行了两次，第一次的值是 999，第二次的值是1000。这证明了，函数 f1 中的局部变量 n 一直保存在内存中，并没有在 f1 调用后被自动清除。

为什么会这样呢？原因就在于 f1 是 f2 的父函数，而 f2 被赋给了一个全局变量，这导致 f2 始终在内存中，而 f2 的存在依赖于 f1，因此f1 也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是 nAdd=function(){n+=1} 这一行，首先在 nAdd 前面没有使用 var 关键字，因此 nAdd 是一个全局变量，而不是局部变量。其次，nAdd 的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以 nAdd 相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

例1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

变量 add 指定了函数自我调用的返回字值。自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。add 变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护，只能通过 add 方法修改。

例2

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
alert(object.getNameFunc()());

通过 object.getNameFunc() 返回 function(){ return this.name; } 该匿名函数。但是这时候 this 指的是 window 全局对象，因此 this.name 指的是全局变量 var name = "The Window"，所以输出的值为 The Window。

例3

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
alert(object.getNameFunc()());

通过 object.getNameFunc() 返回 function(){ return this.name; } 该匿名函数。但是这时候 this 指的是 object 对象，因此 this.name 指的是局部变量 name : "My Object"，所以输出的值为 My Object。

参考自：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
http://www.runoob.com/js/js-function-closures.html

transformer_WSZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js闭包

JavaScript变量分为全局变量和局部变量。局部变量可以用到闭包。全局变量函数可以访问函数内部定义的变量，例如:function test{ var a = 4; return a * a;}函数也可以访问外部定义的变量，例如：var a = 4;function test{ return a * a;}结果均为 : 16 -
复制链接

扫一扫

专栏目录