您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JS基础入门:闭包详细讲解

时间:2019-05-07 11:37:18  来源:  作者:

闭包是函数创建时作用域内所有变量的集合。要使用闭包,需要在另一个函数中创建一个函数,这种函数被称为嵌套函数。内部函数可以访问外部函数作用域中的变量(依靠闭包可以访问外部函数作用域),即使在返回外部函数之后也是如此。每次创建嵌套函数时都会创建闭包。

JS基础入门:闭包详细讲解

 

作用域链

在继续了解闭包之前,首先了解一下JAVAScript中的作用域链。

通常,有两种类型的作用域:

  • 全局作用域
  • 局部作用域

JavaScript中,函数内部的变量在外部是不可见的。但是在块内的变量(if 或 while 之类)是可见的。

var a = 10;
function App(){
 var b = 2;
 console.log(a); // 10
 console.log(b); // 2
}
console.log(b); // ReferenceError: b is not defined
app();

正像我们已知的那样,a 是一个全局变量并且 b 是一个局部变量,它是app函数独有的。

我们无法从局部作用域之外获取局部变量的值。

使用嵌套函数 —— 函数内部的函数

var a = 10;
function app(){
 var b = 2;
 var d = 3;
 function add(){
 var c = a + b;
 }
 return add;
}
var x = app();
console.dir(x);

在这里app是父函数,add函数是子函数。

  • 代码中没有用 console.log 而是用了console.dir 来输出指定JavaScript对象的所有属性,这有助于开发人员获取对象的属性
  • 变量 x 被分配给app函数,app函数返回add函数。因此我们可以看到add函数的所有对象属性。

如果在浏览器中查看控制台,可以在Scopes数组中看到Closure对象。

JS基础入门:闭包详细讲解

 

由于内部函数add访问外部函数变量b 和 d,因此这2个变量将被添加到Closure对象中以供引用。

让我们看看下一个例子:

var a = 10;
var startFunc;
function app(){
 var b = 2;
 function add(){
 var c = a + b;
 console.log(c);
 }
 startFunc = add();
}
app(); // 调用app函数
startFunc; // 上面调用的app函数会将add函数赋值给startFunc并输出c的值
  • 一个名为 startFunc 的全局函数被分配给add函数,该函数是 app 函数的子函数。
  • 这只有在调用 app 函数后才有可能,否则 startFunc 将作为全局变量而不被分配任何值

在JavaScript中使用闭包

很多人在编码时会用到闭包,但是不明白用它的原因。 JavaScript没有像其他面向对象语言一样的访问修饰符,例如 private,public,protected。不过我们可以利用函数来保护命名空间免受外部代码使用的影响。

特别是在函数中,**立即执行函数表达式(IIFE)**是在声明之后会立即执行的函数表达式。在声明函数之后,你不需要去调用该函数。

IIFE的语法定义是:

(function(){
 //函数内部的变量和作用域
})();

举个例子:

var studnetEnrollment = (function () {
 //私有变量,任何人都无法改变
 //除了下面声明的函数
 var count = 0;
 var prefix = "S";
 // 返回一个命名函数表达式
 function innerFunc() {
 count = count + 1;
 return prefix + count;
 };
 return innerFunc;
})();
var x = studnetEnrollment(); // S1
console.log(x);
var y = studnetEnrollment(); // S2 
console.log(y);

count和prefix是两个私有变量,任何人都无法进行更改,只能访问内部函数(即代码中的innerFunc)。只有名为闭包的功能才能对此进行访问。

  • 第一次调用studentEnrollment函数时,函数内的count变量由innerFunc函数递增加1。
  • 第二次,增加上一个计数值,即 1 增加到 2
  • Closure功能可以实现这些功能。

结论

闭包是外部函数中的变量集合,它提供对内部函数作用域的访问以保护全局命名空间。

闭包使开发人员能够编写像面向对象语言那样的干净代码,这些代码不会混淆全局和局部变量的名称。
 



Tags:JS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言几乎所有.NET序列化程序的实现基础都是反射。下列代码是Newtonsoft.Json的实现:protectedvirtualJsonPropertyCreateProperty(MemberInfomember,MemberSerializationmemb...【详细内容】
2021-12-28  Tags: JS  点击:(2)  评论:(0)  加入收藏
前言JDBC访问Postgresql的jsonb类型字段当然可以使用Postgresql jdbc驱动中提供的PGobject,但是这样在需要兼容多种数据库的系统开发中显得不那么通用,需要特殊处理。本文介绍...【详细内容】
2021-12-23  Tags: JS  点击:(13)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  Tags: JS  点击:(23)  评论:(0)  加入收藏
前言前几天有粉丝在群里问了一个json文件处理的问题。看上去他只需要follower和ddate这两个字段下的对应的值。我们知道json是一种常见的数据传输形式,所以对于爬取数据的数...【详细内容】
2021-12-07  Tags: JS  点击:(40)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Tags: JS  点击:(45)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  Tags: JS  点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  Tags: JS  点击:(58)  评论:(0)  加入收藏
利用JS的CryptoJS 3.x和PHP的openssl_encrypt,openssl_decrypt实现AES对称加密解密,由于需要两种语言对同一字符串的操作,而CryptoJS 的默认加密方式为“aes-256-cbc”,PHP端也...【详细内容】
2021-09-16  Tags: JS  点击:(79)  评论:(0)  加入收藏
作者:JShaman.com:w2sft内容预告:本文将实例讲解以下JS代码混淆加密技术:方法名转义和转码、成员表达式转IIFE、函数标准化、数值混淆、布尔型常量值混淆、二进制表达式转为调用...【详细内容】
2021-09-03  Tags: JS  点击:(82)  评论:(0)  加入收藏
Web 浏览器日益强大,网站和 Web 应用程序的复杂性也在增加。几十年前需要超级计算机的操作现在可以在智能手机上运行,其中之一就是人脸检测。检测和分析人脸的能力非常有用,因...【详细内容】
2021-08-20  Tags: JS  点击:(105)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条