René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"作用域闭包","articleBody":"1. 看起来像闭包。\n   \n   ``` js\n   function foo(){\n       var a = 2;\n       function bar(){\n           console.log(a);\n       }\n       bar();\n   }\n   foo();\n   ```\n2. 这才是闭包。\n   \n   ``` js\n   function foo(){\n       var a = 2;\n       function bar(){\n           console.log(a);\n       }\n       return bar;\n   }\n   var baz = foo();\n   baz();\n   ```\n3. 把内部函数 baz 传递给 bar, 当调用这个内部函数时（现在叫做 fn），它涵盖的 foo()\n   内部作用域的闭包就可以观察到了。因此它能够访问 a。\n   \n   ``` js\n   function foo() {\n       var a = 2;\n       function baz(){\n           console.log(a);\n       }\n       bar(baz);\n   }\n   function bar(fn) {\n       fn();\n   }\n   ```\n4. 把 baz 分配给全局变量\n   \n   ``` js\n   var fn;\n   function foo(){\n       var a = 2;\n       function baz(){\n           console.log(a);\n       }\n       fn = baz;\n   }\n   function bar(){\n       fn();\n   }\n   foo();\n   bar();\n   ```\n5. 无论通过何种手段将内部函数传递到所在的词法作用域以外， \n   它都会持有对原始定义作用有的引用， \n   无论在何处执行这个函数都会使用闭包。\n   \n   ``` js\n   function wait(message) {\n       setTimeout(function timer(){\n           console.log(message);\n       },1000)\n   }\n   wait(\"Hello,Closure!\")\n   ```\n   \n   /*\n   jquery\n   */\n   \n   ``` js\n   function setupBot(name,selector){\n       $(selector).click(function activator(){\n           console.log(\"Activating: \" + name);\n       });\n   }\n   setupBot(\"console BOT1\",\"#bot_1\");\n   setupBot(\"console BOT2\",\"#bot_2\");\n   ```\n6. IIFE\n   \n   ``` js\n   var a = 2;\n   (function IIFE(){\n       console.log(a);\n   })();\n   ```\n7. 循环和闭包\n   \n   ``` js\n   for(var i = 1; i \u003c= 5; i++) {\n       setTimeout(function timer(){\n           console.log(i)\n       },i*1000)\n   }\n   \n   \n   for(var i = 0; i\u003c=5; i++) {\n       (function(j){\n           setInterval(function(){\n               console.log(j);\n           },1000);\n       })(i);\n   }\n   ```\n   \n   ``` js\n   // 每隔一秒钟打印1，2,3,4,5\n   function foo(arr){\n       var i = 0;\n       return function(){\n           setInterval(function(){\n               console.log(arr[i++]);\n           },1000);\n       }()\n   }\n   ```\n   \n   ``` js\n   (function(arr){\n       var i=0,length=arr.length;\n       (function a(){\n           setTimeout(function(){\n               console.log(arr[i++]);\n               i\u003clength\u0026\u0026a();\n           },1000)\n       }())\n   }([1,2,3,4]))\n   ```\n8.  模块\n   \n   ``` js\n   function coolModule() {\n        var sth = \"cool\";\n        var another = [1,2,3];\n        function doSth() {\n           console.log(sth);\n        }\n        function doAnother() {\n           console.log(another.join(\"!\"));\n        }\n        return {\n           doSth:  doSth,\n           doAnother : doAnother\n        }\n   }\n   var foo = new coolModule();\n   foo.doSth();\n   foo.doAnother();\n   ```\n9. 模块模式需要两个必要条件：\n   1. 必须有外部的封闭函数，该函数必须至少\n      被调用一次（每次调用都会创建一个新的模块实例）\n   2. 封闭函数必须至少返回至少一个内部函数，\n      这样内部函数才能在私有作用域中形成闭包，\n      并且可以访问或者修改私有的状态。\n10.  模块模式另一个简单强大的变化用法是，命名将要作为公共API 返回的对象。\n    \n    ``` js\n    var foo = (function coolModule(id){\n        function change(){\n            publicAPI.identify = identify2;\n        }\n        function identify1(){\n            console.log(id);\n        }\n        function identify2(){\n            console.log(id.toUpperCase());\n        }\n        var publicAPI = {\n            change:change,\n            identify: identify1\n        };\n        return publicAPI;\n    })(\"foo module\");\n    foo.identify();\n    foo.change();\n    foo.identify();\n    ```\n11.  现代的模块管理\n    \n    ``` js\n    var MyModules = (function Manger() {\n        var modules = {};\n        function define(name, deps, impl) {\n            for (var i = 0; i \u003c deps.length; i++) {\n                deps[i] = modules[deps[i]];\n            }\n            modules[name] = impl.apply(impl, deps);\n        }\n        function get(name) {\n            return modules[name];\n        }\n        return {\n            define: define,\n            get: get\n        }\n    })();\n    \n    MyModules.define(\"bar\", [], function() {\n        function hello(who) {\n            return \"Let me introduce: \" + who;\n        }\n        return {\n            hello: hello\n        };\n    });\n    MyModules.define(\"foo\", [\"bar\"], function(bar) {\n        var hungry = \"hippo\";\n        function awesome() {\n            console.log(bar.hello(hungry).toUpperCase());\n        }\n        return {\n            awesome: awesome\n        };\n    });\n    var bar = MyModules.get(\"bar\");\n    var foo = MyModules.get(\"foo\");\n    console.log(bar.hello(\"hippo\"));\n    foo.awesome();\n    ```\n\n当函数可以记住并访问所在的词法作用域，即使函数时在当前词法作用域之外执行，这时就产生了闭包。\n\n模块有两个主要特征： \n1. 为创建内部作用域而调用了一个包装函数；\n2. 包装函数的返回值必须至少包含一个队内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭包。\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2015-08-22T13:50:56.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/30/Learning-JavaScript/issues/30"}