闭包

提升

• 1 变量提升

console.log(a);
var a = 1;
// var a;
// console.log(a);
// a = 1;
// var a;编译阶段的任务；a = 1;执行阶段的任务;

• 2 函数表达式

• 函数表达式的提升 === 变量提升

a(); 
var a = function(){...};
// TypeError: a is not a function
// 函数表达式不会被提升
// var a;
// a();
// a = function(){};

• 3 函数声明

func();
function func(){ console.log(1); }
var func = function(){ console.log(2); }
func();
// function func(){ console.log(1); }
// var func;
// func();
// func = function(){ console.log(2); }
// func();
// 函数优先，当同时存在变量和函数声明，最先提升函数声明，其次才是变量。
// var func;由于是重复声明，被忽略。

• demo

function func(){
    a = 1;
    console.log(window.a);  //  ?
    console.log(a);         //  ?
    var a = 2;
    console.log(a);         //  ?
}
func();

执行环境&词法作用域

• 变量、函数表达式——变量声明，默认赋值为undefined；
• this——赋值；
• 函数声明——赋值；

这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。

词法作用域在函数定义时就已经确定了。而不是在函数调用时确定。

var a = 10;
function fn() {
    console.log(a);
}
function bar(f) {
    var a = 20;
    f()
}
bar(fn);
// 执行环境
// 1 全局执行环境
// 2 fn执行环境
// 3 bar执行环境

• demo

var a = 10;               // 1
var b = 200;    
function fn() {     
    var b = 20;
    function bar() { 
        console.log(a + b);
    }
    bar();                 // 3
}
fn();                    // 2

var a = 10;               // 1
var b = 200;    
function fn() {     
    var b = 20;
    function bar() { 
        console.log(this.a + this.b);
    }
    bar();                 // 3
}
fn();                    // 2

闭包

函数作为返回值，函数作为参数传递。

function fn () {
    var max = 10;
    return function bar(x) {
        if (x > max) {
            console.log(x); // ?
        }
    }
}
var f1 = fn();
var max = 100;
f1(15);

for (var i = 0;i < 5;i ++) {
  setTimeout(() => {
    console.log(i); // ?
  },0);
}
// 延迟函数的回调在循环后执行
// 实际上，5个函数在一个共享作用域中，共享同一个i
for (var i = 0;i < 5;i ++) {
  (function(i){
    setTimeout(() => {
      console.log(i); // ?
    },0);
  })(i)
}
for (let i = 0;i < 5;i ++) {
  setTimeout(() => {
    console.log(i); // ?
  },0);
}