function闭包、定时器剖析
一、function小知识点：
明确闭包，js解析机制，变量声明提升
（如希望见到详细例题，可参考有趣味的js之趣味4。
js变量提升相关例题：http://blog.csdn.net/u013217071/article/details/62237561），函数的作用，作用域
<html lang="en">
<head>
<meta charset="UTF-8">
<title>functiontitle>
<style>
style>
head>
<body>
<script>
/*------------------*/
/*cb(); //cb is not a function(…)
func(); //123
var cb = function(){
console.log(123);
}
function func(){
console.log(123);
}*/
/*1.总结：js代码运行分两个阶段：
1.预解析--把所有 函数定义 和 变量声明 提前，变量赋值不提前。（函数表达式不会提前，var cb；提前）
2.执行---从上到下执行（setTimeout\setInterval\ajax中回调函数\事件触发才执行的函数除外）*/
/*------------------*/
/*------------------*/
/*var obj = {
"name":"lisi",
"sayHello": function(){
console.log("hello");
}
}
function fn(callback){
callback();
}
fn(obj.sayHello);*/
/*2.总结：函数的参数可以是一个函数，这个函数可以直接调用*/
/*------------------*/
/*------------------*/
/*function outerFn(){
var n = 0;
return function innerFn(){
n++;
console.log(n);
}
}
var fn = outerFn();
fn(); //1
fn(); //2*/
/*3.总结：函数可以作为返回值，函数的嵌套形成闭包
闭包不会释放私有变量的空间，所以会保持变量的引用*/
/*------------------*/
/*------------------*/
/*var i = 0;
var data = [];
for(i=0; i<3; i++){
data[i] = function(){
console.log(i);
}
}
data[0](); //3
data[1](); //3
data[2](); //3*/
/*4.总结：js没有块级作用域，这里的i其实是全局变量。data[i]中保存了函数，存储的是i的引用，但是并没有执行，真正执行时，i已经变为了3*/
/*作用域有：全局作用域、函数作用域、try/catch作用域、eval作用域*/
/*------------------*/
/*------------------*/
/*var i = 0;
var data = [];
for(i=0; i<3; i++){
data[i] = (function(k){
return function(){
console.log(k);
};
})(i);
}
data[0](); //0
data[1](); //1
data[2](); //2*/
/*5.总结：函数是立即执行的，循环三次，有三份独立的空间，k在函数私有空间内，保存了i传递进去的值。*/
/*------------------*/
function JuiceMachine(fruit){
this.fruit = fruit;
this.produceJuice = function(){
console.log(this.fruit + "果汁");
}
}
var apple = new JuiceMachine("苹果");
apple.produceJuice(); //苹果果汁
var orange = new JuiceMachine("橘子");
orange.produceJuice(); //橘子果汁
JuiceMachine.brand = "九阳";
JuiceMachine.open = function(){
console.log("open");
}
console.log(JuiceMachine.brand); //九阳
JuiceMachine.open(); //open
console.log(apple.brand);
//undefined，brand和open是JuiceMachine对象的属性和方法
apple.open();
//Uncaught TypeError: apple.open is not a function(…)
JuiceMachine.produceJuice();
//Uncaught TypeError: JuiceMachine.produceJuice is not a function(…)，，produceJuice是构造函数生成对象的方法。
/*总结：function有双重身份，1、对象。 2、构造函数*/
/*总结6:区分构造函数本身的方法和实例对象的方法，并明确new的执行顺序*/
function Person() {
this.getName = function(){
console.log("实例对象的getName函数");
}
}
Person.getName = function(){
console.log("构造函数自己的getName函数");
}
var p = new Person; //构造函数无参时，创建对象，可省略括号
var p1 = new Person();
p.getName(); //实例对象的getName函数
p1.getName(); //实例对象的getName函数
new Person.getName(); //构造函数自己的getName函数
new Person().getName(); //实例对象的getName函数
/*总结：区分构造函数本身的方法和实例对象的方法，并明确new的执行顺序*/
script>
body>
html> 二、函数闭包
知识点：setTimeout异步执行机制，Promise
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
style>
head>
<body>
<script>
/*---------------*/
/*for(var i = 0; i < 5; i++){
console.log(i);
}*/
/*一、01234*/
/*---------------*/
/*---------------*/
/*for(var i = 0; i < 5; i++){
setTimeout(function(){
console.log(i);
},i*1000);
}*/
/*二、5个5，每隔一秒输出一个5*/
/*setTimeout 会延迟执行，那么执行到 console.log 的时候，其实 i 已经变成 5 了*/
/*---------------*/
/*---------------*/
/*for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}*/
/*三、01234每隔一秒输出*/
/*---------------*/
/*---------------*/
/*for (var i = 0; i < 5; i++) {
setTimeout(function(i) {
console.log(i);
}, i * 1000, i);
}*/
/*四、01234每隔一秒输出*/
/*---------------*/
/*---------------*/
/*for (var i = 0; i < 5; i++) {
(function() {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}*/
/*五、5个5，每隔一秒输出一个5*/
/*内部其实没有对 i 保持引用，其实会变成输出 5*/
/*---------------*/
/*---------------*/
/*for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 3000);
}*/
/*01234*/
/*六、立马输出 0 到 4 */
/*这里给 setTimeout 传递了一个立即执行函数。额，setTimeout 可以接受函数或者字符串作为参数，那么这里立即执行函数是个啥呢，应该是个 undefined ，也就是说等价于：setTimeout(undefined, ...);*/
/*而立即执行函数会立即执行，那么应该是立马输出的。*/
/*---------------*/
setTimeout(function() {
console.log(1);
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
/*七、2,3,5,4,1*/
/*
首先先碰到一个 setTimeout，于是会先设置一个定时，在定时结束后将传递这个函数放到任务队列里面，因此开始肯定不会输出 1 。
然后是一个 Promise，里面的函数是直接执行的，因此应该直接输出 2 3
然后，Promise 的 then 应当会放到当前 tick 的最后，但是还是在当前 tick 中。
因此，应当先输出 5，然后再输出 4 。
*/
script>
body>
html> 三、定时器与闭包_js执行顺序
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
style>
head>
<body>
this
<script>
function fn1() {
for (var i = 0; i < 4; i++) {
var tc = setTimeout(function(i) {
console.log(i);
clearTimeout(tc)
}, 10, i);
}
}
function fn2() {
for (var i = 0; i < 4; i++) {
var tc = setInterval(function(i, tc) {
console.log(i);
clearInterval(tc)
}, 10, i, tc);
}
}
fn1();
fn2();
//0120123333333333...
//
/*这题考察了对闭包和定时器另外还有js执行顺序的理解。
先来说说fn1，如果把clearTimeout去掉，相信大家一定很熟悉，都会说10ms延迟后会依次输出0,1,2,3。
但是，请注意这里加了个clearTimeout，如果你去控制台实验的话会发现只输出了0,1,2，那3呢？
先别急，请听我慢慢道来：
请注意：这个tc是定义在闭包外面的，也就是说tc并没有被闭包保存，所以这里的tc指的是最后一个循环留下来的tc，所以最后一个3被清除了，没有输出。
再来看看fn2，可以发现区别就是把setTimeout改为了setInterval,同时把定时器也传到了闭包里。
那么结果又会有什么不同呢？如果亲自去实验的同学就会发现输出0,1,2,3,3,3...。
什么鬼？为毛最后一个定时器没被删除。说实话，我在这里也想了很久，为何最后一个定时器没被删除。后来我为了调试方便把i<4改为了i<2并把触发时间改为3s，在浏览器中单步调试，发现3s后第一次触发回调函数执行的时候tc的值是undefined第二次触发的时候有值了。这个时候我顿悟，这和程序的执行顺序有关。我们知道js正常情况下是从上到下，从右到左执行的。
所以这里每次循环先设置定时器，然后把定时器的返回值赋值给tc。在第一次循环的时候tc并没有被赋值，所以是undefined，在第二次循环的时候，定时器其实清理的是上一个循环的定时器。所以导致每次循环都是清理上一次的定时器，而最后一次循环的定时器没被清理，导致一直输出3。*/
script>
body>
html>
三、setTimeout异步 -> Promise -> Async
隔一秒输出12345
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
5 -> 5,5,5,5,5，即第 1 个 5 直接输出，1 秒之后，输出 5 个 5；
追问 1：闭包
for (var i = 0; i < 5; i++) {
(function(j) { // j = i
setTimeout(function() {
console.log(new Date, j);
}, 1000);
})(i);
}
console.log(new Date, i);
巧妙的利用 IIFE（Immediately Invoked Function Expression：声明即执行的函数表达式）来解决闭包造成的问题，确实是不错的思路，但是初学者可能并不觉得这样的代码很好懂，至少笔者初入门的时候这里琢磨了一会儿才真正理解。
有没有更符合直觉的做法？答案是有，我们只需要对循环体稍做手脚，让负责输出的那段代码能拿到每次循环的 i 值即可。该怎么做呢？利用 JS 中基本类型（Primitive Type）的参数传递是按值传递（Pass by Value）的特征，不难改造出下面的代码：
var output = function (i) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
};
for (var i = 0; i < 5; i++) {
output(i); // 这里传过去的 i 值被复制了
}
console.log(new Date, i);
能给出上述 2 种解决方案的候选人可以认为对 JS 基础的理解和运用是不错的，可以各加 10 分。当然实际面试中还有候选人给出如下的代码：
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
细心的同学会发现，这里只有个非常细微的变动，即使用 ES6 块级作用域（Block Scope）中的 let 替代了 var，但是代码在实际运行时会报错，因为最后那个输出使用的 i 在其所在的作用域中并不存在，i 只存在于循环内部。
能想到 ES6 特性的同学虽然没有答对，但是展示了自己对 ES6 的了解，可以加 5 分，继续进行下面的追问。
如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用大概，是为了避免钻牛角尖的同学陷进去，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 How Javascript Timers Work）。 追问2:ES6 Promise:
const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, i);
resolve();
}, 1000 * i);
});
// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
tasks.push(output(i));
}
// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000);
});我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高，但是使用 Promise 的问题也很明显，即如果没有处理 Promise 的 reject，会导致错误被丢进黑洞，好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 Unhandled Rejection Warning，而排查这些错误还需要一些特别的技巧（浏览器、Node.js）。
使用 ES7 中的 async await 特性来让这段代码变的更简洁:
// 模拟其他语言中的 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);
})();