JavaScript闭包

嘧

已于 2022-08-25 22:23:31 修改

阅读量121

点赞数

分类专栏： js入门学习文章标签：开发语言 javascript 前端

于 2022-08-25 22:22:24 首次发布

本文链接：https://blog.csdn.net/qq_50748038/article/details/126455530

版权

js入门学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

作用域

在ES5中，作用域主要分为局部作用域和全局作用域。

局部作用域：也称为函数作用域，在函数内部声明的变量属于局部变量，且函数内部声明的变量只能在函数内部引用，不能在函数外部访问到。

全局作用域：在函数外声明的变量叫做全局变量，全局变量不仅可以在函数外部使用，还能在函数内部引用。

var a = 10;//全局变量
function foo() {
    console.log(a);
    var a = 100;//局部变量
    console.log(a); 
}
foo()//结果输出：undefined 100

//全局变量可以在函数内部使用
var a = 10;
function foo() {
    console.log(a);
}
foo()//结果输出：10

//函数内部的变量不能在函数外部访问到
var a
function foo() {
    console.log(a);
    var a = 100;
    console.log(a); 
}
foo()
console.log(a);//结果输出：undefined 100 undefined

由上面的案例可以看出作用域的作用之一就是隔离变量，即使变量名相同，但是作用域不同，因此不会在使用变量的过程中产生冲突。

作用域链

当自由变量顺着作用域寻找时，如果其父级作用域和祖级作用域都有自由变量的值，此时自由变量将优先选择父级作用域的值，遵循就近原则。

闭包

1、什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数，能够读取其他函数内部变量的函数。在JavaScript中读取函数的局部变量只能通过该函数的子函数。在一个函数内部嵌套另一个函数，内部函数引用了外部函数的数据形成一个闭包，内部的函数可以理解为外部函数的闭包函数。

2、闭包产生的条件

（1）函数嵌套函数

（2）内部函数应用了外部函数的数据

（3）参数和变量不会被销毁

（4）一个函数return了另外一个函数。（这个条件在网上的说法不一，有些人认同，有些人不认同）

3、闭包的创建

创建闭包最常见的方式就是函数嵌套函数

function foo() {
  var a = 1;
  var b = 2;
  function fn() {
    return a + b;
  }
  return fn;
}
console.log(foo()()); // 3

3、闭包的用途

（1）可以访问到内部函数的变量

（2）可以保持变量在内存中不被销毁

function f1() {
  var n = 999;
  nAdd = function () { n += 1 }
  function f2() {
    console.log(n);
  }
  return f2;
}
var result = f1(); // 相当于f2()
result(); // 999
nAdd();
result(); // 1000 函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除

在上面的案例中，f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制回收。

注意"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量。其次，nAdd的值是一个匿名函数，而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

4、闭包使用的注意事项

（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露，这是IE的BUG。

解决方法：在退出函数之前，将不使用的局部变量全部删除。

（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，一定不要随便改变父函数内部变量的值。多个子函数的scope都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。

5、闭包中的this指向

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var name = 'window'
    var obj = {
      name: 'obj',
      say: function () {
        return function () {
          console.log(this.name);
        }
      }
    }
    var x = obj.say()
    x() 
  </script>
</body>
</html>

控制台输出的结果为window 。因为此时obj.say()被赋值给了一个全局变量x，即是say()这个子函数在全局中被调用了，谁调用this就指向谁，所以此时this指向全局，因此this.name此时应为window。