JavaScript，理解函数闭包的概念，变量作用域封装

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

闭包是高级编程语言里面非常基础的概念，苏南大叔的经验理解就是：把一部分函数或者变量，放在一个匿名函数里面执行。闭包起到了一个打包和隔离的作用。不过，官方对闭包的解释却是有些不同的。本文在JavaScript语言的环境下，对“闭包”的概念做个诠释。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，chrome@132.0.6834.84。

前文回顾

闭包和匿名函数的概念，是紧密相关的。因为匿名函数的一个重要使用场景就是闭包：在闭包逻辑内部，返回一个匿名函数。

return ()=>{}

return function (){}

相关链接：

• https://newsn.net/say/js-anonymous-func.html

如果改成闭包的概念的话，代码类似：

(function(){
  var var1 = "";
  return function (){
    console.log( var1 );
  }
})();

闭包概念

闭包是可访问一个函数作用域里变量的函数。闭包=函数+引用环境。

• 闭：指的是定义存在于函数内部的（匿名）函数。
• 包：闭函数包含了对外层函数名字的引用。

下面的代码闭包，return的匿名函数，可以访问到外部的变量i。变量i被打包隔离了，但是依然可以被匿名函数访问到。

// 闭包实现局部变量累加
function test() {
  var i = 1;
  return function () {
    i++;
    return i; // 返回累加后的变量
  };
}
var s = test(); // test()函数赋值给变量
console.log( s() ); // =>2; 匿名函数,累加一次
console.log( s() ); // =>3; 匿名函数,累加两次

this

这种函数里面return一个匿名函数的问题。由于匿名函数可能存在着两种形式，而对应的this逻辑存在着较大区别。

var ss = {
  user: "sunan",
  nn: function () {
    // 这里肯定能访问到 this.user
    return function () {
      // 普通函数的this来自于自身
      return this.user;
    };
  },
  nn2: function () {
    // 这里肯定能访问到 this.user
    return () => {
      // 箭头函数的this来自于父层
      return this.user;
    };
  },
  nn3: function () {
    var that = this;
    return function () {
      // this虽然来自于自身，但这里使用that进行了转换
      return that.user;
    };
  },
};
console.log(ss.nn()()); // undefined
console.log(ss.nn2()()); // sunan
console.log(ss.nn3()()); // sunan

arguments

这里的arguments，碰到了箭头函数的话，依然是有特殊情况。箭头函数没有arguments，它依然是继承父层的arguments变量。所以，这种闭包也是这样的情况。

var ss = {
  user: "sunan",
  nn: function () {
    return function () {
      return arguments;
    };
  },
  nn2: function () {
    return () => {
      // 箭头函数的arguments实际上父层的局部变量，在作用域下面的继承
      return arguments;
    };
  },
};
console.log(ss.nn()("su", "nan")); // [Arguments] { '0': 'su', '1': 'nan' }
console.log(ss.nn2()("su", "nan")); // [Arguments] {}
console.log(ss.nn2("su", "nan")()); // [Arguments] { '0': 'su', '1': 'nan' }

结语

这篇文章里面，闭包函数里面return的匿名函数，都可以访问到外部的变量。但是，如果是箭头函数的话，this和arguments都是有特别的情况的。

更多苏南大叔的JavaScript经验文章，请参考：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。