文章目录
  1. 1.
  2. 2. Reference

看了JavaScript异步编程, 一直没看懂异步的原理, 找了segmentfault才知道是怎么一回事.

example_1

1
2
3
4
5
var obj = {};
setTimeout(() => {
console.log(obj);
}, 0);
obj.foo = 'bar';

这里会输出Object {foo: "bar"}

首先需要了解setTimeout(func, time)是一个异步执行函数, func在这里面就会被回调(简单来说就是被调用), 它先将func放入一个event queue, 之后等外面的函数加载完之后, 它就开始检查event栈中内容,并依次执行.

再一个例子:

example_2

1
2
3
4
5
6
7
8
var obj = {};
obj.foo = 'bar';
console.log('log_1: ' + JSON.stringify(obj));
setTimeout(() => {
console.log('log_2: ' + JSON.stringify(obj));
// 多了 bar:foo
}, 0);
obj.bar = 'foo';

这个例子的两个log就解释了前面的那段话了

如果看了前面两个例子懂了异步回调的话, 再了解一下块级作用域和js作用域(<=ES5)的, 后面两个的区别就很好理解了

example_3

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

这些匿名函数都加入了event queue但是var的原因,i从头到尾用的都是同一个内存,所以回调之后的i都变成了4

example_4

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

let关键词是ES6的特性,使js拥有块级作用域,然后就是一个简单匿名函数的传值调用啦

Reference

同步与异步、异步与回调-苹果小萝卜

文章目录
  1. 1.
  2. 2. Reference