Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >javascript闭包

javascript闭包

作者头像
用户1624346
发布于 2018-04-10 08:38:06
发布于 2018-04-10 08:38:06
77500
代码可运行
举报
文章被收录于专栏:calmoundcalmound
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
## 定义
**闭包:**有权访问另一个函数作用域中的变量的函数。
## 解析
相信刚看到这个定义,很多人肯定很迷糊,现在给出示例。
```
function func1(){
    var a = 1; 
    function func2(){
        a++;
        console.log(a);
    };
    return func2;
}
var res = func1();//等于func2
res();//等于func2(),输出2
```
首先定义了func1,func2两个函数,函数func1嵌套函数func2,然后再func1中定义变量a,再在func2中调用a。
这里的func2就是一个闭包,他有权访问func1函数中的变量。
## 作用
①可以读取函数内部的变量,且私有。

②变量可以长期驻扎在内存中。

现在我们需要实现一个变量完成计数器的任务,每次调用+1
#### 1.不使用闭包,使用全局变量完成
```javascript
var count =  1;
function func(){
    count++;
    console.log(count);
}
func();// 输出2
func();// 输出3
```
#### 2.不使用闭包,使用局部变量完成
```
function func(){
    var count =  1;
    count++;
    console.log(count);
}
func();// 输出2
func();// 输出2
```
很明显,只是使用局部变量无法达成我们要求,因为局部变量有一个性质,当函数执行完毕时局部变量即刻销毁,所以我们调用两次func函数,对于变量count来说每次都是新的。上面的全局变量方法虽然能够实现要求,但是不合符数据私有安全,而且也容易造成数据交错,不利于程序的移植。
这个时候就体现出闭包的作用性了,既可以保证数据私有,又可以长期驻扎内存中不会被销毁。
```javascript
function func1(){
    var count = 0;
    function func2(){
        count++;
        console.log(count);
    }
    return func2;
}
var obj = func1(); // func1() ==> func2
obj(); // 1
obj(); // 2
obj(); // 3
```
## 解惑
虽然闭包的概念很好理解,但是它衍生出来的程序却不一定很好理解,下面的疑问也是博主我在学习的时候遇到的,进行总结一下。
### 1.函数数组
```javascript
function func1(){
    var arr = new Array(); 
    for(var i = 0;i<3;i++){
        arr[i] = function(){
           return  i;
        }
    }
    return arr;
}
var array = func1();
console.log(array[0]()); //输出3
console.log(array[1]()); //输出3
console.log(array[2]()); //输出3
```
这段程序的本意也很明了,就是新建一个数组arr,并且将值012分别赋给a[0],a[1],a[2],但是结果却出乎意料。
这里比较通俗易懂的解释是,func1中的for循环先执行匿名函数并不执行(因为没有调用),当for循环执行完毕后,在我们范围array[i]()的时候才会调用arr[i]的匿名函数,而for循环结束以后i的值为3,匿名函数中由于i并没有赋值,所以他会从外部寻找i值,而这个i值此时是3,所以arr[0-2]的值均为3。造成的主要原因就是这里所有的匿名函数都调用的同一个func1中的同一个i。所以,我们可以创建另一个匿名函数强制让闭包行为符合预期
```javascript
function func1(){
    var arr = new Array(); 
    for(var i = 0;i<3;i++){
        arr[i] = function(num){
             return num;
        }(i);
    }
    return arr;
}
var array = func1();
console.log(array[0]); //输出0
console.log(array[1]); //输出1
console.log(array[2]); //输出2
```
注意下上面的输出不一样,array后面没有(),因为在匿名函数后面加了个(i),在函数后面加括号表示执行,所以此时func1()函数里面arr保存的是数值。

### 2.this问题
```javascript
var name = "The Window";
var object = {
    name:"My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
}
console.log(object.getNameFunc()()); // "The Window"
```
这里暂时理解为匿名函数的执行环境具有全局性的(其他更好的答案还没发现,如果有日后在改)。
修改
```
var name = "The Window";
var object = {
    name:"My Object",
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name;
        };
    }
}
console.log(object.getNameFunc()()); // "My Object"
```
这里将object的this先赋值给that,然后再匿名函数中使用that就可以找到object的this.

 **看了上面的关于this的代码,在看看下面**
```
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f() { 
        return scope;
    }
    return f();
}
console.log(checkscope()); // local scope
```
是不是混淆了,为什么上面的输出全局变量,而这段代码输出的局部变量,一定要注意上面的那个是this.name,而这里的代码只是输出变量,我们现在看看这段代码的this指向就明了了。
```
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f() {
        // 输出[object Window] global scope
        console.log(this + " " + this.scope); 
        return scope;
    }
    return f();
}
console.log(checkscope()); // local scope
```
所以对于this来说匿名函数总是指向window的,但是变量确实符合传递链的。所谓变量传递链就是层层向上查找,```
var a = 1;
function func1(){
   function func2(){
      console.log(a);
   }
   return func2;
}
func1()(); // 1
```
func2要输出a,但是func2没有,就向func1查找,发现func1也没有,就找到了全局的a。


关于全局变量还有局部变量的内容,以后还会专门写篇文章进行总结,尽情期待,由于闭包博主也是刚刚学,肯定有写的不周到的地方,希望大家能够指出,闭包的内容就到此为止。

#### 参考文献:
- \[1]《javascript高级程序设计》
- \[2]《javascript权威指南》
- \[3] [http://www.jb51.net/article/24101.htm](http://www.jb51.net/article/24101.htm)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-11-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
深入浅出JavaScript之闭包(Closure)
阅读目录 闭包-无处不在 闭包的概念 闭包的用途 闭包-封装 常见错误之循环闭包 思考题 闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面写下我的学习笔记~ 闭包-无处不在 在前端编程中,使用闭包是非常常见的,我们经常有意无意,直接或间接用到了闭包。闭包可以使传递数据更加灵活(比如处理一些点击事件) !function() { var localData = "lo
逸鹏
2018/04/11
5030
深入浅出JavaScript之闭包(Closure)
什么是JavaScript 的闭包???
Javascript的闭包是指一个函数与周围状态(词法环境)的引用捆绑在一起(封闭)的组合,在JavaScript中,每次创建函数时,都会同时创建闭包。闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰,即形成一个不销毁的栈环境。
AlbertYang
2020/09/08
1.2K0
javascript 闭包详解
一、什么是匿名函数 创建一个函数并将它赋值给变量functionName,这种情况下创建的函数,即匿名函数。(函数表达式就是匿名函数) 二、闭包 1.什么是闭包? 闭包就是能够读取其他函数内部变量的函数。 只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。 我们只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗! function f1 () { var num = 1; function f2() { console.
柴小智
2018/04/10
5600
JavaScript闭包
IMWeb前端团队
2017/12/29
7500
一篇文章带你了解JavaScript中的函数表达式,递归,闭包,变量,this对象,模块作用域
它的一个重要特点就是:函数声明提升,就是在执行代码前先读取函数声明,可以把函数声明放在调用它的语句后。
达达前端
2020/01/02
6190
学习Javascript闭包(Closure)
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 下面就是我的学习笔记,对于Javascript初学者应该是很有用的。 一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。   var n=999;   function f1(){     alert(n);   }   f1(); // 99
ruanyf
2018/04/12
5570
Javascript 闭包与变量
JavaScript中的作用域链的机制引出了一个副作用,即闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象,而不是某个特殊的值。
大道七哥
2019/09/10
4830
闭包与高阶函数
闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量。
梨涡浅笑
2020/10/27
3610
前端day20-JS高级(递归和闭包)学习笔记
01-递归 1.1-递归函数介绍 1.递归函数:一个函数自己调用自己 2.递归函数特点 a.一定要有结束条件,否则会导致死循环 b.能用递归函数实现的需求,就一定可以用循环调用函数来解决,只是代码简洁与性能不同而已 递归会影响性能,每一次递归都会进栈容易造成栈溢出,而循环不会 1.2-递归应用场景1(累加和,阶乘) <script> //1.求1-n之间的累加和 function getSum(n){ //递归 : 自己调用自己
帅的一麻皮
2020/05/10
1.3K0
JavaScript经典面试题之for循环click
经典重现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function onMyLoad(){ var arr = document.getElementsByTagName("p"); for(var i = 0; i < arr.length; i++){ arr[i].onclick = function()
司想君
2018/03/01
8220
js 闭包
闭包 目录 闭包的概念 闭包的用途 代码实例 注意点 两个代码片段的对比 闭包的概念 简单来说,闭包就是定义在一个函数内部的函数 闭包的用途 可以读取函数内部的变量 让这些变量的值始终保持在内存中 代码实例 function f1(){ var n = 999 // 匿名函数 fnAdd = function(){n += 1} // 一个闭包 function f2(){ console.log(n) }
星辉
2019/01/15
2.4K0
JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象
一、闭包(Closure) 1.1、闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9;方法:找到所有的div,
张果
2018/01/04
1.6K0
JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象
JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包
在JS中变量可以分为局部变量和全局变量,对于变量不熟悉的可以看一下我这篇文章:搞懂JavaScript全局变量与局部变量,看这篇文章就够了 作用域就是变量的使用范围,分为局部作用域和全局作用域,局部变量的使用范围为局部作用域,全局变量的使用范围是全局作用域。在 ECMAScript 2015 引入let 关键字之前,js中没有块级作用域---即在JS中一对花括号({})中定义的变量,依然可以在花括号外面使用。
AlbertYang
2020/09/16
3310
JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包
JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次。如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法。用于初始化一个新创建的对象的函数被称作构造函数。
Esofar
2018/09/05
3K0
高阶函数和闭包
函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。
星辰_大海
2020/10/26
6590
高阶函数和闭包
「JS高级」函数进阶
请注意,本文编写于 2060 天前,最后修改于 2060 天前,其中某些信息可能已经过时。
曼亚灿
2023/05/17
8950
「JS高级」函数进阶
JS闭包
闭包定义 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量,而这些变量是不会随上一级函数的执行完成而销毁。 前提条件 计算机中的内存变量如果有被引用着的话,则系统是不会将之回收的。只要我们能够一直持有这个引用,则就可以令局部变量避免被回收——这是闭包概念成立的前提 闭包用途 可以读取到函数内部的变量 可以让函数内部变量保持在内存中 避免全局变量的污染 私有成员的存在 注
苦咖啡
2018/04/28
2.7K0
闭包
闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量。
清出于兰
2022/01/05
4960
闭包
javascript深入理解js闭包
一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 Js代码 var n=999;   function f1(){     alert(n);   }   f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量。 Js代码 function f1(){     var n=999;   }   alert(n); // error
用户1257215
2018/01/30
1K0
javascript深入理解js闭包
深入理解JavaScript闭包之什么是闭包
在看本篇文章之前,可以先看一下之前的文章 深入理解JavaScript 执行上下文 和 深入理解JavaScript作用域,理解执行上下文和作用域对理解闭包有很大的帮助。
木子星兮
2020/07/27
8670
相关推荐
深入浅出JavaScript之闭包(Closure)
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档