JavaScript 闭包的四大核心应用场景解析

JavaScript闭包的核心用途概述

我们来探讨闭包的具体用途。实际上，借助闭包机制，开发者可以完成多种复杂任务。例如，它可以用来模拟面向对象的代码风格，使代码表达更加优雅简洁，并在特定场景下提升执行效率。

利用匿名自执行函数避免全局污染

1. 匿名自执行函数

在JavaScript中，若变量未使用var声明，默认会作为全局对象的属性添加。这种临时变量混入全局对象会带来负面影响：其他函数可能误用这些变量，且全局对象过于庞大会影响访问速度（因为变量取值需从原型链遍历）。除了始终使用var关键字外，常遇到一种情况：某些函数只需执行一次，其内部变量无需长期维护，例如UI初始化。此时可使用闭包解决。

var datamodel = {
table : [],
tree : {}
};    
     
(function(dm){
for(var i = 0; i < dm.table.rows; i++){
var row = dm.table.rows[i];
for(var j = 0; j < row.cells; i++){
drawCell(i, j);
       }    
    }    
       
//build dm.tree
})(datamodel);

我们创建了一个匿名函数并立即执行。由于外部无法引用其内部变量，执行完毕后变量很快被释放。关键在于这种机制不会污染全局对象。

通过闭包实现数据缓存优化性能

2. 缓存

再看一个例子：假设有一个处理过程耗时的函数对象，每次调用都花费大量时间。我们可以将计算结果存储起来，下次调用时先查找缓存；若未找到则计算、更新缓存并返回；若已存在则直接返回缓存值。闭包能实现这一点，因为它不释放外部引用，从而保留函数内部的值。

var CachedSearchBox = (function(){
var cache = {},
count = [];
return {
attachSearchBox : function(dsid){
if(dsid in cache){//如果结果在缓存中
return cache[dsid];//直接返回缓存中的对象
           }    
var fsb = new uikit.webctrl.SearchBox(dsid);//新建
cache[dsid] = fsb;//更新缓存
if(count.length > 100){//保正缓存的大小<=100
delete cache[count.shift()];
           }    
return fsb;
       },    
     
clearSearchBox : function(dsid){
if(dsid in cache){
cache[dsid].clearSelection();
           }    
       }    
    };    
})();    
     
CachedSearchBox.attachSearchBox("input1");

这样，当第二次调用CachedSearchBox.attachSerachBox(“input1”)时，我们可以直接从缓存获取对象，无需重新创建新的searchbox对象。

使用闭包实现私有变量封装

3. 实现封装

先看一个关于封装的例子：在person外部无法直接访问其内部变量，但通过提供闭包形式即可访问。

var person = function(){
//变量作用域为函数内部，外部无法访问
var name = "default";
       
return {
getName : function(){
return name;
       },    
setName : function(newName){
name = newName;
       }    
    }    
}();    
     
print(person.name);//直接访问，结果为undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName());

借助闭包模拟面向对象编程机制

得到结果如下： undefined default abruzzi 4. 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制， 这样不同的对象(类的实例)拥有独立的成员及状态，互不干涉。虽然JavaScript中没有类这样的机制，但是通过使用闭包， 我们可以模拟出这样的机制。还是以上边的例子来讲：

function Person(){
var name = "default";
       
return {
getName : function(){
return name;
       },    
setName : function(newName){
name = newName;
       }    
    }    
};    
     
     
var john = Person();
print(john.getName());
john.setName("john");
print(john.getName());
     
var jack = Person();
print(jack.getName());
jack.setName("jack");
print(jack.getName());

运行结果如下： default john default jack 由此代码可知，john和jack都可以称为是Person这个类的实例，因为这两个实例对name这个成员的访问是独立的，互不影响的。

以上便是js闭包的作用了，非常简单易懂吧，希望对小伙伴们有所帮助