关于JavaScript闭包学习

最新推荐文章于 2024-10-01 20:12:28 发布

Wikey丶

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量323

点赞数

分类专栏：前端艺术修炼 web开发之行文章标签： javascript 闭包

web开发之行同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端艺术修炼

2 篇文章 0 订阅

订阅专栏

本文转载于http://www.zuidaima.com/blog/3637023727832064.htm

1、前言：

JavaScript的闭包是该语言的一个学习难点，要理解闭包并且掌握如何使用它，首先要理解JavaScript另一个主要的概念—作用域。

我们都知道，JavaScript的作用域为全局变量与局部变量，一个函数体中，在函数内部声明的变量能够访问调用其外部的变量，但是在函数体外部，就无法对函数体内部的变量进行操作，显然这是很不合常理的，因为我们很多比较复杂的操作都需要调用各种形式的作用域变量，那么，我们就需要寻找一个方法来解决这个问题，而这个办法就是“闭包”。
很多地方对于闭包的概念解释都很深奥，所以一直搞不清楚到底什么才是闭包，其实说白了，闭包就是可以读取其他函数内部变量的函数。

2、全局变量和局部变量

<span style="font-size:14px">//全局变量
var num = 666;
function readNum(){
    alert(num);
}

//调用方法
readNum(); //666 </span>

在上面这个例子中，因为num是在方法体外部声明的，所以可以在方法体内部进行访问，所以这里进行方法调用后，可以输出666。

<span style="font-size:14px">//局部变量
function readNum(){
    var num = 666;
}
//在方法体外部调用方法体内部声明的变量
alert(num);  //error</span>

在上面这个例子中，在函数体外部进行变量输出时，是会产生错误的，因为作用域的问题，在函数体内部声明的变量，是无法被调用的，究其根本原因，是因为函数体执行完后，函数生命周期已经结束，函数体内部的变量已经被垃圾回收机制处理掉了，所以无法进行调用。

3、如何从外部读取到局部变量？

<span style="font-size:14px">//函数体1中创建第二个函数体2
function h1(){
    var num = 666;
    function h2(){
        alert(num);  //666
    }
}</span>

在上面这段代码中，我们在h1中定义了一个局部变量num，并为其赋值666，在h1中再次创建函数体h2，这个时候，函数体h1内的所有变量对于h2来说都是可见的，但是反过来的话就不行，h2中的局部变量超出h2的作用域是无法访问到的，其对h1是不可见的，这也是JavaScript语言特有的“链式作用域”结构，其主要的思想就是，子对象可以一级一级的向上访问到自己的父对象，父对象内的变量数据对于子对象都是可见的，反之则不成立！在子对象中可以访问到父对象内的变量和数据，那么我们将h2作为返回值，那么我们在函数体外部不是也可以访问到函数体内部的局部变量了吗？大家看下面的代码:

<span style="font-size:14px">//将h2作为返回值
function h1(){
    var num = 666;
    function h2(){
        alert(num);
    }
    return h2;
}

//进行函数体外部的调用，检测结果
var n = h1();
n();   //666</span>

这里写图片描述

4、到底什么是“闭包”？

在上一节代码中，我们在函数体h1中创建的函数体h2就是闭包，哈哈！
因为在JavaScript语言中，只有在函数内部定义的子函数才能访问到局部变量，所以可以说，“闭包就是在一个函数内部定义的函数”，这样讲的话，我们可以将“闭包”想象成一座联通函数体内部和函数外部的“桥梁”。“闭包”除了能够在起到在函数外部读取局部变量的作用外，它还能够确保函数的这些变量的值永远的保存在内存中。

<span style="font-size:14px">//闭包的两个用途
function h1(){
    var num = 666;
    changeTo = function(){
        var b = num;
        b.toString();
    }
    function h2(){
        alert(num);
    }
    return h2;
}
//进行函数调用
var n = h1();
n(); //666
changeTo();
n();  //"666"</span>