@芥末的糖

1.接下来是一段有故事的代码，如果你能看到最后，那么我相信，这些干货将会让你受益

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log("循环内：" +i);
    }, 1000);
}
console.log("循环外：" +i);
//循环外：3   ③循环内：3

2.要求变成//循环外：3 循环内：0，1，2

使用闭包

for (var i = 0; i < 3; i++) {
    (function(j) {  
        setTimeout(function() {
            console.log( "循环内：" +j);
        }, 1000);
    })(i);
}

console.log("循环外：" + i);
//循环外：3 循环内:0 循环内:1 循环内:2 

使用函数调用

var obj= function (i) {
    setTimeout(function() {
        console.log("循环内：" +i);
    }, 1000);
};

for (var i = 0; i < 3; i++) {
    obj(i);  // 这里传过去的 i 值被复制了
}

console.log("循环外：" + i);
//循环外：3 循环内:0 循环内:1 循环内:2 

上述代码修改成输出： 0 -> 1 -> 2 -> 3

3.ES6

const tasks = [];
for (var i = 0; i < 3; i++) {   
    ((j) => {
        tasks.push(new Promise((resolve) => {
            setTimeout(() => {
                console.log("循环内：" + j);
                resolve();  // 要 resolve
            }, 1000 * j);   // 定时器的超时时间逐步增加
        }));
    })(i);
}

Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log("循环外：" + i);
    }, 1000);   // 设置为 1 秒
});
//循环内：0循环内：1循环内：2循环外：3

4.ES7

// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();
//循环内：0循环内：1循环内：2循环外：3

附加一段异步代码同步执行的逻辑

  var p1 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('1');
            resolve()
        }, 3000)
    })
    function p2() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log("2");
                resolve();
            }, 2000)
        })
    }
    function p3() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log("3");
                resolve();
            }, 1000)
        })
    }
    function p4() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log("4");
                resolve();
            }, 500)
        })
    }
    p1.then(function () {
        return p2()
    })
        .then(function () {
            return p3();
        })
        .then(function () {
            return p4();
        })

new 的实现

// new 的实现
function Person(name, age) {
  this.name = name
   this.age = age
  console.log(this)
}
Person.prototype.have = 'cat'
function fakenews(Fn) {
// 创建一个空对象
  let obj = new Object()
 // 将新对象的原型指针指向构造函数的原型
  obj.__proto__ = Fn.prototype
  // 处理除了Fn以外的参数
  // [].slice:返回数组中的一段，在这里是返回arguments数组第一个数以后的所有数
  // 将[].slice看作Fn，这里其实就是将[].slice的指向改为arguments
  Fn.apply(obj, [].slice.call(arguments, 1))
 return obj
}
const person = fakenews(Person, "张三", "20")
console.log(person.name)
console.log(person.age)
console.log(person.have)

。。。未完待续