javascript中的变量作用域以及变量提升详细介绍

让我们来详细讲解一下"JavaScript中的变量作用域以及变量提升"。

变量作用域

变量作用域是指程序中定义变量的区域。JavaScript中，变量作用域有两种类型：全局作用域和局部作用域。

全局作用域

在全局作用域中定义的变量，可以被代码中的任意函数所访问：

// 全局作用域
var globalVar = "我是全局变量";

function foo() {
  console.log(globalVar);
}

foo(); // 输出："我是全局变量"

局部作用域

在函数内部定义的变量，只能在该函数内部访问：

function foo() {
  // 局部作用域
  var localVar = "我是局部变量";
  console.log(localVar);
}

foo(); // 输出："我是局部变量"

console.log(localVar); // 报错：Uncaught ReferenceError: localVar is not defined

变量提升

变量提升是指在JavaScript执行过程中，变量的声明部分会被提升到代码的顶部。这意味着可以在变量声明之前进行访问和操作。

函数提升

JavaScript引擎会将所有函数的声明提升到代码顶部：

foo(); // 输出："我是foo函数"

function foo() {
  console.log("我是foo函数");
}

变量提升

JavaScript引擎会将所有变量的声明提升到代码顶部，但不会将变量的赋值部分提升：

console.log(myVar); // 输出："undefined"

var myVar = "我是局部变量";

我们可以看到，虽然myVar的声明被提升到了代码的顶部，但是其值是undefined，只有在后面进行赋值后才有实际值。

示例

下面举两个示例来说明变量作用域和变量提升：

var x = 10;

function foo() {
  var x = 20;
  console.log(x);
}

foo(); // 输出："20"
console.log(x); // 输出："10"

在上面的示例中，函数foo中声明了一个变量x，其作用域只在函数内。在函数外部，变量x的值为全局变量x的值，即10。

var name = "张三";

function foo() {
  console.log(name);
}

function bar() {
  var name = "李四";
  foo();
}

bar(); // 输出："张三"

在上面的示例中，虽然函数bar中定义了一个局部变量name，但是在调用函数foo时输出的却是全局变量name的值，即张三。

这是因为当foo函数被调用时，JavaScript引擎会沿着作用域链向上寻找变量name，找到了全局变量name，因此输出的是张三。