JavaScript中的函数和作用域详解

# 1. JavaScript函数的基础知识

JavaScript中函数是一种可重复使用的代码块，在定义之后可以被调用执行。函数在JavaScript中起着至关重要的作用，让我们深入了解一下JavaScript函数的基础知识。在这一章节中，我们将重点讨论函数的定义与调用、函数参数与返回值、匿名函数和箭头函数，以及函数的嵌套与递归。让我们一起来探索吧！

## 1.1 函数的定义与调用

在JavaScript中，函数可以通过function关键字来定义，例如：

function greet() {
  console.log("Hello, World!");
}

// 调用函数
greet();

在上述代码中，我们定义了一个名为greet的函数，然后通过greet()来调用执行该函数。函数的定义与调用是JavaScript编程中的基础操作，通过函数，我们可以实现代码的模块化和重用。

## 1.2 函数参数与返回值

函数可以接受参数并返回值，例如：

function add(a, b) {
  return a + b;
}

let sum = add(3, 5);
console.log(sum); // 输出 8

在上面的示例中，函数add接受两个参数a和b，然后返回它们的和。在调用add函数时，传入参数3和5，最终得到的返回值被赋给sum并输出。

## 1.3 匿名函数和箭头函数

除了通过function关键字定义函数外，还可以使用匿名函数和箭头函数的形式编写函数，例如：

// 匿名函数
let greet = function() {
  console.log("Hello, World!");
};
greet();

// 箭头函数
let greet = () => {
  console.log("Hello, World!");
};
greet();

匿名函数是没有名称的函数，可以赋值给变量来使用；箭头函数是ES6引入的一种函数简写形式，可以更加简洁地定义函数。

## 1.4 函数的嵌套与递归

函数可以嵌套定义，也可以递归调用自身，例如：

function outerFunction() {
  console.log("Outer function");

  function innerFunction() {
    console.log("Inner function");
  }

  innerFunction();
}

outerFunction();

在上述示例中，outerFunction内部嵌套了innerFunction，可以相互调用。递归是函数调用自身的技术，在适当的场景下能够简化问题的解决方案。

通过本节的介绍，我们了解了JavaScript函数的基础知识，包括函数的定义与调用、函数参数与返回值、匿名函数和箭头函数，以及函数的嵌套与递归。在接下来的章节中，我们将深入探讨函数作用域及作用域链的相关知识。

# 2. 函数作用域及作用域链

函数作用域及作用域链是理解JavaScript中函数工作原理的关键概念之一。在这一章节中，我们将深入探讨函数作用域的相关知识。

### 2.1 全局作用域与局部作用域

在JavaScript中，函数作用域分为全局作用域和局部作用域。全局作用域指的是在代码任何地方都能访问到的变量，而局部作用域指的是在函数内部定义的变量，只能在函数内部访问。

// 全局作用域的变量
var globalVar = 'I am a global variable';

function exampleFunction() {
  // 局部作用域的变量
  var localVar = 'I am a local variable';
  console.log(globalVar); // 可以访问全局变量
  console.log(localVar); // 可以访问局部变量
}

exampleFunction();
console.log(globalVar); // 可以在函数外部访问全局变量
// console.log(localVar); 无法在函数外部访问局部变量

在这段代码中，`globalVar`是一个全局变量，在函数内外都可以被访问，而`localVar`是一个局部变量，只能在函数内部访问。

### 2.2 词法作用域与动态作用域

JavaScript使用词法作用域（也称为静态作用域），它是在定义时确定的作用域，而不是在运行时确定。这意味着函数的作用域在函数定义的时候就已经确定了，而不是在函数调用的时候确定。

var x = 10;

function lexicalScope() {
  var x = 20;
  console.log(x); // 输出20，使用的是函数内部的局部变量x
}

lexicalScope();
console.log(x); // 输出10，使用的是全局变量x

在这个例子中，`lexicalScope`函数内部定义了一个局部变量`x`，在函数内部`x`指向局部变量`20`