浅谈JavaScript变量声明提升

前段时间阿里实习生内推,一面就被刷了,也是郁闷。今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次。官网流程显示笔试时间3月31日,时间快到了,开始刷题。网上搜了一下去年题目,我擦,第一题就不会(伤心中…),继续往下看,第四题也不会。。。好嘛,搜答案吧。搜了一个多小时的博客,结合自己的理解,写下了这篇博文。。。

2014年阿里巴巴前端工程师笔试题目1:var v = "Hello world";(function() {console.log(v);var v = "I love you";bar();foo(); function bar(){console.log("this is bar!"); }var foo = function() {console.log("this is foo!"); };})();请写出上面的运行结果并说出背后的理由。题目4:指出一下代码的运行结果,并解释为什么。function bar() {return foo;foo = 10;function foo() {}var foo = 11;}alert(typeof bar());

其实上面两道题考察的核心是一样的,即JavaScript变量声明的相关概念,之前了解过一点,但了解的不是太深。

要谈JavaScript变量声明,就离开不了作用域的问题。而JavaScript中没有类似C,JAVA等语言中的块级作用域。如:

#include <studio.h>int main() {int i = 1;printf("d%",i); //1if(1){int i = 2;printf("d%",i); //2}printf("d%",i); //1return 0;}而JavaScript中相应的输出结果就变成了1,2,2。原因就是JavaScript中只有函数作用域,这也是导致JavaScript中一个经典问题的原因,即循环遍历DOM节点绑定事件后触发问题。如:

window.onload = function() {var oLi = document.getElementsByTagName("li");for(var i=0,len=oLi.length;i<len;i++){oLi[i].onclick = function() {alert(i);};}};扯得有点远,下面还是说一下JavaScript语言中的变量声明提升的问题吧。

1、当访问函数内的变量时,JavaScript会按照下面顺序查找:

(1)语言级别:默认在所用作用域下的this,arguments

(2)传入参数:函数命名的参数,作用域是当前函数体。

(3)函数声明:如题1中的function bar() {} 与 题4中的function foo() {}

(4)变量声明:如var v 与 var foo2、变量声明与函数声明经常被JavaScript引擎隐式的提升到当前作用域的顶部。

2.1、变量声明:

局部作用域内声明变量需要加关键词var,即function a(){console.log(typeof b);var b = 3;}实际上被解释成

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

而如果不加关键词var,,则默认引用全局作用域内的相关变量,浏览器中即window作用域。如图:

所以如果你能理解下面代码的运行结果是a=10,则说明对变量声明部分已经足够了解。

<span style="white-space:pre"></span>var a = 1;function b() {if(!a) {var a = 10;}alert(a);}b();2.2、函数声明:我们都知道函数命名有两种方式,一种是函数声明方式function bar() {} 另外一种就是通过赋值语句的方式,即函数声明表达式var foo = function() {};

而这两种函数命名方式虽然都会出现变量声明提升的现象,但第一种提升现象会包含函数体部分一起被提升,即整个函数bar被提升。而第二种则只是简单的变量提升(想象一下将赋值语句后面的函数代码改为基本变量,如数字5,则和上一步所说的变量声明部分完全吻合)。

因此得出如下结论:

(1)JavaScript中声明语句会被提升,而赋值语句不会被提升。

(2)函数声明提升优先于变量声明提升。现在你应该能明白阿里笔试题1中输出结果是undefined this is bar! error:undefined is not a function. 题4中的结果是function.

特此感谢以下博主的精彩博文:

harmony的专栏《2014年阿里巴巴前端工程师笔试题》

浪迹天涯《JavaScript中变量提升——Hoisting》

Nomospace《翻译——JavaScript中的变量作用域与变量声明提升》

可以以心感悟,以此沉淀,足矣;耳听佳音,目极美好,

浅谈JavaScript变量声明提升

相关文章:

你感兴趣的文章:

标签云: