var 的用法和作用域

JavaScript编程指南

概览 含义 用法 对比 练习

var

关键字 变量声明

基本释义：JavaScript中用于声明变量的关键字

词源：源自"variable"（变量）的缩写

📚 核心含义

变量声明

用于声明可变的变量

var name = "张三";
使用var声明一个名为name的变量
基础语法

函数作用域

声明的变量具有函数作用域

function test() {
  var x = 10;
}
var声明的变量x只在test函数内有效
作用域

变量提升

声明会被提升到作用域顶部

console.log(a); // undefined
var a = 5;
变量a的声明会被提升
特性

"var"是ES5及之前版本的主要变量声明方式，ES6引入了let和const后，var的使用逐渐减少，但在旧代码中仍很常见。

🔄 用法对比

代码示例

var count = 0;

function example() {
  var localVar = "hello";
}

var x = 1;
var x = 2; // 允许重复声明

说明

声明全局变量count

在函数内声明局部变量localVar

允许重复声明同一个变量

🎯 常见用法

全局变量

在函数外声明全局变量

var globalVar = "全局";
function test() {
  console.log(globalVar);
}
全局作用域

局部变量

在函数内声明局部变量

function example() {
  var localVar = "局部";
}
函数作用域

变量提升

声明会被提升到作用域顶部

console.log(a); // undefined
var a = 5;
等价于：
var a;
console.log(a);
a = 5;
特性

语法注意

基本语法： var 变量名 [= 值];
允许： 重复声明，只声明不赋值

⚠️ 常见问题

注意事项：

for(var i=0; i<3; i++) { setTimeout(()=>console.log(i)) } // 输出3次3

正确：使用let解决这个问题

if(true) { var x = 5; } console.log(x); // 输出5

正确：使用块级作用域的let/const

🆚 var/let/const对比

特性 var let const
作用域 函数作用域 块级作用域 块级作用域
变量提升 是 暂时性死区 暂时性死区
重复声明 允许 不允许 不允许
重新赋值 允许 允许 不允许

现代JavaScript最佳实践

1. 默认使用const

2. 需要重新赋值时使用let

3. 避免使用var

✍️ 代码练习

代码分析

分析以下代码输出：

console.log(a);
var a = 10;
function test() {
  console.log(b);
  var b = 20;
}
test();

输出：

undefined (变量a声明提升)

undefined (变量b声明提升)

代码改写

将以下var代码改为let/const：

var PI = 3.14;
var count = 0;
for(var i=0; i<5; i++) {
  count += i;
}
console.log(i);

const PI = 3.14;

let count = 0;

for(let i=0; i<5; i++) {

  count += i;

}

console.log(i); // 报错，i未定义

错误修复

找出并修复以下代码的问题：

function printNumbers() {
  for(var i=0; i<3; i++) {
    setTimeout(()=>console.log(i), 100);
  }
}
printNumbers(); // 输出3次3

将var改为let：

function printNumbers() {

  for(let i=0; i<3; i++) {

    setTimeout(()=>console.log(i), 100);

  }

}

printNumbers(); // 输出0,1,2