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

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

news 2025/8/5 6:32:26

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

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

全局作用域：在代码任何地方都能访问的变量，它们定义在函数外部。在浏览器中，全局作用域是window对象。
函数作用域：在函数内部定义的变量，只能在函数内部访问。
块级作用域：由一对花括号{}限定，使用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）是指一个函数可以访问并记住其词法作用域，即使该函数在其词法作用域之外执行。简单来说，闭包就是函数内部定义的函数，并且这个内部函数可以访问外部函数的变量。
闭包的使用场景：

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

案例分析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开始，每秒输出一个数字，依次递增。我们可以使用setInterval或setTimeout来实现。
但是有一个经典的陷阱：如果直接在循环中使用setTimeout，并且不采取任何措施，由于JavaScript的事件循环机制，循环变量在循环结束后才会被更新，导致输出相同的值（循环结束后的值）或者不符合预期的值。
解决方案：

使用闭包：在循环体内为每次迭代创建一个闭包，以捕获当前的循环变量。
使用let声明循环变量：因为let具有块级作用域，每次循环都会创建一个新的变量绑定。
使用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);

总结：

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

查看全文

http://www.lryc.cn/news/609534.html