浅谈 js 变量作用域

  in   tech with  0  comment

javascript

关于 javascript 这门语言许多人都是从开始的时候觉得容易，后来觉得难，再后来又觉得容易的过程走过来的。最开始的时候觉得简单，是因为没有重视，没有把它当作一门语言来来认真对待，总是以自己学习其他语言的“经验”来使用它。在使用中会遇到各种问题，比如 javascript特有的变量作用域和异步问题，这时候会觉得它其实也很难。但是如果真正理解了变量作用域和异步，其实也不是很难。只是写法的区别。

无意间看到一套前端面试题，作为后端汪，也只能看看其中的 js 部分，见到一道 js 笔试题特别不错，特尝试解答一下。

原题：


    var a, b = 0, fn = function(){
            var a = b = 2;
        };
        fn();
        console.log(a, b);

看上去很简单的一道题，细细分析一下却发现这题出的真妙。咱们一行一行分析

第一行声明了a,b,fn，此时a声明但未赋值，故a=undefined,b=0,fn为一个函数。

第四行执行fn函数。

在fn函数内部 var a=b=2; 这里才是真正的重点，var a重新使用 var 对 a做了覆盖声明，并把 b 的值赋给它。后面 b =2。这里 b 并没有使用 var 声明。事实上这一行是创建了一个函数内部的变量 a，和对全局变量 b 进行赋值。所以虽然这里 a 也被赋值了，但此时它是个函数内部的变量，外部无法访问。

第五行，输出全局变量a和b，所以此时a=undefined，b=2；

我们再来转换一种写法。

var a, b = 0, fn = function(){
		var b=1;
        a = b = 2;
        console.log(a, b);
    };
    fn();
    console.log(a, b);

和上面一样，第一行对三个变量声明。

此时第四行输出a和b时都是函数内部的变量，a和b都是2

最后一行输出的时候全局变量a是，在函数内部被赋值，所以是2。全局变量b在第一行被复制0，但是在函数内部第三行被var 重新声明为函数内部的变量，虽然被赋值为1，虽然下一行被赋值为2，但是事实上和全部变量b是没有关系的。所以此时b为0

本文由 lscho 创作，采用知识共享署名4.0国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 09 07, 2018

Responses