你不知道的javascript设计模式（三）----闭包

ゞ浴缸里的玫瑰 2022-10-23 05:52 182阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  封装变量
     *   *  函数作用域
         *  利用闭包封装工具函数
     *  延续局部变量的寿命
 *  小节

# 前言 #

前面我们学习了javascript语言的多态，封装以及基于原型编程，在我们介入到设计模式的真正学习中，我们将进一步学习js中的闭包和高阶函数，因为这些在后面设计模式的实现中占到了很重要的作用，这一章我们将先学习闭包的相关知识

# 正文 #

相信大家已经在很多文章看到了关于闭包的内容，但是请原谅我再一次老生常谈闭包的作用，因为闭包在javascript编程中占到很重要的分支，是否能够理解闭包决定以后对更多设计模式理解的程度

## 封装变量 ##

### 函数作用域 ###

javascript编译中有变量作用域的概念，也就是变量的有效区域的意思，平常我们在函数外定义的变量是作为全局变量，如果用var定义变量在函数内部，这个变量的作用域就在这个函数体内，只有这个函数可以使用

function test() {
    	var a = 1;
    }
    console.log(a); // error a is not defined

上面可以看到在全局范围是没办法访问函数test内的变量a的

### 利用闭包封装工具函数 ###

上面说到，因为js的变量访问是由内到外的，所以从全局直接访问函数内作用域是不可以的，但是如果在函数内定义另外的函数，里面的函数就可以访问到外部函数的变量，这就是闭包。  
        这样说大家可能还是很抽象，不知道这样有什么作用，这里举一个很常见的数据结构的例子来方便大家理解，比如我们需要获取一棵树的中序遍历并且输出出来应该怎么写呢

const res = [];
    const dfs = (root) => {
    	if （!root) {
    		return ;
    	}
    	dfs(root.left);
    	res.push(root.val);
    	dfs(root.right);
    }
    dfs(root);

假设root是根节点，执行完上面的函数以后，res就成了最后包含中序遍历结果的数组，但是这样写肯定不好，为什么呢，每当我们需要获取一次中序遍历的时候我们就需要把这段代码复制粘贴，所以我们把它封装成工具函数

function midTraversal = (root) => {
    	const res = [];
    	const dfs = (root) => {...}
    	dfs(root);
    	return res;
    }

这样就封装成了中序遍历的工具函数，只需要把根节点传给它，它就可以返回中序遍历的数组，其中封装在midTraversal中的dfs函数就是闭包，res就是midTraversal函数的私有变量

## 延续局部变量的寿命 ##

我们知道当一个函数结束以后，这个函数中的变量会被销毁掉，但是如果使用了闭包，因为局部变量在闭包中仍有调用，所以并不会销毁这个局部变量，相当于延续了它的寿命。  
        下面举一个例子方便大家理解，在举这个例子之前，先给大家普及一下数据埋点的概念，在商业化项目中，经常需要把用户的一些行为数据传给服务器端，来便于企业分析用户喜好进行精准性推荐，这种服务器端请求是只需要传递但是不需要服务器作出相应或者回复的，所以我们经常会用Img标签来进行数据埋点

var report = function(src) {
    	var img = new Image();
    	img.src = src;
    }

上面是数据埋点的一种实现，但是这种实现方法有可能会造成数据丢失的问题，为什么呢，因为report函数在执行完以后就会将img标签销毁掉，而这时候，img向对应src的http请求可能尚未开始，这时候我们就可以利用闭包去解决这个问题

var report = (function(src) {
    	var imgs = [];
    	return function(src) {
    		var img = new Image();
    		img.src = src;
    		imgs.push(img);
    	}
    }()

这样就不会出现之前的问题，在img生成后，因为闭包仍然会被保留

# 小节 #

这一节我们介绍了闭包，我们了解到闭包实际就是定义在函数内部的函数，可以起到定义私有变量以及延续局部变量寿命的作用，在后面一些设计模式的定义中，我们会了解到更多闭包的应用  
       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/a5e22bfa10ea435ebba59556541487f9.png