javascript - js中变量与函数同名

Question

console.log(a);
var a = 3;
function a(){}

为什么最后输出结果是a()？

Answer 1

实践出真知，试一下以下代码 ：

console.log(a);  //undefined
var a = 3;

console.log(a);  //function a()
function a(){};

由此可知为什么输出的是函数a。拓展一下：

var a;
function a(){};
console.log(a);  //function a()

var a = 3;
function a(){};
console.log(a);  //3

同一个标识符的情况下，变量声明与函数声明都会提升；函数声明会覆盖变量声明，但不会覆盖变量赋值，即：如果声明变量的同时初始化或赋值那么变量优先级高于函数。

Answer 2

上面的代码相当于:
var a;
function a(){};
console.log(a);a=3.
变量和函数声明都会提升，且变量声明提升在函数之前

Answer 3

a=10;
console.log(a);
var a = 3;
function a(){}

1)函数声明会置顶
2)变量声明也会置顶
3)函数声明比变量声明更置顶：）
4)变量和赋值语句一起书写，在js引擎解析时，会将其拆成声明和赋值2部分，声明置顶，赋值保留在原来位置
5)声明过的变量不会重复声明

按以上的规则
题主的代码等价为

function a(){}
var a;//实际无效
console.log(a);
a = 3;

Answer 4

在ECMAScript中，有一个叫做执行上下文（Execution Contexts）的概念，他在理论上规定了函数在执行时的执行顺序[具体则是由浏览器引擎来实现，不过chrome的v8引擎和firefox的 xxx-spider引擎在实现上会有一些细节的差异。]，这里涉及到的2个执行顺序的规则如下：

使用function声明的函数会最先被编译，因此在相同作用域中，我们总能直接使用function声明的函数；
使用var声明的变量和函数表达式会被自动提升到作用域的顶部，这种现象叫做hoisting。
于是这个问题就很好解释了。
想要深入了解执行上下文，可点这里
你也可以继续阅读汤姆大叔的这系列文章，非常有价值。深入理解javascript系列

根据上面的规定，函数执行顺序如下

function a() {};
var a;
console.log(a);
a = 3;

Answer 5

说句题外话，编程的时候最好别这么写，很容易犯错误，软件大了很难找错误原因的。从一开始就养成良好的编程习惯，不用简单的变量名，避免和第三方类库方法同名，避免使用常用关键字等等，虽然一开始麻烦一些，但对以后维护会有很大好处。