JS基础知识-作用域和闭包

执行上下文
1.1 对变量来说，js在执行代码之前只先声明变量，不执行赋值语句。
变量赋值是在执行到赋值语句的时候才进行。
所以在已经声明的变量之前访问这个变量，访问到的是js自动给的初始值undefined

console.log(a);    // undefined

var a = 10;    // 进行赋值

console.log(a);    // 10

1.2 对this来说，直接给this赋值
1.3 在处理函数声明时和1.1情况一样处理
在处理函数表达式时,是对函数名直接赋值的，能够提前访问到函数

console.log(f1);    // function f1() {}
function f1() {}

console.log(f2);    // undefined
var f2 = function () {}

总结：
生成执行上下文做的数据准备工作：
1. 变量声明默认赋值为undefined
2. this直接赋值
3. 函数声明直接赋值

1.4 执行上下文可以有这三个代码段环境：全局代码、函数体、 eval代码
对函数来说，在函数中除了总结中说了数据之外，还有其他数据：函数的参数、arguments变量、自由变量的取值作用域，这三个也是直接赋值的
1.4.1 函数每被调用一次，都会产生一个新的执行上下文环境
1.4.2 函数在定义的时候就已经确定了函数体内自由变量的作用域

var a = 'kimi';

function fn(x){
  console.log("arguments", arguments);    // arguments对象
  console.log("x", x);    // 参数
  console.log("a", a);    // 自由变量
}

function bar(f){
  var a = 10;
  f();    // 要到创建这个函数的那个作用域中取值
}
        
fn('emoji');
        
bar(fn);
        
打印输出：
        // arguments Arguments ["emoji", callee: ƒ, Symbol(Symbol.iterator): ƒ]
        // x emoji
        // a kimi
        
        
        // arguments Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
        // x undefined
        // a kimi

1.4.3 自由变量
在fn作用域中使用的变量a没有在fn作用域中声明，对fn作用域来说，a就是一个自由变量
1.4.4 作用域链
如果要在函数中找当前作用域中没有声明的自由变量，要到创建这个函数的作用域中去找，没有找到就继续向上直到找到全局作用域为止。不管这个函数是在哪里调用的

var a = 10;
        
function fn(){
  var b = 20;
            
  function bar(){
    console.log(a+b);
  }

  return bar;
}

var x = fn(), b = 200;

x();    // 30

1. fn()的this指向是x，x调用fn函数
2. 先在当前作用域bar中去找，没有就在fn函数中查找b，因为bar中没有定义变量，所以a b对bar来说都是自由变量，要找a b要到创建bar函数的作用域中去找，那就是fn，fn中有b就b=20，fn中没有找到a，就接着到创建fn的作用域，全局作用域中去找，找到a=10

this
this的取值是执行上下文中的一部分，每次调用函数都会产生一个新的执行上下文。只有在函数被执行调用的时候才能确定this指向。
2.1 构造函数的this指向（new）构造出来的实例对象
在构造函数的prototype中，this也指向实例对象

function Fn() {
  this.name = 'emoji';
  this.year = 1988;
}
    
Fn.prototype.getName = function(){
  console.log(this.name);    
}
    
var f1 = new Fn();

f1.getName();    // 'emoji'

2.2 函数作为对象的一个属性并且被对象调用时，函数中的this指向该对象
2.3 函数用call、apply调用时，this的值是传入的对象的值
2.4 全局调用时，this是window
2.5 作为普通函数调用时，this是window
2.6 作为html元素事件中的this时，this是当前事件发生的目标元素

作用域
只有全局作用域和函数作用域，每个函数创建都会创建一个自己的作用域
一个作用域中会存在多个执行上下文环境
js没有块（{}中的语句）级作用域，所以不要在块中声明变量，一般都提前进行声明

var i = 10;

if(i>1){
    var name = 'emoji';
}

console.log(name);    // emoji

作用域类似于地盘的概念，作用域就像隐形的围墙，将自己地盘上的代码围住

除了全局作用域外，每个函数都会创建自己的作用域，这是在函数定义的时候就确定好的

作用域中的变量的值是在执行过程中确定的，作用域不涉及变量，变量是作用域对应的执行上下文环境来影响的

作用域有上下级的关系，上下级关系的确定看函数在哪个作用域下创建，bar的上级就是fn

作用域最大的用处就是隔离变量，不同作用域下同名变量不会冲突

TODO 作用域链的查找过程

var a = 10, b = 20;    // 全局作用域

function fn() {    // fn 的作用域
    var a = 100, b = 200;
    
    function bar() {    // bar 的作用域
        var a = 1000, b = 2000;
    }
    
    bar(100);
    bar(200);
}

fn(10);

执行上下文环境和作用域说明：

1. 在加载代码的时候，全局上下文环境 变量、函数声明 然后赋值
2. 执行到fn(10)，生成调用fn函数的上下文环境，压栈，当前活动上下文环境是fn
3. 执行到bar(100)，生成调用bar函数的上下文环境，压栈，当前活动上下文环境是bar，执行完bar(100)，当前上下文环境销毁;执行bar(200)，同上面一样，bar(200)执行完销毁后回到上级fn的上下文环境中，fn为活动状态
4. 执行完fn(10)后，销毁fn(10)的上下文环境，回到全局上下文环境中，当前活动状态为全局

闭包

TODO 自己写一个闭包
什么是闭包？
函数a内部有一个函数b，函数b可以访问到函数a中的变量，函数b就是闭包
闭包存在的意义：可以间接访问函数内部的变量

function A() {
  let a = 1
  window.B = function () {
      console.log(a)
  }
}
A()
B() // 1

匿名函数是在A函数内被声明的，所以从创建这个函数的内部找变量

循环中使用闭包解决var定义函数的问题

涉及事件循环机制，settimeout机制

function wait(message){
    setTimeout(function timer(){
        console.log(message);
    }, 1000);
}

wait("Hello Message");    // 'Hello Message'

延迟函数的回调会在循环结束时才执行

for(var i = 1; i <= 5; i++){
    setTimeout(function timer() {    // 执行这个函数的时候for循环已经执行完
        console.log(i);
    }, i*1000);
} 
// 6

改造成闭包，在循环内使用立即调用函数表达式（IIFE），以便在每次迭代中强制创建变量的一个新副本：

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

第二种就是使用setTimeout的第三个参数，这个参数会被当成timer函数的参数传入。

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

第三种就是使用 let 定义 i 来解决问题了，这个也是最为推荐的方式

• let 和 var的区别（待补充）
  用let声明的变量，不存在变量提升。而且要求必须 等let声明语句执行完之后，变量才能使用，不然会报Uncaught ReferenceError错误。

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

4.1 函数作为返回值

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

1. bar函数作为返回值赋值给变量f1
2. 涉及跨作用域取值
   4.2 函数作为参数传递

var max =10, fn = function (x){ if(x > max){console.log(x);} };
(function (f){
  var max = 100;
  f(15);
})(fn);    // 15 > 10 -> 15

1. 要到创建这个函数的作用域上下文环境中去找变量
   4.3 在执行上下文栈中，提到当一个函数被调用完成之后，这个函数的执行上下文环境会被销毁，包括其中的变量。但是有些情况下函数调用完成后，其执行上下文环境不会被直接销毁

function fn(){
    var max = 10;
    
    return function bar(x){
        if(x > max){
            console.log(x);
        }
    }
}

var f1 = fn(), max = 100;

f1(15);     // 15

1. 代码执行前生成全局上下文环境，并在执行的时候对变量赋值，这时候全局上下文环境是活动状态。 max -> undefined
2. 执行f1 = fn()，调用fn函数，这时候产生了fn执行上下文环境，压栈，为活动状态
3. 但是在f1变量赋值时fn()调用完的时候，这里不会销毁fn函数的上下文执行环境，因为fn函数内部返回的是一个函数bar，函数bar会创建一个独立的作用域，bar是在执行fn函数时创建的，fn其实早就执行结束了，但是上下文环境还留着。如果销毁了fn，bar中的max就找不到值了。
4. 执行f1(15)函数调用bar，max在bar中是自由变量，需要在创建bar的函数fn中找，找到Max=10，就取10