首页 > 编程语言 >JavaScript闭包有哪些表现形式?

JavaScript闭包有哪些表现形式?

时间:2023-02-09 13:08:28浏览次数:44  
标签:闭包 function console 表现形式 f1 JavaScript var log


在真实的场景中,究竟在哪些地方能体现闭包的存在?

1. 返回一个函数

function f1() {
var a=2;
return function f2() {
console.log(a);
//2
};
};
var num=f1();
num();

2. 作为函数参数传递

var a = 1;
function f1() {
var a = 2;
function f2() {
console.log(a);
};
f3(f2);
};
function f3(fn) {
fn();
};
f1();
// 2

3. 回调函数

在定时器、事件监听、Ajax请求、跨窗口通信、Web Workers或者任何异步中,只要使用了回调函数,实际上就是在使用闭包。

以下的闭包保存的仅仅是window和当前作用域:

// 定时器
setTimeout(function timeHandler(){
console.log('定时器');
},100);

// 事件监听
$('#app').click(function(){
console.log('事件监听');
});

4. 立即执行函数表达式

IIFE创建闭包,保存了全局作用域 window 和 当前函数 的作用域,因此可以使用全局的变量。

var a=2;
(function IIFE(){
console.log(a);
// 2
})();

标签:闭包,function,console,表现形式,f1,JavaScript,var,log
From: https://blog.51cto.com/u_15959833/6046852

相关文章

  • 评测JavaScript代码运行速度的几种方式
    一、使用performance.now()API在JavaScript中,可以使用performance.now()API来评测代码的运行速度。该API返回当前页面的高精度时间戳,您可以在代码执行前后调用......
  • JavaScript插件 图片裁剪photoClip
    阅读目录​​JavaScript插件图片裁剪photoClip​​​​1、截图​​​​2、代码​​​​后台接收并处理图片代码​​JavaScript插件图片裁剪photoClip页面裁剪图片得到bas......
  • JavaScript 常用技巧
    阅读目录对象属性操作对象通过动态属性名称取值根据条件向对象添加属性检查属性是否存在对象中使用动态键进行对象解构扁平化数组值操作空值合并`??`操......
  • JavaScript Array 对象
    阅读目录Array对象什么是数组?创建一个数组访问数组在一个数组中你可以有不同的对象数组方法和属性创建新方法示例数组属性JavaScriptconstructor属......
  • JavaScript 表格小游戏
    阅读目录JavaScript实现表格配对小游戏源码JavaScript实现动态显示表格数据源码源码解析JavaScript实现表格配对小游戏实例描述:当用户点击两个相同......
  • JavaScript 动态表格操作
    阅读目录JavaScript动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1Table对象集合1.2Table对象方法1.3Table对象常用属性1.4T......
  • JavaScript 正则
    阅读目录正则表达式准备工作复习学过的字符串常用操作方法创建正则表达式的两种方法修饰符方括号元字符量词JavaScript实现过滤HTML标签JavaScript验......
  • JavaScript if判断、三元运算符、循环
    阅读目录if判断三元运算符循环结构while循环for循环for循环数组循环字符串if判断letscore=162;if(score>=80){alert("优秀");}elseif(......
  • JavaScript事件冒泡和事件捕获
    阅读目录总结事件冒泡和事件捕获HTML结构需求:鼠标放到li上对应的li背景变灰源码总结它是描述事件触发时序问题的术语。事件捕获指的是从document......
  • Css & JavaScript & jquery 实现选项卡的制作
    阅读目录Css源码源码解析JavaScript源码JavaScript源码解析jQuery源码jQuery源码解析Css源码<!DOCTYPEhtml><htmllang="en"><style></style>......