一文了解JavaScript闭包函数

目录
  • 变量作用域
  • 闭包的概念
  • 闭包的用途
  • 闭包的缺点
  • 最后总结一下闭包的好处与坏处
  • 总结

变量作用域

要理解JavaScript闭包，就要先理解JavaScript的变量作用域。

变量的作用域有两种：全局的和局部的（全局变量和局部变量）

JavaScript中，在函数内部可以直接读取到全局变量。

var n=10
function fn(){
	alert(n)
}
fn()      //10

而在函数外部无法读取到函数内部的变量。

function fn(){
	var n=10;
}
fn()
alert(n)   //n is not defined    函数外部无法读取到函数内部的n

注意：函数内部使用var声明变量的时候，这个变量是局部变量，如果不使用var，那么这个变量就是一个全局变量。

例如：

function fn(){
	n=10;
}
fn()
alert(n)   //10

另外，函数的参数也是局部性的，只在函数内部起作用。

在正常情况下，我们是无法得到函数内部的局部变量的，只有变通方法才可以——在函数内部再声明一个函数。

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

f2函数可以得到f1函数内的所有局部变量，但是f1函数却无法得到f2函数内部的局部变量——JavaScript语言特有的“链式作用域”结构。（即子对象会一级一级地向上寻找所有父对象的变量），所以，父对象的所有变量，对于子对象都是可见的。

f2函数可以获取到父级函数f1的局部变量，那么如果把f2()函数返回，在函数f1外部就可以访问到f1()函数内部的变量了。

例如：

function f1(){
	var n=10;
	function f2(){
		alert(n)
	}
	return f2()
}
f1()           //页面弹出10

例子中的f2()函数就是一个闭包函数。

闭包的概念

由于作用域原因，我们无法在函数外访问函数里面定义的变量，但有事我们又有这个需求，因此就出现了闭包的概念。

闭包是指有权访问另一个函数作用域中的变量的函数。

在上面的例子中，内部函数f2就是一个闭包函数。

在本质上，闭包就是将函数内部和函数外部连接起来的桥梁。

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

闭包的用途

（1）可以读取父级作用域函数内部的变量；

（2）让变量的值始终保存在内存中（让局部变量变成全局变量），不被垃圾回收机制清除。

闭包的缺点

由于闭包会使函数中的变量都保存到内存中，垃圾回收机制不清理，内存消耗很大，所以不能滥用闭包，否则可能导致内存泄漏。

补充：

什么是内存泄漏？

程序的运行都是需要内存的。只要对内存提出要求，操作系统必须供给内存。
当应用程序中的一些代码变量不再需要用到内存时，但是没有被操作系统或者可用内存池回收，就说明它发生了内存泄漏。

即，当已经不再需要某块内存时，这块内存还存在着——内存泄漏

解决闭包引起的内存泄漏的问题：

在退出函数之前，将不使用的局部变量全部删除。

例如：将当前变量的值设置为‘null'，当垃圾回收机制启动时，会自动对这些值为‘null'的变量回收。

最后总结一下闭包的好处与坏处

好处

①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突

②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）

③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；

②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

总结

到此这篇关于JavaScript闭包函数的文章就介绍到这了,更多相关JavaScript闭包函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript闭包函数访问外部变量的方法

    JavaScript闭包函数访问外部变量的方法

    闭包是指有权访问另一个函数作用域中的变量的函数,但作用域的配置机制有一个需要注意的地方,即闭包只能取得包含函数中任何变量的最后一个值. 如以下案例: function create(){     var arr = new Array();        for (var i=0; i<10; i++){         arr[i] = function(){             return i;         };      }       return arr; }   var c

  • 深入理解javascript函数参数与闭包

    最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数.本人把学习的过程整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径,避免走弯路.内容有些多,但都是笔者对于函数的总结. 1.函数参数 1.1:参数是什么 1.2:参数的省略 1.3:参数默认值 1.4:参数传递方式 1.5:同名参数 1.6:arguments对象 2.闭包 2.1:闭包定义 2.2:立即调用的函数表达式(IIFE, Immediately

  • 谈谈JavaScript中的函数与闭包

    谈谈JavaScript中的函数与闭包

    闭包这东西,说难也难,说不难也不难,下面我就以自己的理解来说一下闭包 一.闭包的解释说明 对于函数式语言来说,函数可以保存内部的数据状态.对于像C#这种编译型命令式语言来说,由于代码总是在代码段中执行,而代码段是只读的,因此函数中的数据只能是静态数据.函数内部的局部变量存放在栈上,在函数执行结束以后,所占用的栈被释放,因此局部变量是不能保存的. Javascript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在定义函数时确定的.因此Javascript中函数对象不仅保存代码逻辑,还必

  • 详谈JavaScript 匿名函数及闭包

    1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 复制代码 代码如下: function double(x){     return 2 * x;   } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. 复制代码 代码如下: var double = new Functio

  • javascript中的return和闭包函数浅析

    高手绕道!这跟闭包本身没什么大的关系,也不知道怎么取标题,随便凑了个数,望见谅! 今天一个刚学js的朋友给了我一段代码问为什么方法不执行,代码如下: 复制代码 代码如下: function makefunc(x) { return function (){  return x; }}alert(makefunc(0)); 其实不是不执行,只是朋友的意思这里alert出来的应该是"0",而不是function (){return x;}.不是脚本写错了,只是没搞懂return,从当前函数

  • 一文了解JavaScript闭包函数

    目录 变量作用域 闭包的概念 闭包的用途 闭包的缺点 最后总结一下闭包的好处与坏处 总结 变量作用域 要理解JavaScript闭包,就要先理解JavaScript的变量作用域. 变量的作用域有两种:全局的和局部的(全局变量和局部变量) JavaScript中,在函数内部可以直接读取到全局变量. var n=10 function fn(){ alert(n) } fn() //10 而在函数外部无法读取到函数内部的变量. function fn(){ var n=10; } fn() aler

  • 轻松学习Javascript闭包函数

    闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的. 不过我们也还是从闭包的含义出发. 闭包是指函数有自由独立的变量.换句话说,定义在闭包中的函数可以"记忆"它创建时候的环境. 官方解释说完后,我们先来看一个简单计数的例子. var c = 0; function count(){ c++; } count();// 1 count();// 2 这个例子是利用了全局变量来实现,但是这里有个问题是,c这个变量也容易被其他方式所调用,这时

  • javascript 闭包函数做显隐内容

    New Document .a{ width:200px; font-size:12px; font-weight:bold; height:30px; line-height:30px; background:url(/images/default/header_bg.gif); margin-top:5px; } .a a{ text-Decoration:none;} .aa{ width:200px; height:100px; border:3px groove #91D2FF; di

  • 一文剖析JavaScript中闭包的难点

    目录 一.作用域基本介绍 1. 全局作用域 2. 函数作用域 3. 块级作用域 二.什么是闭包 1. 闭包的基本概念 2. 闭包产生的原因 3. 闭包的表现形式 三.如何解决循环输出问题 1. 利用 IIFE 2. 使用 ES6 中的 let 3. 定时器传入第三个参数 一.作用域基本介绍 ES6之前只有全局作用域与函数作用域两种,ES6出现之后,新增了块级作用域. 1. 全局作用域 在JavaScript中,全局变量是挂载在window对象下的变量,所以在网页中的任何位置你都可以使用并且访问到

  • 一文详解JavaScript闭包典型应用

    一文详解JavaScript闭包典型应用

    目录 1.应用 1.1 模拟私有变量 1.2 柯里化 1.3 偏函数 1.4 防抖 1.5 节流 2.性能问题 2.1 内存泄漏 2.2 常见的内存泄漏 3.闭包与循环体 3.1 这段代码输出啥 3.2 改造方法 4.总结 1.应用 以下这几个方面是我们开发中最为常用到的,同时也是面试中回答比较稳的几个方面. 1.1 模拟私有变量 我们都知道JS是基于对象的语言,JS强调的是对象,而非类的概念,在ES6中,可以通过class关键字模拟类,生成对象实例. 通过class模拟出来的类,仍然无法实现传

  • JavaScript 匿名函数（anonymous function）与闭包（closure）

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

  • 浅谈Javascript嵌套函数及闭包

    [嵌套函数] JavaScript允许嵌入的函数,允许函数用作数据,并且在函数词法作用域下面,可以产生与传统面向对象语言不同的惊人地方. 首先,JavaScript的函数是通过词法来划分作用域的,而不是动态的划分作用域的,于是,函数的是在定义它们的作用域中运行,而不是在执行它们的作用域中运行,所以,当嵌套函数和它的外围函数定义在同一个词法作用域中的时候,是很容易理解的.比如下面很平淡无奇的代码: 复制代码 代码如下: var x = 'global'; function f () { var x

  • 详解JavaScript匿名函数和闭包

    概述 在JavaScript前端开发中,函数与对其状态即词法环境(lexical environment)的引用共同构成闭包(closure).也就是说,闭包可以让你从内部函数访问外部函数作用域.在JavaScript,函数在每次创建时生成闭包.匿名函数和闭包可以放在一起学习,可以加深理解.本文主要通过一些简单的小例子,简述匿名函数和闭包的常见用法,仅供学习分享使用,如有不足之处,还请指正. 普通函数 普通函数由fucntion关键字,函数名,() 和一对{} 组成,如下所示: function

  • 一文掌握JavaScript数组常用工具函数总结

    目录 一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换 三. 判断是否为数组 四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则 六. 去重 1. 利用 ES6 

随机推荐