剖析JS作用域机制，全局与局部巧妙交互

2024-02-12 16:24:24

JS作用域：深入剖析全局与局部交互

在JavaScript中，作用域是指变量和函数的可访问范围。作用域的理解对于构建健壮和可维护的应用程序至关重要。让我们从全局作用域和局部作用域这两个基本概念开始，然后逐渐深入探究更高级的主题。

全局作用域

全局作用域是所有代码都可以访问的作用域。在全局作用域中声明的变量和函数可以在任何地方访问到。这使得全局作用域非常适合存储应用程序级别的信息和函数。例如，我们经常将一些应用程序配置项存储在全局作用域中，以便所有代码都可以轻松访问这些配置项。

// 全局变量
var globalVariable = "This is a global variable";

// 全局函数
function globalFunction() {
  console.log("This is a global function");
}

局部作用域

局部作用域是指函数内部的作用域。在局部作用域中声明的变量和函数只能在该函数内部访问。这意味着，在局部作用域中声明的变量不会影响到全局作用域中的变量。同样地，在局部作用域中声明的函数也不能在全局作用域中调用。

function localFunction() {
  // 局部变量
  var localVariable = "This is a local variable";

  // 局部函数
  function nestedFunction() {
    console.log("This is a nested function");
  }

  // 访问局部变量
  console.log(localVariable);

  // 调用局部函数
  nestedFunction();
}

// 访问局部变量（错误）
console.log(localVariable);

// 调用局部函数（错误）
nestedFunction();

作用域引用类型传递

在JavaScript中，函数的参数是按值传递的。这意味着，当函数被调用时，函数内部的参数是原始值（字符串、数字、布尔值等）的副本。因此，在函数内部对参数所做的任何修改都不会影响到函数外部的原始值。

function changeValue(value) {
  // 改变参数的值
  value = 10;
}

var originalValue = 5;

// 调用函数
changeValue(originalValue);

// 打印原始值
console.log(originalValue); // 输出：5

然而，对于引用类型（数组、对象等），情况就不同了。当函数的参数是引用类型时，函数内部的参数是原始值的引用。这意味着，在函数内部对参数所做的任何修改都会影响到函数外部的原始值。

function changeObject(obj) {
  // 改变参数的值
  obj.name = "John Doe";
}

var person = {
  name: "Jane Doe"
};

// 调用函数
changeObject(person);

// 打印原始值
console.log(person.name); // 输出：John Doe