javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript闭包

一文带你深入了解JavaScript中的闭包

作者：风如也

闭包（closure）是一个函数以及其捆绑的周边环境状态的引用的组合，就是让开发者可以从内部函数访问外部函数的作用域，下面下面小编就来和大家深入聊聊它的使用吧

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。

简言之：闭包就是能够读取其他函数内部变量的函数。

词法作用域

示例1：

function init() {
  var name = "localName"; // name 是一个被 init 创建的局部变量
  function closureName() { // closureName() 是内部函数，一个闭包
    alert(name); // 使用了父函数中声明的变量
  }
  closureName();
}
init();

上面词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。词法指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。

示例2：

function fn() {
  var name = "localName";
  function closureName() {
    alert(name);
  }
  return closureName;
}
var myFn = fn()
myFn();

示例2的运行效果和示例1一样。不同之处在于内部函数closureName()在执行前，从外部函数返回。

JavaScript中的函数会形成闭包。闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。示例2中，myFn是执行fn时创建的closureName函数实例的引用。closureName的实例维持了一个对它的词法环境（变量name存在其中）的引用。

所以，当myFn被调用时，变量name仍然可以使用。

示例3：

function fn(x) {
  return function(y) {
    return x + y;
  }
}
var addOne = fn(1)
var addTwo = fn(2)
console.log(addOne(3)) // 4
console.log(addTwo(3)) // 5

示例3中，我们可以把fn看作一个函数工厂，它创建了将指定的值和他的参数相加求和的函数。我们使用这个函数工厂创建了两个新函数。一个将其参数和1求和，一个将其参数和2求和。

addOne和addTwo都是闭包，他们共享相同的函数定义，但是保存了不同的词法环境。在addOne的词法环境中，x是1。addTwo中，x是2。

使用闭包场景

闭包允许将函数与其所操作的某些数据（环境）关联起来。类似于面向对象编程。比如对象允许我们将某些数据（如对象的属性）与一个或多个方法相关联。

比如我们想在页面上添加调整字体大小的按钮，size1和size2就是闭包。

示例4：

<button id="btn1">size12</button>
<button id="btn2">size24</button>
<p>hello</p>
<script>
    function setFontSize(num) {
        return function() {
            return num + 'px';
        }
    }
    var size1 = setFontSize(12)
    var size2 = setFontSize(24)
    document.getElementById("btn1").onclick = () => {
        let pdom = document.getElementsByTagName("p")
        pdom[0].style.fontSize = size1()
    }
    document.getElementById("btn2").onclick = () => {
        let pdom = document.getElementsByTagName("p")
        pdom[0].style.fontSize = size2()
    }
</script>

用闭包模拟私有方法

使用闭包来模拟私有方法，私有方法不仅仅有利于限制对代码的访问，还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。

示例5：使用闭包定义公共函数，并令其可以访问私有函数和变量

var Counter = (function () {
    var privateCounter = 0
    function operateCounter(val) {
        privateCounter += val
    }
    return {
        increment: function () {
            operateCounter(1);
        },
        decrement: function () {
            operateCounter(-1);
        },
        value: function () {
            return privateCounter;
        }
    }
})()
console.log(Counter.value())
Counter.increment()
Counter.increment()
console.log(Counter.value())
Counter.decrement()
console.log(Counter.value())

之前的示例中，每个闭包都有自己的词法环境。示例5只创建了一个词法环境，为3个函数共享：Counter.increment，Counter.decrement 和 Counter.value。

示例5的共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 operateCounter 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。

这三个公共函数共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 operateCounter 函数。

注意：示例5中，我们定义了一个立即执行的匿名函数，并赋值给Counter，那么我们也可以把这个匿名函数不立即执行，赋值给变量makeCounter，这样就能创建多个计数器。

var makeCounter = (function () {
    var privateCounter = 0
    function operateCounter(val) {
        privateCounter += val
    }
    return {
        increment: function () {
            operateCounter(1);
        },
        decrement: function () {
            operateCounter(-1);
        },
        value: function () {
            return privateCounter;
        }
    }
})
var Counter1 = makeCounter();
var Counter2 = makeCounter();

Counter1和Counter2闭包都是引用自己词法作用域内的变量。

在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

闭包的用途

总结闭包的用途：

可以读取函数内部的变量；

让变量的值始终保存在内存中。

在循环中创建闭包：一个场景的错误

在引入let，关键字之前，在循环中创建闭包有一个常见的问题。

for(var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
} // 5 5 5 5 5

我们想输出0 1 2 3 4，确发现打印了5个5出来，为什么？

for循环在宏任务阶段就执行了，setTimeout在微任务阶段执行，此时变量i因为是全局变量，i的值已经变为5了，所以最后打印出来是5个5。

如何解决呢？

1.使用闭包

将setTimeout的内容放置闭包中，循环执行时每个闭包中都有对应的作用域i

for(var i = 0; i < 5; i++) {
  (function(i){
    setTimeout(() => {
      console.log(i)
    }, 0)
  })(i)
} // 0 1 2 3 4

2.使用let声明变量i

for(let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
} // 0 1 2 3 4

3.使用forEach来遍历数组

[0, 1, 2, 3, 4].forEach((i) => {
  setTimeout(() => {
    console.log(i)
  }, 0)
}) // 0 1 2 3 4

性能考量

如果不是某些特定任务需要使用闭包，在其他函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

例如：在创建新的对象或者类时，方法通常应该关联到对象的原型上，而不是定义到对象的构造器中。因为每次构造器被调用时，方法都会被重新赋值一次。（即每创建一个对象，方法都会被重新赋值）

比如：

function CreateObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function () {
    return this.name;
  };
  this.getMessage = function () {
    return this.message;
  };
}

上面代码中，并没有利用到闭包的好处。因此可以避免使用闭包。修改后如下：

function CreateObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
CreateObject.prototype = {
  getName() {
    return this.name;
  },
  getMessage() {
    return this.message;
  },
};

但是，我们不建议重新定义对应的原型，而是在原型的基础上去添加方法，修改后如下：

function CreateObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
CreateObject.prototype.getName = function () {
  return this.name;
};
CreateObject.prototype.getMessage = function () {
  return this.message;
};

上面示例中，继承的原型可以被所有对象共享，而不比在每一次创建对象时去定义方法。

使用闭包注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

到此这篇关于一文带你深入了解JavaScript中的闭包的文章就介绍到这了,更多相关JavaScript闭包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文