详解变量声明加 var 和不加 var 的区别

最新推荐文章于 2020-11-24 15:52:48 发布

weixin_33738555

最新推荐文章于 2020-11-24 15:52:48 发布

阅读量136

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wx1993/p/7709240.html

版权

在全局作用域中声明变量加 var 关键字和不加 var ，js 引擎都会将这个变量声明为全局变量，在实际代码运行时，两种声明方式的变量的行为也几乎是一致的。但是在全局作用域下是否声明一个变量的时候加 var 和不加 var，js 引擎具体执行了哪些操作呢，其效果又是否完全一致？

首先我们看在一个函数体内（局部作用域）声明变量，如下：

// 变量声明不加 var
function foo (a) {
  console.log(a + b) // b is not defined
  b = a
}

foo(2)

【分析】执行 foo(2) 的时候，我们具体看 foo 函数，首先打印了 a + b 的值，然后声明了一个 b 变量（没有使用var关键字），并将传入的 a 赋值给 b，因为 js 引擎按照代码顺序编译和执行代码，因此在打印 a + b 的时候，在任何作用域中都是无法找到 b 变量的。

在执行 foo(2) 表达式的时候 js 引擎具体的的操作过程如下：

在当前作用域中查找名为 foo 的函数(RHS)
进入 foo函数体，首先 JS 引擎在执行前会对整个脚本文件的声明部分做完整分析（包括局部变量），从而确定变量的作用域（js引擎读取一段js代码，首先执行预解析，就是逐行读取js代码，寻找全局变量和全局函数，遇到全局变量，把变量的值变为undefind,存在内存中，遇到全局函数，直接存在内存中，这个过程如果发现语法错误，预解析终止）。因此第一步搜集变量，发现在函数作用域中这里只有作为参数的局部变量 a，提升到作用域顶部。
将 2 赋值给参数变量 a（a = 2, LHS）
查找 console 对象（RHS），发现是内置函数，在 console 对象下查找 log 函数（RHS）
在当前作用域中查找变量 a，并获取 a 的值为（a = 2, RHS）
在当前作用域中查找变量 b，未找到该变量
将 a 和 b 的查找结果传入 console.log() 函数，打印结果（ b 未定义，抛出错误: b is not defined）
继续执行 b = a。首先获取变量 a 的值（a = 2, LHS）, 然后在当前作用域中查找变量 b（RHS），未找到，到上一层作用域（全局作用域）中查找（RHS），未找到，
在全局作用作用域中创建一个名称为 b 的变量，并将其返回给引擎（注意：严格模式下禁止自动或隐式地创建全局变量）
将 a 的值（2）赋值给全局变量 b（ b = a, LHS）

再看第二个例子

// 变量声明加 var
function foo (a) {
  console.log(b) // undefined
  console.log(a + b) // NaN
  var b = a
}

foo(2)

【分析】执行 foo(2) 的时候，我们看 js 引擎具体做了哪些操作？

在当前作用域中查找名为 foo 的函数（RHS）
进入 foo 函数体，搜集变量，发现声明了局部变量 a 和 b，因此将 a 和 b 提升到函数作用域的顶部（此时 b 的值为 undefined）
参数赋值，将 2 赋值给变量 a（a = 2, LHS）
查找 console 对象（RHS），发现是内置函数，在 console 对象下查找 log 函数（RHS）
在当前作用域中查找变量 b（RHS），发现已经声明，但是值为 undefined ，传给log()函数，执行打印，输出结果（b is not defined）
重复第4步 RHS 查找 console.log() 函数，查找变量 a 的值（a = 2, RHS）；查找变量b的值（b = undefined, RHS），将 a 和 b 的值传入 console.log()，执行运算，输出结果(2 + undefined，结果 NaN)

通过上述在函数体内声明变量的例子，已经可以看出来 js 引擎在处理这两种情况的区别，在全局作用域中的也是如此，而且理解起来更为简单。

看两个例子：

console.log(a) // undefined
a = 3

声明变量 a 的时候没有加 var，因此 js 引擎默认将变量 a 声明为全局变量（值为 undefined）并提升到作用域顶部（为什么在console.log() 中可以访问到 a），但是此时的赋值操作需要等到 console.log() 方法执行完之后才会执行，因此在 console.log(a) 打印的结果会是 undefined

console.log(a) // undefined
var a = 3

这里的输出结果仍旧是 undefined，但是和上面的例子不同的是， js 引擎并没有主动的去创建变量 a，而是直接将变量 a 搜集到全局变量的集合中，并将 a 提升到作用域顶部。

【延伸】全局变量是 window 的属性（浏览器环境下），因此声明全局变量时是否加 var，可以通过 Object 提供的 getOwnPropertyDescriptot(object, propertyName) 来进行比较是否存在不同：

var a = 1
b = 2

console.log(Object.getOwnPropertyDescriptor(window, a))
// { value: 1, writable: true, enumerable: true, configurable: false }

console.log(Object.getOwnPropertyDescriptor(window, b))
// { value: 2, writable: true, enumerable: true, configurable: true }