广州品牌设计网站建设,西安网站建设怎样,专业网站设计建设公司,上线了建的网站免费吗1. JavaScript中的作用域是什么#xff1f;
作用域#xff08;Scope#xff09;是程序中定义变量的区域#xff0c;它决定了变量的可访问性#xff08;可见性#xff09;。在JavaScript中#xff0c;作用域主要分为三种#xff1a;全局作用域、函数作用域和块级作用域
作用域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来实现连续输出。
