JavaScript闭包原理与使用介绍

目录
  • 1. 认识闭包
  • 2. 变量的作用域和生命周期
    • 2.1 变量的作用域
    • 2.2 变量的生命周期
  • 3. 闭包的概念及其作用
    • 3.1 闭包的概念
    • 3.2 闭包的应用
      • 3.2.1 保存私有变量
      • 3.2.2 使用闭包实现节流

1. 认识闭包

闭包有一个很经典的场景:使用 for循环给上面5个按钮绑定点击事件。

    <button type="button" class='button'>按钮</button>
    <button type="button" class='button'>按钮</button>
	<button type="button" class='button'>按钮</button>
	<button type="button" class='button'>按钮</button>
	<button type="button" class='button'>按钮</button>
    var buttons = document.getElementsByClassName('button');
			for (var i = 0; i < 5; i++) {
				buttons[i].onclick = function() {
					console.log(i+1);
				}
			}

分别点击5个按钮控制台输出的都是5,由于i的作用域使的问题使得代码没有按照预期进行输出。

使用闭包对代码进行改进

var buttons = document.getElementsByClassName('button');
			for (var i = 0; i < 5; i++) {
				buttons[i].onclick = (function(i){
					return function(){
						console.log(i+1);
					}
				}(i))
			}

再分别点击5个按钮控制台依次输出1、2、3、4、5

2. 变量的作用域和生命周期

2.1 变量的作用域

  • 作用域即是变量的作用范围
  • 使用var关键字声明的变量会提升到全局,函数里面的变量只有在函数内部能够访问
  • 使用let和和const关键字声明的变量不提升

上面的代码中for循环中的变量i是使用var声明的,会提升至全局,最终打印输出的都是全局的i，而在点击按钮之前for循环已经走完,因此输出的都是5。

在使用闭包改进的时候使用立即执行函数将每次循环的i保留在立即执行函数的内部,最终输出的就是正确的结果。

2.2 变量的生命周期

全局作用域的变量的生命周期是永久的,函数内的变量在函数执行后被回收销毁。

产生闭包的时候由于函数的返回值(函数)仍然引用着函数的局部变量,导致即使函数执行完函数内的变量仍然存在。闭包正是利用这一特性。

3. 闭包的概念及其作用

3.1 闭包的概念

经过上面的讲述不难发现闭包主要涉及变量的生命周期和作用域。形成闭包的三个必要条件:

  • 函数返回值是个函数
  • 被返回的函数内引用了函数的局部变量
  • 被返回的函数在外部被调用

3.2 闭包的应用

3.2.1 保存私有变量

Javascript中没有private关键字,但可以通过闭包将变量保存在函数内部,从而达到保护变量的作用。

	var getUserInfo = (function() {
		var userInfo = {
			name: 'ian',
			age: 21
		};
		return function() {
			return userInfo;
		}
	}());
	console.log(getUserInfo()); //{name:'ian',age:21}
	console.log(userInfo); //Uncaught ReferenceError: userInfo is not defined

3.2.2 使用闭包实现节流

	function throttle(fn,delay){
			var timer=null;
		  return function(){
			  if(!timer){
				  timer=setTimeout(()=>{
				  	fn();
					timer =null;
				  },delay)
			  }
		  }
		}
		window.onresize= throttle(function(){
			console.log('resize')
		},500)

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

赞 (0)

相关推荐

  • Javascript闭包的作用与使用方法浅析

    目录 一.变量的作用域 二.如何从外部读取局部变量 js 闭包(closure)是Javascript语言的一个难点,也是它的特色. 闭包的作用:通过一系方法,将函数内部的变量(局部变量)转化为全局变量. 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. 一.变量的作用域 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. var n =999; function f1(){ alert(n); } f1();

  • 详解JavaScript中的闭包是如何产生的

    目录 闭包的产生 多个内部函数共享一个闭包对象 结尾 这次从内存管理的角度来看看,闭包是怎么产生的. 我们知道,在调用函数时,其实会产生临时的 调用栈.这些调用栈保存的是 执行上下本,并实际保存在 栈内存 中. 每执行一个函数,函数内的局部临时变量会临时保存起来.如果此时函数又调用了另一个函数,另一个函数下的局部变量也要保存下来,就这样,我们产生了栈. 当一个函数执行完后,它对应的局部临时变量就会被销毁. 局部变量保存下来,是为了保护上下文现场. 举例说明一下: function a() { c

  • 详解JavaScript中的作用域链与闭包

    目录 作用域链 词法作用域 闭包 作用域链 首先来看看这段代码: var a = '喜羊羊'; function A(){ console.log(a); a = '美羊羊'; function B(){ console.log(a); } B(); } A(); 在这里毫无疑问结果肯定是我们想到的先打印喜羊羊,再打印美羊羊.因为作用域链嘛,如果当前层没找到,那么就去当前层的上一级找. 那么再看这道 function bar() { console.log(myName) } function

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

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

  • JavaScript闭包中难点深入分析

    目录 初识闭包 什么是闭包 如何产生闭包 产生闭包条件 闭包的作用 闭包的生命周期 闭包的应用 闭包的缺点及解决方法 闭包案例 初识闭包 闭包可谓是JS的一大难点也是面试中常见的问题之一,今天开始梳理一下闭包的知识,请诸君品鉴. 什么是闭包 闭包是嵌套的内部函数:内部函数包含被引用变量(函数)的对象.闭包存在于嵌套的内部函数中,例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“.在本质上,闭包是将函数内部和函数外部连接起来.当然如何

  • JavaScript闭包原理及作用详解

    JavaScript闭包原理及作用详解

    目录 简介 闭包的用途 柯里化 实现公有变量 缓存 封装(属性私有化) 闭包的原理 垃圾收集 简介 实际开发中的优化 简介 说明 本文介绍JavaScript的闭包的作用.用途及其原理. 闭包的定义 闭包是指内部函数总是可以访问其所在的外部函数中声明的变量和参数,即使在其外部函 数被返回(寿命终结)了之后. 闭包的作用(特点) 1.函数嵌套函数 2.内部函数可以引用外部函数的参数或者变量 3.外部函数的参数和变量不会被垃圾回收,因为被内部函数引用. 闭包与全局变量 闭包的用途 柯里化 可以通过参

  • JavaScript闭包原理与用法实例分析

    本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 1.与闭包有关的两个概念: 1) 变量的作用域 不带有关键字var的变量会成为全局变量: 在函数中使用关键字var声明的变量是局部变量. 局部变量只有在函数内部才能访问到,在函数外面是访问不到的.但在函数内部可以通过作用域链一直向上搜索直到全局对象,也就是说,函数内部可以访问函数外部的变量. 2) 变量的生存周期 对于全局变量,其生存周期是永久的,除非主动销毁这个全局变量: 而对于在函数内用关键字var声明的局部

  • JavaScript闭包原理与用法学习笔记

    本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中. 词法作用域: 看下面的一个例子: function init() { var name = 'GaoPian'; // name是局部变量 function displayName() { //displayName();是内部函数,一个闭包 alert(name); // 使用外部函数声明的变量 } displayName();

  • JavaScript进阶（三）闭包原理与用法详解

    本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 为了更好的理解,在阅读此文之前建议先阅读上一篇<JavaScript词法作用域与作用域链> 1.什么是闭包 闭包的含义就是闭合,包起来,简单的来说,就是一个具有封闭功能与包裹功能的结构.所谓的闭包就是一个具有封闭的对外不公开的,包裹结构,或空间. 在JS中函数构成闭包.一般函数是一个代码结构的封闭结构,即包裹的特性,同时根据作用域规则只允许函数访问外部的数据,外部无法访问函数内部的数据,即封闭的对外不公开的特性

  • JavaScript 闭包详细介绍

    深入理解JavaScript--闭包 跟很多新手一样我也是初入前端,对闭包的理解花费的时间和精力相当的多.效果也还行,今天我就来根据自己的理解细致的讲一讲闭包,由于是初入学习的时候不免有一些弯路和困惑,我想信这也是很多跟我一样的人会同样遇到的问题.我就以自己的学习路径和遇到的各种坑来谈闭包.希望对各位有一定的帮助.(菜鸟,也请各位多多指教) 闭包是什么?<JavaScript高级程序设计>上面这么描述的:闭包是指有权访问另一个函数作用域中的变量的函数.这句话第一次看的时候模模糊糊,似是而非.碰

  • JavaScript解析机制与闭包原理实例详解

    本文实例讲述了JavaScript解析机制与闭包原理.分享给大家供大家参考,具体如下: js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字; 2.用var定义的变量的名字存到这个词法环境中; 3.同名的时候:函数声明会覆盖变量,下面的函数声明会覆盖上面的同名函数; 4.函数的值为:对函数的一个引用; 变量的值为undefined; 5.如果用函数表达式的方式创建一个函数: va

  • Javascript闭包使用场景原理详细

    Javascript闭包使用场景原理详细

    目录 一.闭包 二.闭包的使用场景 1.setTimeout 2.回调 3.函数防抖 4.封装私有变量 一.闭包 Javascript中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数. 比如下面的代码: function f1() { var n = 999; function f2() { console.log(n); } return f2; } var result = f1(); result();//999 函数f2就被包括在函数f1内部,这时f1内部

  • javascript闭包(Closure)用法实例简析

    本文实例讲述了javascript闭包(Closure)用法.分享给大家供大家参考,具体如下: closure被翻译成"闭包",感觉这东西被包装的太学术化.下面参考书本和网上资源简单探讨一下(理解不当之处务请留意). 1.什么是闭包 官方的回答:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 看了上面的定义,如果你不是高手,我坚信你会和我一样愤怒的质问:这tmd是人话吗? 要理解闭包,还是代码

  • 用最通俗易懂的代码帮助新手理解javascript闭包 推荐

    用最通俗易懂的代码帮助新手理解javascript闭包 推荐

    最近看了几篇有关javascript闭包的文章,包括最近正火的汤姆大叔系列,还有<javascript高级程序设计>中的文章,--我看不懂,里面有些代码是在大学教科书中看都没看过的,天书一般.幸好最近遇到两本好书<ppk on javascript>和<object-oriented JavaScript>,正字阅读中,后者还没有中文版,但前者还是建议看原版,写的不复杂,有兴趣的朋友可以看看,适合想进阶的朋友. 今天就结合这两本书,用最浅显的语言和最通俗的方式谈谈jav

  • javascript闭包概念简单解析(推荐)

    关于"闭包"这个概念的文章在网上铺天盖地,基本已经稀烂了,但是有时候总感觉读了这么多的文章还是云山雾罩,当然是由于它本身就比较难于理解和涉及的知识较多,还有一个很重要的原因就是网上很多教程介绍可能存在一定的误区,或者说侧重点不同,下面就通过代码实例简单的介绍一下什么是闭包. 代码实例一: function a(){ var webName="我们"; console.log(webName); } a() 以上是一段非常简单的代码,当函数执行结束之后,它就会从内存中

随机推荐