接口页面--全局数据:
site-> {"id":1,"name":"雅俗共赏","domain":"https://cqsmservices.cn","email":" ","wx":null,"icp":null,"code":"","json":{"siteSubtitle":"• 禅悦"},"title":"雅俗共赏","keywords":"雅俗共赏","description":"雅俗共赏","createdAt":null,"updatedAt":null}
111-->• 禅悦
nav-> [{"id":1,"pid":0,"name":"前端开发","pinyin":"fedev","path":"/fedev","sort":0,"target":"0","status":"0","type":"0","children":[{"id":9,"pid":1,"name":"JavaScript","pinyin":"JavaScript","path":"/fedev/JavaScript","sort":0,"target":"0","status":"0","type":"0"},{"id":10,"pid":1,"name":"vue","pinyin":"vue","path":"/qianduankaifa/vue","sort":0,"target":"0","status":"0","type":"0"}]},{"id":2,"pid":0,"name":"node开发","pinyin":"nodejs","path":"/nodejs","sort":0,"target":"0","status":"0","type":"0","children":[{"id":6,"pid":2,"name":"express","pinyin":"express","path":"/nodejs/express","sort":0,"target":"0","status":"0","type":"0"},{"id":7,"pid":2,"name":"服务运维","pinyin":"fuwuyunwei","path":"/nodejs/fuwuyunwei","sort":0,"target":"0","status":"0","type":"0"},{"id":11,"pid":2,"name":"mysql","pinyin":"mysql","path":"/nodekaifa/mysql","sort":0,"target":"0","status":"0","type":"0"}]},{"id":3,"pid":0,"name":"前端库","pinyin":"qianduanku","path":"/qianduanku","sort":0,"target":"0","status":"0","type":"0","children":[{"id":12,"pid":3,"name":"测试","pinyin":"ceshi","path":"/qianduanku/ceshi","sort":0,"target":"0","status":"0","type":"0"}]},{"id":4,"pid":0,"name":"SEO","pinyin":"SEO","path":"/SEO","sort":0,"target":"0","status":"0","type":"0"},{"id":5,"pid":0,"name":"chanyue","pinyin":"chanyue","path":"/chanyue","sort":0,"target":"0","status":"0","type":"1"},{"id":8,"pid":0,"name":"关于","pinyin":"guanyu","path":"/guanyu","sort":0,"target":"0","status":"0","type":"1"}]
category-> [{"id":1,"pid":0,"name":"前端开发","pinyin":"fedev","path":"/fedev","sort":0,"target":"0","status":"0","type":"0","children":[{"id":9,"pid":1,"name":"JavaScript","pinyin":"JavaScript","path":"/fedev/JavaScript","sort":0,"target":"0","status":"0","type":"0"},{"id":10,"pid":1,"name":"vue","pinyin":"vue","path":"/qianduankaifa/vue","sort":0,"target":"0","status":"0","type":"0"}]},{"id":2,"pid":0,"name":"node开发","pinyin":"nodejs","path":"/nodejs","sort":0,"target":"0","status":"0","type":"0","children":[{"id":6,"pid":2,"name":"express","pinyin":"express","path":"/nodejs/express","sort":0,"target":"0","status":"0","type":"0"},{"id":7,"pid":2,"name":"服务运维","pinyin":"fuwuyunwei","path":"/nodejs/fuwuyunwei","sort":0,"target":"0","status":"0","type":"0"},{"id":11,"pid":2,"name":"mysql","pinyin":"mysql","path":"/nodekaifa/mysql","sort":0,"target":"0","status":"0","type":"0"}]},{"id":3,"pid":0,"name":"前端库","pinyin":"qianduanku","path":"/qianduanku","sort":0,"target":"0","status":"0","type":"0","children":[{"id":12,"pid":3,"name":"测试","pinyin":"ceshi","path":"/qianduanku/ceshi","sort":0,"target":"0","status":"0","type":"0"}]},{"id":4,"pid":0,"name":"SEO","pinyin":"SEO","path":"/SEO","sort":0,"target":"0","status":"0","type":"0"},{"id":5,"pid":0,"name":"chanyue","pinyin":"chanyue","path":"/chanyue","sort":0,"target":"0","status":"0","type":"1"},{"id":6,"pid":2,"name":"express","pinyin":"express","path":"/nodejs/express","sort":0,"target":"0","status":"0","type":"0"},{"id":7,"pid":2,"name":"服务运维","pinyin":"fuwuyunwei","path":"/nodejs/fuwuyunwei","sort":0,"target":"0","status":"0","type":"0"},{"id":8,"pid":0,"name":"关于","pinyin":"guanyu","path":"/guanyu","sort":0,"target":"0","status":"0","type":"1"},{"id":9,"pid":1,"name":"JavaScript","pinyin":"JavaScript","path":"/fedev/JavaScript","sort":0,"target":"0","status":"0","type":"0"},{"id":10,"pid":1,"name":"vue","pinyin":"vue","path":"/qianduankaifa/vue","sort":0,"target":"0","status":"0","type":"0"},{"id":11,"pid":2,"name":"mysql","pinyin":"mysql","path":"/nodekaifa/mysql","sort":0,"target":"0","status":"0","type":"0"},{"id":12,"pid":3,"name":"测试","pinyin":"ceshi","path":"/qianduanku/ceshi","sort":0,"target":"0","status":"0","type":"0"}]
friendlink-> [{"id":1,"title":"香港日报","link":"http://www.hongkongdaily.net","sort":0,"createdAt":"2023-07-22T22:59:55.000Z"}]
base_url-> /public/template/default
frag--->{"footer-guanyu":{"name":"底部-关于","content":"<div class=\"col-6\">\n<h4 class=\"f-15 pb-10\">关于</h4>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">关于我们</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">最新动态</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">联系作者</a></p>\n</div>"},"footer-chanyue":{"name":"底部-禅悦","content":"<div class=\"col-6\">\n<h4 class=\"f-15 pb-10\">chanyue-cms</h4>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">在线文档</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">视频教程</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">标签工具</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">模板</a></p>\n</div>"},"footer-nodejs":{"name":"底部-nodejs","content":"<div class=\"col-6\">\n<h4 class=\"f-15 pb-10\">nodejs</h4>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">express</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">koa</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">mysql</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">mongoDB</a></p>\n</div>"},"footer-fe":{"name":"底部-前端","content":"<div class=\"col-6\">\n<h4 class=\"f-15 pb-10\">前端</h4>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">JavaScript</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">vue</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">react</a></p>\n<p class=\"f-13 pt-3 pb-3\"><a class=\"c-595959\">css3</a></p>\n</div>"},"chanyue-introduce":{"name":"chanyue-cms介绍","content":"<p class=\"mt-10 f-14 lh-24\">禅悦内容管理系统,基于`nodejs` `express` `mysql` `knex` `jwt` `vue3` 进行开发的一套实用轻量cms系统,且提供丰富的api数据接口。常用企业网站,微信小程序官网,图片网站,新闻资讯,软件下载网站,博客,文章等诸多文章类型网站开发,也适用于前端二次开发。<a title=\"\" href=\"http://localhost:81/\">[详情]</a></p>"},"copyright":{"name":"版权","content":"<p class=\"f-13 text-c c-bfbfbf\">自豪的采用 chanyue-cms</p>"},"ad":{"name":"广告","content":"<p>观呼吸,起禅悦,听心路,入定境。</p>\n<p>肚脐放松,神藏其中,火起气成,百日呼吸渐止。后扩展到整个小腹,后扩展到全身,接天地能量入体,天人合一,化气为光,时刻出入有无。</p>\n<p>修行开经络,通窍穴,开天门,透全身,化身心入空,后天人合一,后化气为场,化场为电,化电为光,化光为虚无,化虚无为寂静,化寂静为寂灭,化寂灭,后修三千功德,了无所得,无所住则道成。</p>"}}
tag--->[{"id":4,"name":"pdf","path":"pdf"},{"id":3,"name":"开发工具","path":"devtool"},{"id":2,"name":"js库","path":"jslib"},{"id":1,"name":"cms","path":"cms"}]
-----------
position------>[{"id":1,"pid":0,"name":"前端开发","pinyin":"fedev","path":"/fedev","sort":0,"target":"0","status":"0","type":"0","children":[{"id":9,"pid":1,"name":"JavaScript","pinyin":"JavaScript","path":"/fedev/JavaScript","sort":0,"target":"0","status":"0","type":"0"},{"id":10,"pid":1,"name":"vue","pinyin":"vue","path":"/qianduankaifa/vue","sort":0,"target":"0","status":"0","type":"0"}]},{"id":9,"pid":1,"name":"JavaScript","pinyin":"JavaScript","path":"/fedev/JavaScript","sort":0,"target":"0","status":"0","type":"0"}]
navSub------>{"cate":{"id":9,"pid":1,"name":"JavaScript","pinyin":"JavaScript","path":"/fedev/JavaScript","sort":0,"target":"0","status":"0","type":"0"},"id":9}
article------>{"id":7,"cid":9,"sub_cid":"","title":"什么是闭包,如何合理的使用闭包","short_title":"","tag_id":"","attr":"2","seo_title":"","seo_keywords":"","seo_description":"","source":"","author":"","description":"闭包(closure)是指函数与其周围的状态(lexical environment,词法环境)的组合。这个环境包含了在函数声明时所能访问的所有变量和参数,并且在函数执行过程中始终存在。","img":null,"content":"<div>\n<div>\n<p>闭包(closure)是指函数与其周围的状态(lexical environment,词法环境)的组合。这个环境包含了在函数声明时所能访问的所有变量和参数,并且在函数执行过程中始终存在。</p>\n<p>在JavaScript中,每当一个函数被创建时,就会创建一个新的词法环境。这个词法环境包含了函数中使用的所有变量和参数。如果这个函数返回一个函数,则返回的函数将持有这个词法环境,也就是说,它可以访问在父函数中定义的所有变量和参数。这种函数就称为闭包。</p>\n<p><strong>一、闭包的特点</strong></p>\n<p>闭包是指函数能够访问其定义时所在的词法作用域的特性。具体来说,闭包有以下几个特点:</p>\n<ol>\n<li>函数嵌套函数:闭包必须有函数嵌套函数的结构。</li>\n<li>内部函数可以访问外部函数的变量:内部函数可以访问外部函数中的变量,即使在外部函数执行完毕后,这些变量仍然可以被访问。</li>\n<li>外部函数返回内部函数:外部函数必须返回内部函数,才能形成闭包。</li>\n</ol>\n<p><strong>二、闭包的使用场</strong></p>\n<p><strong>封装变量:使用闭包可以实现变量的私有化,从而避免全局变量的污染。</strong></p>\n<p>通过将函数和函数内部定义的变量作为一个整体,形成私有作用域,从而实现变量的封装。具体来说,闭包可以将变量的作用域限制在函数内部,从而避免了全局变量的污染和外部对变量的直接访问。</p>\n<p>下面是一个简单的示例,演示了如何使用闭包实现变量的封装</p>\n<div class=\"code-block-extension-header\">\n<div class=\"code-block-extension-headerLeft\">\n<div class=\"code-block-extension-foldBtn\"> </div>\n</div>\n<div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">scss</span>\n<div class=\"code-block-extension-copyCodeBtn\">复制代码</div>\n</div>\n</div>\n<pre><code class=\"hljs language-scss code-block-extension-codeShowNum\" lang=\"scss\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\">function <span class=\"hljs-built_in\">createCounter</span>() {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"> let count = <span class=\"hljs-number\">0</span>;</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"> return function () {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"> count++;</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"> console<span class=\"hljs-selector-class\">.log</span>(count);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"> };</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\">}</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\">const counter = <span class=\"hljs-built_in\">createCounter</span>();</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\"><span class=\"hljs-built_in\">counter</span>(); <span class=\"hljs-comment\">// 输出 1</span></span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\"><span class=\"hljs-built_in\">counter</span>(); <span class=\"hljs-comment\">// 输出 2</span></span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\"><span class=\"hljs-built_in\">counter</span>(); <span class=\"hljs-comment\">// 输出 3</span></span>\n</code></pre>\n<p>在上面的代码中,<code>createCounter</code> 函数返回了一个内部函数,该函数可以访问 <code>createCounter</code> 中定义的 <code>count</code> 变量。由于 <code>count</code> 变量定义在 <code>createCounter</code> 函数内部,因此外部无法直接访问该变量,从而实现了变量的封装。</p>\n<p>通过调用 <code>createCounter</code> 函数返回的内部函数,可以实现计数器的功能,每次调用时计数器加 1,最后输出计数器的值。由于 <code>count</code> 变量被定义在 <code>createCounter</code> 函数内部,并且该函数返回的是一个闭包,因此 <code>count</code> 变量的值可以被保存在内存中,并且在多次调用时能够保持不变。</p>\n<p><strong>实现模块化:通过闭包可以将代码模块化,从而避免变量名冲突等问题。</strong></p>\n<p>使用闭包,可以将模块内部的状态和方法封装起来,从而实现模块化的设计。下面是一个简单的示例,演示了如何使用闭包实现模块化编程:</p>\n<div class=\"code-block-extension-header\">\n<div class=\"code-block-extension-headerLeft\">\n<div class=\"code-block-extension-foldBtn\"> </div>\n</div>\n<div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">javascript</span>\n<div class=\"code-block-extension-copyCodeBtn\">复制代码</div>\n</div>\n</div>\n<pre><code class=\"hljs language-javascript code-block-extension-codeShowNum\" lang=\"javascript\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-keyword\">const</span> <span class=\"hljs-variable language_\">module</span> = (<span class=\"hljs-keyword\">function</span> () {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"> <span class=\"hljs-keyword\">let</span> count = <span class=\"hljs-number\">0</span>;</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"> <span class=\"hljs-keyword\">function</span> <span class=\"hljs-title function_\">increment</span>() {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"> count++;</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"> <span class=\"hljs-variable language_\">console</span>.<span class=\"hljs-title function_\">log</span>(count);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"> }</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\"> <span class=\"hljs-keyword\">function</span> <span class=\"hljs-title function_\">decrement</span>() {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\"> count--;</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\"> <span class=\"hljs-variable language_\">console</span>.<span class=\"hljs-title function_\">log</span>(count);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\"> }</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\"> <span class=\"hljs-keyword\">return</span> {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\"> increment,</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"16\"> decrement,</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\"> };</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\">})();</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"20\"><span class=\"hljs-variable language_\">module</span>.<span class=\"hljs-title function_\">increment</span>(); <span class=\"hljs-comment\">// 输出 1</span></span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\"><span class=\"hljs-variable language_\">module</span>.<span class=\"hljs-title function_\">increment</span>(); <span class=\"hljs-comment\">// 输出 2</span></span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\"><span class=\"hljs-variable language_\">module</span>.<span class=\"hljs-title function_\">decrement</span>(); <span class=\"hljs-comment\">// 输出 1</span></span>\n</code></pre>\n<p>在上面的代码中,定义了一个自执行函数,该函数返回了一个对象,该对象包含两个方法 <code>increment</code> 和 <code>decrement</code>。这两个方法都可以访问函数内部的变量 <code>count</code>,从而实现了模块内部的状态封装。</p>\n<p>在执行该函数时,会创建一个闭包,该闭包可以访问自执行函数内部的变量和方法。由于闭包的特性,外部无法访问自执行函数内部的变量和方法,从而实现了模块化的设计。</p>\n<p><strong>实现柯里化:使用闭包可以实现柯里化,从而方便地进行函数组合。</strong></p>\n<p>柯里化(Currying)是一种函数式编程技术,它允许我们把接受多个参数的函数转化为一系列只接受一个参数的函数,且这些函数都返回一个新函数,新函数可以接受下一个参数,直到所有参数被接受完毕。</p>\n<p>举个例子,假设我们有一个加法函数 <code>add</code>,它接受两个参数并返回它们的和:</p>\n<div class=\"code-block-extension-header\">\n<div class=\"code-block-extension-headerLeft\">\n<div class=\"code-block-extension-foldBtn\"> </div>\n</div>\n<div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">scss</span>\n<div class=\"code-block-extension-copyCodeBtn\">复制代码</div>\n</div>\n</div>\n<pre><code class=\"hljs language-scss code-block-extension-codeShowNum\" lang=\"scss\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\">function <span class=\"hljs-built_in\">add</span>(x, y) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"> return x + y;</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\">}</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"><span class=\"hljs-built_in\">add</span>(<span class=\"hljs-number\">2</span>, <span class=\"hljs-number\">3</span>); <span class=\"hljs-comment\">// 输出 5</span></span>\n</code></pre>\n<p>通过柯里化,我们可以把这个函数转化为一个只接受一个参数的函数:</p>\n<div class=\"code-block-extension-header\">\n<div class=\"code-block-extension-headerLeft\">\n<div class=\"code-block-extension-foldBtn\"> </div>\n</div>\n<div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">javascript</span>\n<div class=\"code-block-extension-copyCodeBtn\">复制代码</div>\n</div>\n</div>\n<pre><code class=\"hljs language-javascript code-block-extension-codeShowNum\" lang=\"javascript\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title function_\">add</span>(<span class=\"hljs-params\">x</span>) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"> <span class=\"hljs-keyword\">return</span> <span class=\"hljs-keyword\">function</span> (<span class=\"hljs-params\">y</span>) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"> <span class=\"hljs-keyword\">return</span> x + y;</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"> };</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\">}</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><span class=\"hljs-title function_\">add</span>(<span class=\"hljs-number\">2</span>)(<span class=\"hljs-number\">3</span>); <span class=\"hljs-comment\">// 输出 5</span></span>\n</code></pre>\n<p>在这个例子中,我们将 <code>add</code> 函数转化为一个返回一个函数的函数。返回的函数可以接受第二个参数 <code>y</code>,并返回它们的和。</p>\n<p>使用闭包实现柯里化非常方便。我们可以使用一个函数返回另一个函数,并在返回的函数中使用闭包来保留外部函数的参数。下面是一个简单的示例:</p>\n<div class=\"code-block-extension-header\">\n<div class=\"code-block-extension-headerLeft\">\n<div class=\"code-block-extension-foldBtn\"> </div>\n</div>\n<div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">javascript</span>\n<div class=\"code-block-extension-copyCodeBtn\">复制代码</div>\n</div>\n</div>\n<pre><code class=\"hljs language-javascript code-block-extension-codeShowNum\" lang=\"javascript\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title function_\">add</span>(<span class=\"hljs-params\">x</span>) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"> <span class=\"hljs-keyword\">return</span> <span class=\"hljs-keyword\">function</span> (<span class=\"hljs-params\">y</span>) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"> <span class=\"hljs-keyword\">return</span> x + y;</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"> };</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\">}</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"><span class=\"hljs-keyword\">const</span> add2 = <span class=\"hljs-title function_\">add</span>(<span class=\"hljs-number\">2</span>);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\"><span class=\"hljs-variable language_\">console</span>.<span class=\"hljs-title function_\">log</span>(<span class=\"hljs-title function_\">add2</span>(<span class=\"hljs-number\">3</span>)); <span class=\"hljs-comment\">// 输出 5</span></span>\n</code></pre>\n<p>在上面的示例中,<code>add</code> 函数返回一个新函数,该函数接受一个参数 <code>y</code> 并返回它们的和。我们可以将 <code>add</code> 函数应用于第一个参数 <code>2</code>,从而创建一个新的函数 <code>add2</code>。<code>add2</code> 函数只需要一个参数 <code>y</code>,它会将 <code>2</code> 和 <code>y</code> 相加并返回结果。</p>\n<p>使用闭包实现柯里化的关键在于,返回的函数可以访问外部函数的变量 <code>x</code>,从而将其保留下来。每次调用返回的函数时,它都会使用之前的参数 <code>x</code>,并接受一个新的参数 <code>y</code>,从而实现柯里化的效果。</p>\n<p><strong>实现异步编程:使用闭包可以实现异步编程,从而避免回调地狱的问题。</strong></p>\n<p>因为它们可以帮助我们处理回调函数的嵌套和异步代码的执行顺序。</p>\n<p>下面是一个使用闭包实现异步编程的示例。假设我们有一个 <code>getData</code> 函数,它会从远程服务器获取数据。由于网络请求是异步的,我们需要使用回调函数来处理获取到数据的情况。我们可以使用闭包来避免回调函数的嵌套,从而提高代码的可读性。</p>\n<div class=\"code-block-extension-header\">\n<div class=\"code-block-extension-headerLeft\">\n<div class=\"code-block-extension-foldBtn\"> </div>\n</div>\n<div class=\"code-block-extension-headerRight\"><span class=\"code-block-extension-lang\">scss</span>\n<div class=\"code-block-extension-copyCodeBtn\">复制代码</div>\n</div>\n</div>\n<pre><code class=\"hljs language-scss code-block-extension-codeShowNum\" lang=\"scss\"><span class=\"code-block-extension-codeLine\" data-line-num=\"1\">function <span class=\"hljs-built_in\">getData</span>(url, onSuccess, onError) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"2\"> const xhr = new <span class=\"hljs-built_in\">XMLHttpRequest</span>();</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"3\"> xhr<span class=\"hljs-selector-class\">.open</span>('GET', url);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"4\"> xhr<span class=\"hljs-selector-class\">.onload</span> = <span class=\"hljs-built_in\">function</span>() {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"5\"> if (xhr.status === <span class=\"hljs-number\">200</span>) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"6\"> <span class=\"hljs-built_in\">onSuccess</span>(xhr.response);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"7\"> } else {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"8\"> <span class=\"hljs-built_in\">onError</span>(xhr.statusText);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"9\"> }</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"10\"> };</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"11\"> xhr<span class=\"hljs-selector-class\">.onerror</span> = <span class=\"hljs-built_in\">function</span>() {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"12\"> <span class=\"hljs-built_in\">onError</span>(xhr.statusText);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"13\"> };</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"14\"> xhr<span class=\"hljs-selector-class\">.send</span>();</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"15\">}</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"17\">function <span class=\"hljs-built_in\">processData</span>(data) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"18\"> <span class=\"hljs-comment\">// 处理数据</span></span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"19\">}</span>\n\n<span class=\"code-block-extension-codeLine\" data-line-num=\"21\">function <span class=\"hljs-built_in\">handleGet</span>() {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"22\"> <span class=\"hljs-built_in\">getData</span>('/api/data', function(response) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"23\"> <span class=\"hljs-built_in\">processData</span>(response);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"24\"> }, <span class=\"hljs-built_in\">function</span>(error) {</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"25\"> console<span class=\"hljs-selector-class\">.error</span>('获取数据失败:', error);</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"26\"> });</span>\n<span class=\"code-block-extension-codeLine\" data-line-num=\"27\">}</span>\n</code></pre>\n<p>在上面的示例中,<code>getData</code> 函数接受三个参数:一个 URL,一个成功回调函数 <code>onSuccess</code> 和一个失败回调函数 <code>onError</code>。它会使用 XMLHttpRequest 对象来获取数据,并在数据加载完成后调用适当的回调函数。</p>\n<p><code>handleGet</code> 函数是一个事件处理程序,它会调用 <code>getData</code> 函数并提供两个回调函数。由于异步编程的特性,<code>getData</code> 函数会立即返回,而不会等待数据加载完成。因此,我们需要使用闭包来保留对回调函数的引用,并在数据加载完成后调用它们。这样,我们就可以在代码中使用普通的函数调用,而不必担心回调函数的嵌套。</p>\n<p>闭包可以将回调函数与其相关的数据进行捆绑,并在适当的时候调用回调函数。这使得异步编程变得更加直观和易于管理,从而使我们的代码更加清晰和可读。</p>\n<p><strong>三、闭包的运用方式</strong></p>\n<p>闭包可以使用以下方式来运用:</p>\n<ol>\n<li>将内部函数作为返回值:将内部函数作为返回值,即可创建闭包。</li>\n<li>将内部函数作为参数传递给其他函数:将内部函数作为参数传递给其他函数,即可在其他函数中创建闭包。</li>\n<li>使用 IIFE(立即执行函数表达式):使用 IIFE 可以立即执行函数,并且将内部函数作为返回值,从而创建闭包。</li>\n</ol>\n<p><strong>四、闭包的注意事项</strong></p>\n<p>闭包虽然有很多优点,但是也需要注意以下几点:</p>\n<ol>\n<li>内存泄漏:闭包会一直持有外部作用域中的变量和参数,如果不及时释放,就会导致内存泄漏。</li>\n<li>性能问题:由于闭包会持有外部作用域中的变量和参数,因此会占用更多的内存和 CPU 资源。</li>\n<li>作用域链问题:由于闭包可以访问外部作用域中的变量和参数,因此会导致作用域链的变长,从而影响代码的执行效率。</li>\n</ol>\n</div>\n</div>","status":0,"pv":4637,"link":"http://www.baidu.com","createdAt":"2023-08-06 10:30:15","updatedAt":"2023-08-06 10:30:15","field":{},"tags":[]}
article.tags------>[]
news------>[{"id":7,"title":"什么是闭包,如何合理的使用闭包","short_title":"","img":null,"createdAt":"2023-08-06T10:30:15.000Z","description":"闭包(closure)是指函数与其周围的状态(lexical environment,词法环境)的组合。这个环境包含了在函数声明时所能访问的所有变量和参数,并且在函数执行过程中始终存在。","pinyin":"JavaScript","name":"JavaScript","path":"/qianduankaifa/JavaScript"}]
hot------>[{"id":7,"title":"什么是闭包,如何合理的使用闭包","path":"/qianduankaifa/JavaScript"}]
imgs------>[]
pre------>
next------>