首页 > js中变量与函数同名

js中变量与函数同名

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

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


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;

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


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

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

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

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

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


实践出真知,试一下以下代码 :

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

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

【热门文章】
【热门文章】