KonishiLee's Blog

Js 运行机制

steps 1

1
2
3
for (var i = 0; i < 5; i++) {
console.log(i);
}

这段代码大家应该很熟悉吧,就是一个简单的循环。输出结果也是:0,1,2,3,4

steps 2

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

上面这段代码就加了一个 setTimeout,会有怎样不一样的反应呢?js 是单线程,所以大家之后 setTimeout 会延后执行,当 console.log 在执行的时候 i 已经变成 5 了,所以执行结果应该是:5,5,5,5,5

steps 3

好了,理解了 js 单线程,setTimeout 的运行原理之后,那来加一点关于闭包的知识。

1
2
3
4
5
6
7
for (var i = 0; i < 5; i++) {
(function(i){
setTimeout(function() {
console.log(i);
}, 10 * i);
})(i);
}

这里的 i 已经被定义到了 setTimeout 方法当中,所以顺序不变。代码被改成这样之后,输出就变成了:0,1,2,3,4

steps 4

再来做一点小小的改动,将 function 当中的 i 删除。

1
2
3
4
5
6
7
for (var i = 0; i < 5; i++) {
(function(){
setTimeout(function() {
console.log(i);
}, 10 * i);
})(i);
}

执行结果会变成什么?当然这里就看你是不是真正的理解闭包啦。输出结果:5,5,5,5,5

steps 5

了解完闭包之后,那再加一点 promise 的东西。
稍作修改一下代码。以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i = 0 ; i < 100 ; i++ ) {
i == 99 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);

猜一下这里会输出怎样的结果?setTimeout 会延迟,然后 promise 里面定义的肯定也是直接执行的,then 方法应该是后来执行的,最后一个 5 也应该是直接执行的,所以顺序应该是:2,3,5,4,1

总结

所以说 js 运行原理,单线程,闭包,promise 这些知识点却是有点奇怪,不过怎么去理解代码呢,首先就应该多去手动自己敲一些代码,看看具体原理是怎样的,多打一些断点。理解原理才能更好的学习 js。

如果喜欢这个分享,就帮忙买杯咖啡吧