js 作用域的问题

if (false) {
 function c1() {console.log(1);}
}
c1();


if (false) {
 var c2 = function() {console.log(1);}
}
c2();

请问各位大哥,解释下c1c2的区别

阅读 2.6k
2 个回答

js是个很鬼的语言,所以你需要有自戳双目的勇气。
这个问题涉及到js的解析阶段、执行阶段、变量提升,详细的需要自己去查资料了,简单理解可以如下。

js中,函数声明式在执行前会被解析,你可以理解为,function c1这个函数声明已经被提到了执行之前定义,所以你写成这样子也是可以执行的

c3();
if (false) {
 function c3() {console.log('c3');}
}

上面这么写是能够输出'c3'的。


然而赋值表达式(函数赋值表达式),则是执行时才会运行。只有在进入了if语句之后,开始执行赋值表达式时,匿名函数的赋值才声明。
运行c2报错为TypeError,因为c2声明了,但是没有定义,它只是一个可怜的undefined

if (false) {
 var c5 = function c6() {
  console.log(5);
  console.log(c6);
 }
}
c5();
c6();

上面这个例子里c5是undefined,c6会报错not defined
变量声明var是被解析了的,所以c5是声明了,没有定义。
这里又有一个点。
当条件为false时,赋值表达式是没有执行的。
当条件为true是,赋值表达式是执行了的。
这两种条件中c6都是not defined,但是意义是不一样的。
false时确实是未定义,但是true时是因为js对函数的命名处理。赋值的命名函数,函数名对外是不可见的,但是对内可见。

总的来说,可以理解为js有两次解释执行:

第一次:解析加载变量声明,函数声明,对函数的参数赋值
第二次:给变量赋值,执行函数

另送黑暗圣经地址:
MDN Functions

参考
函数作用域中定义在后面的变量能被前面的表达式访问到吗?

PS: 之前答案写错的一个代码,爆栈了。

if (true) {
 var c5 = function c6() {
  console.log(5);
  c6(); // stack overflow
 }
}
c5();
c6();

c1:普通函数
c2:命名函数表达式

看这里吧:http://www.cnblogs.com/TomXu/archive/2012/01/30/2326372.html
我做的关于函数的笔记:http://my.oschina.net/Karon/blog/495895

看完这可能还不够,因为涉及提升问题:

题中写法和下面的写法是等价的:


function c1() {console.log(1);}
if (false) {
    
}
c1();

var c2;
if (false) {
    c2 = function() {console.log(1);}
}
c2();

这里涉及提升的问题,各作用域中,function声明的函数和var声明的变量都会被提升。网上一堆资料,自己查查就有的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏