作用域与变量提升的面试题方法总结

前言：下面的方法能快速的解面试题，主要针对 =>作用域与变量提升的面试题<= 。并且没有this改变指向的情况

          （有错或者不足的地方，随时修改补充）

函数的两种形似：1.函数申明（function xx（）{ }）。2.函数表达式（let xx = function（）{ }）。

变量提升（预解析）：浏览器刚打开就会预先把带var的 和 函数申明（function xx（）{ }）进行变量提升，var xx =undefined | xx=function xx（）{ }
作用域：全局作用域：window。  局部作用域：函数体内。  ES6中还有块的概念，块：是个花括号 { } =>在函数申明被花括号包着的括号上方，打印函数是undefined
重名：如果var 了一个或多个变量，和声明一个或多个函数，重名了。此时可以看做（变量提升的时候，后面的覆盖了前面的，函数申明 覆盖了 var。）

/*********************上面是知识基础，是铺垫。*************下面是总结的一套方法**************************/
1.没有参数的时候：看有没有var，或者函数申明（也就是说如果有变量提升，在函数体内就变成私有变量了，函数体内修改了不会影响父级。）
有，子集是undefined，也不会找父级，下面修改了（简单和复合类型）都不会影响父级。
没有，子集找不到，会找到父级，下面修改了（简单和复合类型）都会影响父级。

2.有参数的时候：（有传参，在函数体内就变成私有变量了，函数体内修改了 不会影响父级。除非用的同一个空间地址，也就是复合函数）
子集找不到，或者是undefined，（有没有var，或者函数申明）都会找参数，简单类型修改了不会影响父级，复合类型修改了会影响父级，除非重新赋址了。

例子1：

    /*全局作用域
    1.变量提升：先找var 和函数申明
     var a = undefined
     fn = function fn(){...}
    2.从上而下逐行解读代码:只看 = 号后面的
     */
    console.log(fn);  //fn = function fn(){...}
    var a = 5;
    console.log(a);//5

    function fn() {
        /*局部作用域
        1.变量提升：先找var 和函数申明
         var a = undefined
         var fn = undefined
         fn = function fn(){alert(1);}
         （重名了，函数 覆盖了 var）
        2.从上而下逐行解读代码:只看 = 号后面的
         */
        fn = 30;
        console.log(fn); //30
        var fn = function () {
            alert(1);
        };
        a = 50;
        console.log(fn, a); //function(){alert(1);},50
        function fn() {
            alert(5);
        }
        console.log(fn); //function(){alert(1);}  （解读的时候看 = 等号，有等号赋值后就看等号后面的）
        var a = fn = 70;//相当于var了一个a = 70   和赋值了一个  fn = 70
        console.log(a, fn); //70,70
        //window.fn = 70;
        window.a = 80
    }
    fn();
    console.log(a, fn); //80,整个大的代码块 （没有参数，看函数体内有没有var fn  和fn的函数声明。有，函数体内形参私有作用域，里边的fn改变了，不会影响外面的fn，除非是挂在window下，比如window.a = 80）

例子2：

    function b(x, y, a) {
        console.log(a);//3  先找本身有没有，本身找不到，会找参数有没有，再找父级，找到全局。为止，全没有就报错。
        arguments[2] = 10;//相当于 a = 10
        console.log(a);//10  本身找的到，，就不会往外找
    }
    a = b(1, 2, 3);
    console.log(a);//a,拿到时是函数b的默认返回值，（undefined）

结语：想把这种类型的题目吃透，一定要多练，光说不练假把式。复杂一点，还要学习闭包的机制，this指向的问题，运算符优先级的问题，下面再给个例子

例子3：（考虑 运算优先级的面试题）

     var a=9;
     function fn(){
         a=0;
         return function(b){
             return b + (a++);//b先加上a，得出结果。a再自增
         }
     }
    var f=fn();//a = 0
    console.log(f(5)); //5   a = 1
    console.log(fn()(5)); //a=0   5   a = 1
    console.log(f(5)); //6  a=2
    console.log(a); //2

 例子4：（闭包 和 this指向 的综合面试题）

    var num = 10;
    var obj = {num: 20};
    /*
        obj = {
            num:20,
            fn:function (n) {
                this.num += n;  
                num++;
                console.log(num);
            }
        }
        fn = function (n) {
            this.num += n;
            num++;
            console.log(num);
        }
    */
    obj.fn = (function (num) { //num=20
        //window.num = 60
        this.num = num * 3;
        num++;
        //num=21
        return function (n) {
            this.num += n;
            num++;
            console.log(num); //22  23
        }
    })(obj.num); //匿名函数自执行的this就是window
    var fn = obj.fn;
    fn(5);//60 += 5  65 window.num = 65    num=22
    obj.fn(10); //20 += 10    obj.num = 30
    console.log(num, obj.num); //65  30