当前位置: 首页 > news >正文

JavaScript中的作用域、闭包、定时器 由浅入深

1. JavaScript中的作用域是什么?

作用域(Scope)是程序中定义变量的区域,它决定了变量的可访问性(可见性)。在JavaScript中,作用域主要分为三种:全局作用域、函数作用域和块级作用域(ES6引入)。

  1. 全局作用域:在代码任何地方都能访问的变量,它们定义在函数外部。在浏览器中,全局作用域是window对象。
  2. 函数作用域:在函数内部定义的变量,只能在函数内部访问。
  3. 块级作用域:由一对花括号{}限定,使用let和const声明的变量只能在块内访问(例如:if、for循环等)。
    作用域链:当访问一个变量时,JavaScript引擎会从当前作用域开始查找,如果当前作用域没有,则向上一级作用域查找,直到全局作用域。如果全局作用域也没有,则报错(ReferenceError)。

案例分析1:作用域

var globalVar = "global"; // 全局作用域
function outer() {var outerVar = "outer"; // outer函数作用域function inner() {var innerVar = "inner"; // inner函数作用域console.log(globalVar); // 可以访问全局变量console.log(outerVar);  // 可以访问外部函数变量console.log(innerVar);  // 可以访问自身变量}inner();console.log(globalVar); // 可以访问全局变量console.log(outerVar);  // 可以访问自身变量// console.log(innerVar); // 报错,innerVar在inner函数内部
}
outer();
// console.log(outerVar); // 报错,outerVar在outer函数内部

2. 闭包会在哪些场景中使用?

闭包(Closure)是指一个函数可以访问并记住其词法作用域,即使该函数在其词法作用域之外执行。简单来说,闭包就是函数内部定义的函数,并且这个内部函数可以访问外部函数的变量。
闭包的使用场景:

  1. 封装私有变量:通过闭包创建私有变量,避免全局污染。
  2. 模块模式:创建模块,暴露公共接口,隐藏私有实现。
  3. 回调函数:在异步编程中,回调函数常常形成闭包,以保留某些状态。
  4. 函数工厂:创建多个相似但配置不同的函数。
  5. 在定时器、事件监听器等需要保留状态的场景。

案例分析2:闭包

// 封装私有变量
function createCounter() {let count = 0; // 私有变量return {increment: function() {count++;return count;},decrement: function() {count--;return count;},getCount: function() {return count;}};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2
// 模块模式
const Module = (function() {let privateVar = 'I am private';function privateMethod() {console.log(privateVar);}return {publicMethod: function() {privateMethod();}};
})(); //自调用,把最终函数返回的结果赋值给Module 
Module.publicMethod(); // 输出: I am private
// Module.privateMethod(); // 报错:未定义
// console.log(Module.privateVar); // 报错:未定义
// 回调函数中使用闭包
function delayedLog(value, delay) {setTimeout(function() {console.log(value);}, delay);
}
delayedLog('Hello after 1 second', 1000);

3.通过定时器循环输出自增的数字,通过js的代码如何实现?

我们经常会遇到需要每隔一段时间输出一个自增的数字,例如从0开始,每秒输出一个数字,依次递增。我们可以使用setIntervalsetTimeout来实现。
但是有一个经典的陷阱:如果直接在循环中使用setTimeout,并且不采取任何措施,由于JavaScript的事件循环机制,循环变量在循环结束后才会被更新,导致输出相同的值(循环结束后的值)或者不符合预期的值。
解决方案:

  1. 使用闭包:在循环体内为每次迭代创建一个闭包,以捕获当前的循环变量。
  2. 使用let声明循环变量:因为let具有块级作用域,每次循环都会创建一个新的变量绑定。
  3. 使用setTimeout的第三个参数(将额外的参数传递给回调函数,但这种方式在循环中并不直接解决递增问题,但可以传递当前值)。

定时器循环输出自增的数字
错误示例:

//错误示例:
for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i); // 输出5次5}, 1000);
}
// 原因:所有定时器回调共享同一个变量i,循环结束后i为5,所以输出5次5。

正确方法1:使用闭包(IIFE)

for (var i = 0; i < 5; i++) {(function(j) {setTimeout(function() {console.log(j); // 0,1,2,3,4}, 1000 * j); // 为了更明显,这里让每个定时器间隔1秒的倍数})(i);
}

正确方法2:使用let声明循环变量(推荐)

for (let i = 0; i < 5; i++) {setTimeout(function() {console.log(i); // 0,1,2,3,4}, 1000 * i);
}

正确方法3:使用setTimeout的第三个参数(传递参数)

for (var i = 0; i < 5; i++) {setTimeout(function(j) {console.log(j); // 0,1,2,3,4}, 1000 * i, i); // 第三个参数i会作为回调函数的参数
}

如果希望每隔1秒输出一个数字,并且连续输出(0,1,2,3,4),可以使用setInterval,但要注意清除定时器。
使用setInterval:

let i = 0;
const timer = setInterval(function() {console.log(i);i++;if (i >= 5) {clearInterval(timer);}
}, 1000);

或者使用递归的setTimeout(避免setInterval的连续执行可能带来的问题,如执行时间超过间隔时间):

let i = 0;
function printNumber() {console.log(i);i++;if (i < 5) {setTimeout(printNumber, 1000);}
}
setTimeout(printNumber, 1000);

总结:

  1. 作用域决定了变量的可见性,分为全局、函数和块级作用域。
  2. 闭包常用于封装私有变量、模块模式、回调函数等,可以记住并访问其词法作用域。
  3. 定时器循环输出自增数字时,要注意循环变量的作用域问题,可以使用闭包、let或setTimeout的第三个参数解决。同时,可以使用setInterval或递归setTimeout来实现连续输出。
http://www.dtcms.com/a/315209.html

相关文章:

  • idea添加gitlab访问令牌
  • 【Canvas与文字】生存与生活
  • 2025年08月04日Github流行趋势
  • 工控领域协议之Modbus
  • prometheus应用CounterGauge
  • prometheus应用demo(一)接口监控
  • 【MySQL04】:基础查询
  • 初识SpringBoot
  • Java计算机网络面试题
  • 【BUUCTF系列】[SUCTF 2019]EasySQL1
  • script标签放在header里和放在body底部里有什么区别?
  • 鸿蒙开发元组
  • 单点登录(SSO)全面解析:原理、实现与应用
  • 中标喜讯 | 安畅检测成功中标海南工信大脑(二期)软件测评服务
  • 基于SpringBoot的OA办公系统的设计与实现
  • docker-compose一键部署Springboot+Vue前后端分离项目
  • 映射公式解常微分方程,偏微分方程
  • JVM-自动内存管理-运行时数据区域
  • createAsyncThunk
  • 结构体数组2-单向链表
  • MySQL详解(一)
  • SAP_MMBASIS模块-选择屏幕变式添加动态字段赋值
  • 如何在AD中快速定位器件?J+C
  • AWS服务分类
  • 人员检测识别中漏检率↓76%:陌讯动态特征融合算法实战解析
  • C++入门自学Day6-- STL简介(初识)
  • AI产品经理手册(Ch6-8)AI Product Manager‘s Handbook学习笔记
  • Vue3+TypeScript项目实战day1——项目的创建及环境配置
  • pytorch 学习笔记(2)-实现一个线性回归模型
  • sqli-labs通关笔记-第30关GET字符注入(WAF绕过 双引号闭合 手工注入+脚本注入两种方法)