这篇文章是对基础的复习,有这样一道面试题
var a = 10; (function () { console.log(a); var a = 20; })()
- 短短 5 行代码
console.log(a)
的结果是什么? - 如果把
var a = 20;
和console.log(a)
语句顺序对调呢?
这道题目的答案是 undefined
。不是 10。
关键在于 javascript 的变量声明有一个 hoisting 机制,变量声明永远都会被提升至作用域的最顶端(注意测试还只是声明,还没有赋值)。
其实上面的语句相当于:
var a = 10; (function () { var a; // 在这里对变量hoisting,先声明 console.log(a); a = 20; // 再赋值 })()
我们来小分析一下,在匿名函数(function(){})()中,准确点称为自执行函数表达式,作用域会自成一个小世界,这样防止全局作用域的污染。
上面的a变量会提前声明,但是未赋值,所以此时输出的undefined。懂了吧。
我们在来知识延伸一下,记得在前端群里,有人问过,函数的级别高还是变量的级别高。你的理解呢?
其实是这样的,变量和函数在进入上下文,所以的声明都在执行代码之前都已经完成了。但是,函数声明会覆盖变量声明,但不会覆盖变量赋值。
注意上面红色文字,是什么意思呢,你去执行一下下面的代码就清楚了。
var a; function a(){}; //---------------------------------------华丽的分割线 var b = 1; function b(){};
所以大家在写代码的时候得注意一下。
最佳实践:推荐最好在函数的顶端把需要使用的变量首先声明一遍。
上面只是延伸一下和函数相关的知识点。
---------------------------------------------------------------------------------------------------------------------------------
下章预告:函数
函数在javascript函数是非常强大的,说到这里,我们扯远点,Javascript 模块化编程,为什么会提到这个东西呢,
因为随着网站逐渐变成"互联网应用程序",嵌入网页的 Javascript 代码越来越庞大,越来越复杂。
网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。
Javascript 模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。
但是,Javascript 不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了。(正在制定中的 ECMAScript 标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)
对于模块来说,原始的理解就是,模块就是实现特定功能的一组方法。只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。其实不尽如此,目前先说到这里。提供相关的几个词,大家可以先去搜索了解,CommonJS、AMD
从上面看出模块化编程异常重要,学会函数则非常重要,下章讲到函数就会牵连到作用域概念等等,大家先去复习。
今天冬至,大家记得吃饺子哦。