-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathjs_closure.html
1 lines (1 loc) · 12.3 KB
/
js_closure.html
1
<!doctype html><html lang="zh-CN" class="night"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,maximum-scale=4,user-scalable=0" name="viewport"><title>Ede's Blog</title><meta name="description" content="Try to be a qualified programmer"><meta property="og:type" content="website"><meta property="og:description" content="Try to be a qualified programmer"><meta property="og:title" content="Ede's Blog"><meta property="og:site_name" content="Ede's Blog"><meta property="og:url" content="https://ede.ink"><meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="mainfest" href="/mainfest.json"><link rel="stylesheet" href="/public/css/common.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css"><script>!function(){var e=-1!==window.location.search.indexOf("theme=night")||"night"===window.localStorage.getItem("edeity-theme_theme"),t=-1!==window.location.search.indexOf("theme=light")||"light"===window.localStorage.getItem("edeity-theme_theme");(new Date).getHours();var n=document.querySelector("html");e?n.classList.add("night"):t?n.classList.remove("night"):n.classList.add("night")}(),document.addEventListener("DOMContentLoaded",function(){null!==document.querySelector("ol.toc")&&(document.querySelector("#nav-bar").style.cssText="display: block")})</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-M3J9QSEE2Z")</script><meta name="generator" content="Hexo 5.0.0"></head><body><div class="loading"></div><div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div><header class="fullscreen"><div class="toolbar"><i class="iconfont icon-menu"></i></div><h1><a href="/">Ede's Blog</a></h1><div class="head-link"><a class="btn waves" href="/"><span><i class="iconfont icon-home">Home </i></span></a><a class="btn waves" href="/about/index.html"><span><i class="iconfont icon-me">About </i></span></a><a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink"><span><i class="iconfont icon-github">Github</i></span></a></div></header><div class="some-link"><a class="btn" id="light-or-not"><i class="iconfont icon-light"></i> </a><a style="display:none" class="btn" id="up-to-top"><i class="iconfont icon-up"></i></a></div><div id="nav-bar" style="display:none"><div class="toc"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%90%86%E8%A7%A3%E9%97%AD%E5%8C%85%E7%9A%84%E4%B8%89%E4%B8%AA%E5%9F%BA%E6%9C%AC%E4%BA%8B%E5%AE%9E"><span class="toc-number">1.</span> <span class="toc-text">理解闭包的三个基本事实</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%A0%E4%B8%AA%E6%9C%89%E8%B6%A3%E7%9A%84%E4%BE%8B%E5%AD%90"><span class="toc-number">2.</span> <span class="toc-text">几个有趣的例子</span></a></li></ol></div></div><main id="content-main" class="section"><div class="list-item"><h1 class="post-title"><a id="JS中的闭包" class="article-link" href="">JS中的闭包</a></h1><div class="post-meta"><time class="meta published">Dec 30, 2015</time></div><div class="article"><div class="post-excerpt markdown-body"><p>原以为这也是闭包</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">'a'</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">B</span>(<span class="params"></span>) </span>{<span class="built_in">console</span>.log(a);}</span><br><span class="line">B();</span><br></pre></td></tr></table></figure><p>闭包不成立证明：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">'a'</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">B</span>(<span class="params"></span>) </span>{ <span class="built_in">console</span>.log(a); }</span><br><span class="line">B(); <span class="comment">// a</span></span><br><span class="line">a = <span class="string">'b'</span>;</span><br><span class="line">B(); <span class="comment">// b</span></span><br><span class="line"><span class="comment">// 在 function B被创建的那一刻，a对应的值并没有被“暂存”起来;</span></span><br></pre></td></tr></table></figure><p>闭包的标准：__是否创建封闭的空间，暂存闭包中被创建的变量属性__；</p><p>证明条件：</p><ol><li>存在两个或两个以上作用域</li><li>引用不包含自身或子作用域的变量</li></ol><h3 id="理解闭包的三个基本事实"><a href="#理解闭包的三个基本事实" class="headerlink" title="理解闭包的三个基本事实"></a>理解闭包的三个基本事实</h3><blockquote><ol><li>函数可以引用定义在其外部作用域的变量</li><li>闭包比创建它们的函数有更长的生命周期</li><li>闭包在内部存储其外部变量的引用，并能读写这些变量</li></ol></blockquote><p>结合<code>例子：</code></p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> B = {</span><br><span class="line"> increase: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 1, 3</span></span><br><span class="line"> a++;</span><br><span class="line"> <span class="keyword">return</span> B;</span><br><span class="line"> },</span><br><span class="line"> result: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> a;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> B;</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 1, 2, 3</span></span><br><span class="line"><span class="keyword">var</span> c = A().increase()</span><br><span class="line"> .result();</span><br><span class="line"><span class="built_in">console</span>.log(c); <span class="comment">// => 1</span></span><br></pre></td></tr></table></figure><h3 id="几个有趣的例子"><a href="#几个有趣的例子" class="headerlink" title="几个有趣的例子"></a>几个有趣的例子</h3><ul><li>封装</li></ul><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> result = <span class="number">0</span>;</span><br><span class="line"> <span class="built_in">this</span>.add = <span class="function"><span class="keyword">function</span>(<span class="params">b</span>) </span>{</span><br><span class="line"> result+=b;</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">this</span>.get = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> result;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> A();</span><br><span class="line">a.add(<span class="number">3</span>);</span><br><span class="line">a.get(); <span class="comment">// 3</span></span><br><span class="line">a.result; <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure><ul><li>暂存变量</li></ul><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">memorize</span>(<span class="params">a</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">b</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(a + b);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> a1 = memorize(<span class="string">'a1'</span>);</span><br><span class="line">a1(<span class="string">'b'</span>); <span class="comment">// a1b</span></span><br><span class="line">a1(<span class="string">'b1'</span>);<span class="comment">//a1b1</span></span><br><span class="line"><span class="keyword">var</span> a2 = memorize(<span class="string">'a2'</span>);</span><br><span class="line">a2(<span class="string">'b'</span>); <span class="comment">// a2b</span></span><br></pre></td></tr></table></figure><ul><li>函数式累加器</li></ul><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a, b</span>) </span>{</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a, b</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> a === <span class="string">"undefined"</span>) </span><br><span class="line"> <span class="keyword">throw</span> <span class="built_in">Error</span>(<span class="string">"function should have at least 1 arguments"</span>);</span><br><span class="line"> b ? result = a + b: result += a;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> result = <span class="number">0</span>;</span><br><span class="line"> add(a, b);</span><br><span class="line"> <span class="keyword">return</span> tmp = {</span><br><span class="line"> add: <span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>{</span><br><span class="line"> add(a, b);</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line"> },</span><br><span class="line"> toString: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> result;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">""</span>+add(<span class="number">1</span>, <span class="number">2</span>).add(<span class="number">3</span>));</span><br></pre></td></tr></table></figure><p>附：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">MDN中关于closure的描述</a></p></div></div></div><div class="more section"><div class="pre"><a class="article-link" href="/dev_for_patch_system.html"><i class="iconfont icon-right"></i> <span>React实践：NC资源管理系统</span></a></div><div class="next"><a class="article-link" href="/learn_react_by_code_a_mou.html">React初探：写一个“mou” <i class="iconfont icon-right"></i></a></div></div></main></body><footer class="section fullscreen"><div class="footer-desc">Edeink © 2015-2022 · Powered by Hexo</div></footer><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="/public/js/init.js"></script></html>