Comments (1)
解决办法汇总
原理:
利用 setTimeout 函数的第三个参数,会作为回调函数的第一个参数传入
利用 bind 函数部分执行的特性
代码 1:
for (var i = 0; i < 10; i++) {
setTimeout(i => {
console.log(i);
}, 1000, i)
}
代码 2:
for (var i = 0; i < 10; i++) {
setTimeout(console.log, 1000, i)
}
代码 3:
for (var i = 0; i < 10; i++) {
setTimeout(console.log.bind(Object.create(null), i), 1000)
}
方法二
原理:
利用 let 变量的特性 — 在每一次 for 循环的过程中,let 声明的变量会在当前的块级作用域里面(for 循环的 body 体,也即两个花括号之间的内容区域)创建一个文法环境(Lexical Environment),该环境里面包括了当前 for 循环过程中的 i,具体链接
代码 1:
for (let i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i);
}, 1000)
}
等价于
for (let i = 0; i < 10; i++) {
let _i = i;// const _i = i;
setTimeout(() => {
console.log(_i);
}, 1000)
}
方法三
原理:
利用函数自执行的方式,把当前 for 循环过程中的 i 传递进去,构建出块级作用域。IIFE 其实并不属于闭包的范畴。参考链接如下:
difference-between-closures-and-iifes-in-javascript
IIFE 是闭包?
利用其它方式构建出块级作用域
代码 1:
for (var i = 0; i < 10; i++) {
(i => {
setTimeout(() => {
console.log(i);
}, 1000)
})(i)
}
代码 2:
for (var i = 0; i < 10; i++) {
try {
throw new Error(i);
} catch ({
message: i
}) {
setTimeout(() => {
console.log(i);
}, 1000)
}
}
方法四
原理:
很多其它的方案只是把 console.log(i) 放到一个函数里面,因为 setTimeout 函数的第一个参数只接受函数以及字符串,如果是 js 语句的话,js 引擎应该会自动在该语句外面包裹一层函数
代码 1:
for (var i = 0; i < 10; i++) {
setTimeout(console.log(i), 1000)
}
代码 2:
for (var i = 0; i < 10; i++) {
setTimeout((() => {
console.log(i);
})(), 1000)
}
代码 3:
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
})(i), 1000)
}
代码 4:
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
}).call(Object.create(null), i), 1000)
}
代码 5:
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
}).apply(Object.create(null), [i]), 1000)
}
代码 6:
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
}).apply(Object.create(null), { length: 1, '0': i }), 1000)
}
方法五
原理:
利用 eval 或者 new Function 执行字符串,然后执行过程同方法四
代码 1:
for (var i = 0; i < 10; i++) {
setTimeout(eval('console.log(i)'), 1000)
}
代码 2:
for (var i = 0; i < 10; i++) {
setTimeout(new Function('i', 'console.log(i)')(i), 1000)
}
代码 3:
for (var i = 0; i < 10; i++) {
setTimeout(new Function('console.log(i)')(), 1000)
}
from interview.
Related Issues (20)
- Day388:实现一个sum函数,接收一个arr,累加arr的项,只能使用add方法,该方法接收两个数,模拟异步请求后端返回一个相加后的值?
- Day389:实现二进制与十进制的互相转化的两个函数? HOT 1
- Day390:下面的代码有什么问题?怎么优化? HOT 1
- Day391:css 的渲染层合成是什么? 浏览器如何创建新的渲染层?
- Day392:webpack中的hash、chunkhash、contenthash区别?(百度)
- Day393:请实现 find 函数,使下列的代码调用正确.(蚂蚁金服) HOT 3
- Day394:SSR 怎么做的,怎么保证同构?server 端的数据都 renderToString 了,为什么还要给到 client 端?
- Day395:vue-router 中路由方法 pushState 和 replaceState 能否触发 popSate 事件?
- Day396:为什么 vite、snowpack 可以比 webpack 快那么多?具体原理是什么?(阿里)
- Day397:手写 Vue.extend 实现?
- Day398: 怎么在指定数据源里面生成一个长度为 n 的不重复随机数组 能有几种方法 时间复杂度多少(字节)
- Day399: 如何找到数组中第一个没出现的最小正整数 怎么优化(字节)
- Day400:判断括号字符串是否有效(小米) HOT 1
- Day401:实现一个数字加减法功能(腾讯) HOT 1
- Day402: 实现一个render(str,parameter)方法,将str中的占位符用parameter填充?(腾讯) HOT 1
- Day403: 有一个二叉树,每个节点的值是一个正整数。写一个函数判断这棵树中是否存在从根到叶子节点的一个路径,这个路径上所有的节点之和为某个节点的值?
- Day404: 实现一个获取对象任意属性的方法?(字节) HOT 1
- Day405: 顺时针打印矩阵(美团)
- Day406: 写个函数,判断一个字符串是否为手机靓号?(腾讯)
- Day407: 有一堆整数,请把他们分成三份,确保每一份和尽量相等(11,42,23,4,5,6 4 5 6 11 23 42 56 78 90) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from interview.