浅谈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

原文地址:https://www.cnblogs.com/fangjian0423/p/3508955.html