浅谈javascript函数，变量声明及作用域

javascript函数跟变量的声明、作用域这些概念网上都已经讲烂了。

这里写个博客，也相当于做个笔记。

变量声明

首先看个例子：

var globalVar = "gv";
function fc() {
  console.log(globalVar);
  var globalVar = "lv";
  console.log(globalVar);
}
fc();

这个例子输出：

undefined

"lv"

 

为什么会输出这样的信息呢？

　　javascript中变量声明会被预编译(自动调整)到所在代码作用域的顶部。 原来那段代码将会变成仅仅给变量赋值的操作。

上面的代码也就变成了下面的代码。

var globalVar = "gv";
function fc() {
  var globalVar;
  console.log(globalVar);
  globalVar = "lv";
  console.log(globalVar);
}
fc();

函数体内的   var globalVar = "lv";  这段代码被拆分成了2个部分。
 --- 第1个部分就是我们要说的var globalVar，也就是变量声明，它被预编译到所在作用域的顶部；第2部分就是给变量赋值操作。
因此，第一个console输出的是undefined(因为globalVar仅仅声明了，为赋值，声明的变量javascript会给个undefined值) ；
     第二个输出的是“lv”，因为此时globalVar已经被赋值了。


现在你可能会问。  我在函数fc之外已经定义了1个全局变量globalVar， 并且fc函数内部我也仅仅再次声明了这个变量， 并没有赋值， 照理说应该会使用函数外的全局变量的。 为什么执行的时候却找不到呢。 照理说应该会输出 "gv"  "lv" 的。

这是因为globalVar在函数体内通过关键字var声明了，这表示这个globalVar在函数体是是一个局部变量。
如果我们将函数体内的globalVar前面的var关键字去掉：

var globalVar = "gv";
function fc() {
  console.log(globalVar);
  globalVar = "lv";
  console.log(globalVar);
}
fc();

那么就会输出"gv"  "lv"。  因为函数体内的globalVar是一个全局变量。

作用域

javascript的作用域有2种。1个全局作用域，1个是函数作用域。 它没有块级作用域。
全局作用域很好理解， 在代码中任何地方都能访问到的对象拥有全局作用域。
函数作用域就是在函数体内声明的一些函数，变量。

那么什么是块级作用域呢？
首先，来看个例子：

for(var i = 0; i < 5; i ++) {
  var j = i;
}
console.log(i +', ' + j);

switch(j) {
  case 4:  var k = 2; break;
  default: var k = 3;
}

console.log(k);

if(i >= 5) {
  var l = 6;
}

console.log(l);

这里例子最后都会输出i，j，k，l的值， 值分别为5、4、2、6。 
说明了javascript是没有块级作用域。像for、if、switch等关键字包括起来的｛｝这段代码就是所谓的块级作用域。
结果还是可以找出这4个变量， 并没有报错。
没有块级作用域，那么以上代码就是在全局作用域内定义并执行的。

本文一开始讲了变量声明的预编译。 预编译的作用范围其实是在作用域里才会起作用的。

于是。 块级作用域的例子进行预编译之后会是如下样子：

var i,j,k,l;

for(i = 0; i < 5; i ++) {
  j = i;
}
console.log(i +', ' + j);

switch(j) {
  case 4:  k = 2; break;
  default: k = 3;
}

console.log(k);

if(i >= 5) {
  l = 6;
}

console.log(l);

函数声明

函数声明同样会被提取到当前作用域内的最前面。

console.log(func);
function func() {
  console.log(1);
}

以上这段代码就会输出func这个函数的定义代码。 而不是undefined。

函数声明与变量声明的优先级

如果我一段代码中既有函数声明，又有变量声明，那么谁的优先级更高呢？

　　　　　　　　　　答案是：变量声明。

 

即变量声明的优先级比函数声明的优先级要更高

 

但是这个定义是有条件的。

function func() {
  console.log(1);
}
var func = 1;
console.log(func);

var func = 1;
function func() {
  console.log(1);
}
console.log(func);

这两段代码都会输出 1 。 说明的变量声明的优先级比函数声明高，也就是说变量声明会覆盖函数声明。

 

下面再来看个例子：

var func;
function func() {
  console.log(1);
}
console.log(func);

这里会输出func函数的定义，不会输出undefined。

因为这段代码中变量声明并未进行赋值操作， 仅仅声明了1个变量。

因此最准确的说法是：  进行赋值操作的变量声明的优先级比函数声明要高。

总结

javascript是一门非常奇葩的语言，里面的坑其实蛮多的。

但是只要掌握好基础，其实也还好吧。

参考资料：

http://www.cnblogs.com/snandy/archive/2012/03/01/2373237.html

http://www.cnblogs.com/TomXu/archive/2011/12/28/2286877.html