JS函数本身的作用域实例分析

JS函数本身的作用域实例分析

在JS中，函数拥有自身的作用域，也可以使用父级作用域中的变量。函数本身的作用域指的是在其内部可以访问的变量和函数。本文将详细讲解JS函数本身的作用域，以及两个具体的实例分析。

1. 函数内部作用域

函数内部可以访问的变量有两种，分别是自有变量和父级变量。

1.1 自有变量

自有变量指的是函数内部定义的变量，只能在函数内部访问。例如下面的代码片段：

function demo() {
  var name = '张三';
  console.log(name);
}

demo(); // 输出 '张三'
console.log(name); // 抛出错误，name未定义

在函数内部定义了名为 name 的变量，这个变量只能在函数内部使用，无法在外部访问到。

1.2 父级变量

在函数内部还可以访问到父级作用域内的变量，这种作用域链的是因为JS采用了词法作用域。例如下面的示例：

var age = 18;

function demo() {
  console.log(age);
}

demo(); // 输出 18

函数内部并没有定义变量 age，但是由于函数的父级作用域是全局作用域，所以可以在函数内部访问到全局变量 age 的值。

2. 函数自身作用域

函数本身的作用域是在函数定义时确定的。可以在在函数内部使用自有变量和访问父级变量，但是无法在函数外部访问这些变量。下面是一个示例：

function demo() {
  var name = '张三';

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

  inner(); // 输出 '张三'
}

demo();
console.log(name); // 抛出错误，name未定义

在函数内部定义了一个名为 inner 的函数，这个函数可以访问到外层 demo 函数内部定义的变量 name，输出了变量的值。而在函数外部访问变量 name 会抛出错误。

3. 示例分析

3.1 示例一：使用闭包实现计数器功能

闭包可以访问到创建它的函数的内部变量，在这个例子中，利用函数本身的作用域和闭包的特性，实现了一个计数器：

function counter() {
  var num = 0;

  return function() {
    num ++;
    console.log(num);
  }
}

var c1 = counter();
c1(); // 输出 1
c1(); // 输出 2
c1(); // 输出 3

var c2 = counter();
c2(); // 输出 1
c2(); // 输出 2

在 counter 函数内部定义了一个变量 num，并且返回了一个闭包，这个闭包可以访问到 num 变量。在外部多次调用闭包，每次都能够更新 num 的值并输出。

3.2 示例二：使用匿名函数实现模块化

利用函数本身的作用域可以实现模块化开发，通过匿名函数的方式可以模拟出模块的功能：

var module = (function() {
  var name = 'module';

  function getName() {
    return name;
  }

  return {
    getName: getName
  }
})();

console.log(module.getName()); // 输出 'module'

在示例中，利用匿名函数自身作用域的特性，定义了一个名为 module 的变量，并且返回了一个对象，这个对象包含了用于外部调用的函数 getName。在外部调用 module.getName() 可以输出 'module'。这种方式可以模拟出一个独立的模块，避免了全局变量的污染。