昨天在答360笔试的时候,遇到这样一道毁三观的题;
var a = 3;
function a(){};
console.log(type a);
看到这段代码,你的第一反应是他应该输出什么!
我当时毫不犹豫,内心坚定无比的选择了function。这并不是因为后面覆盖前面的问题,而是我们之前在学习js预解析的时候,学过这样一段话,函数与变量同名时,函数优先级更高!于是我谨记,那么这道题中,最终生效的一定就是函数!
我的助攻帮我运行了这段代码,然后他告诉我应该选择number!什么!!我当时一脸惊恐加不屑,坚信他一定是哪里敲错了!于是我依然义无反顾的选了function;直到笔试结束之后,我自己运行了一下这段代码……
当控制台打印的number出现在眼前时,我简直一脸懵逼,顿时感觉三观的颠覆了……下面我们就来讲解一下它。
注意,前面说到的我们我你平常学习的时候说,函数与变量同名时,函数优先级更高。注意!!这里说的是,函数声明与变量声明同名时!函数 声明!! 的优先级更高。我们都知道:变量和赋值语句一起书写,在js引擎解析时,会将其拆成声明和赋值2部分,声明置顶,赋值保留在原来位置。也就是说,这种情况:
var a;
function a(){};
console.log(a); //function a(){}
这时:
1)函数声明会置顶
2)变量声明也会置顶
3)函数声明比变量声明更置顶(可理解为优先级高)
所以,此时的x是一个函数。
然而,这种情况:
var a = 3;
function a(){};
console.log(a); //3
同一个标识符的情况下,变量声明与函数声明都会提升;函数声明会覆盖变量声明,但不会覆盖变量赋值,即:如果声明变量的同时初始化或赋值那么变量优先级高于函数。你可以理解为,开始的声明函数确实优先于变量,覆盖了变量。但是在后面代码执行到赋值语句时,a再次被赋值为数字。相当于以下代码:
function a(){};
a=3;
console.log(a);//3
console.log(typeof a);//number
你可以试试,就算声明为函数,赋值为数字,也会变成number。