浅谈 js 变量作用域

  in   tech with  0  comment

关于 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

Responses