You Don't Know JS

function foo(a) {
    var b = a * 2;
    function bar(c) {
        console.log( a, b, c );
    }
    bar( b * 3 );
}

foo( 2 ); // 2, 4, 12

setTimeout( function timeoutHandler() { // 快看， 我有名字了
    console.log( "I waited 1 second!" );
}, 1000 );

/*第一种*/
var a = 2;
(function foo() {
    var a = 3;
    console.log( a ); // 3
})();
console.log( a ); // 2

/* 第二种形式*/
(function foo(){ .. })()

/*进阶*/
/*将 window 对象的引用传递进去， 但将参数命名为 global*/
var a = 2;
(function IIFE( global ) {
    var a = 3;
    console.log( a ); // 3
    console.log( global.a ); // 2
})( window );

console.log( a ); // 2

/*IIFE 还有一种变化的用途是倒置代码的运行顺序， 将需要运行的函数放在第二位， 在 IIFE执行之后当作参数传递进去。*/
var a = 2;
(function IIFE( def ) {
    def( window );
})(function def( global ) {
    var a = 3;
    console.log( a ); // 3
    console.log( global.a ); // 2
});

function foo() {
  var a = 2;

  function bar() {
      console.log(a); // 2
  }
  bar();
}
foo();
//基于词法作用域的查找规则， 函数bar() 可以访问外部作用域中的变量 a
function foo() {
  var a = 2;

  function bar() {
      console.log(a);
  }
  return bar;
}
var baz = foo();
baz(); // 2 —— 朋友， 这就是闭包的效果。

function wait(message) {
  setTimeout(function timer() {
    console.log(message);
  }, 1000);
}
wait("Hello, closure!");
//timer 具有涵盖 wait(..) 作用域的闭包， 因此还保有对变量 message 的引用。
//wait(..) 执行 1000 毫秒后， 它的内部作用域并不会消失， timer 函数依然保有 wait(..)作用域的闭包。

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i);         //6
  }, i * 1000);
}

/*所有的回调函数依然是在循环结束后才会被执行， 因此会每次输出一个 6 出来。*/

//它需要有自己的变量， 用来在每个迭代中储存 i 的值：
for (var i = 1; i <= 5; i++) {
    (function() {
        var j = i;
        setTimeout(function timer() {
            console.log(j);
        }, j * 1000);
    })();
}

//使用let
//本质上这是将一个块转换成一个可以被关闭的作用域。
for (var i = 1; i <= 5; i++) {
    let j = i; // 是的， 闭包的块作用域！
    setTimeout(function timer() {
        console.log(j);
    }, j * 1000);
}

//块作用域和闭包联手
for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i * 1000);
}

//exa1:
//两个私有数据变量 something和 another， 以及 doSomething() 和 doAnother() 
//它们的词法作用域（而这就是闭包） 也就是 foo() 的内部作用域。
function foo() {
    var something = "cool";
    var another = [1, 2, 3];

    function doSomething() {
        console.log(something);
    }

    function doAnother() {
        console.log(another.join(" ! "));
    }
}

//模块
function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];

    function doSomething() {
        console.log(something);
    }

    function doAnother() {
        console.log(another.join(" ! "));
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3
//1. CoolModule() 只是一个函数， 必须要通过调用它来创建一个模块实例。 如果不执行外部函数， 内部作用域和闭包都无法被创建。
//2. CoolModule() 返回一个用对象字面量语法 { key: value, ... } 来表示的对象。 这个返回的对象中含有对内部函数而不是内部数据变量的引用

//改进
var foo = (function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];

    function doSomething() {
        console.log(something);
    }

    function doAnother() {
        console.log(another.join(" ! "));
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

//模块模式另一个简单但强大的变化用法是， 命名将要作为公共 API 返回的对象：
var foo = (function CoolModule(id) {
    function change() {
        // 修改公共 API
        publicAPI.identify = identify2;
    }

    function identify1() {
        console.log(id);
    }

    function identify2() {
        console.log(id.toUpperCase());
    }
    var publicAPI = {
        change: change,
        identify: identify1
    };
    return publicAPI;
})("foo module");
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE

//bar.js
function hello(who) {
    return "Let me introduce: " + who;
}
export hello

//foo.js
// 仅从 "bar" 模块导入 hello()
import hello from "bar";
var hungry = "hippo";

function awesome() {
    console.log(
        hello(hungry).toUpperCase()
    );
}

function foo() {
    console.log(a); //2  —— 如果是动态作用域3
}

function bar() {
    var a = 3;
    foo();
}
var a = 2;
bar();

var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout(() => { // 箭头函数是什么鬼东西？
                this.count++;
                console.log("awesome?");
            }, 100);
        }
    }
};
obj.cool(); // 很酷吧 ?

//正确使用和包含 this 机制
var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout(function timer() {
                this.count++; // this 是安全的
                // 因为 bind(..)
                console.log("more awesome");
            }.bind(this), 100); // look, bind()!
        }
    }
};
obj.cool(); // 更酷了。