JavaScript作用域和闭包

最新推荐文章于 2022-10-06 15:54:10 发布
最新推荐文章于 2022-10-06 15:54:10 发布
阅读量318 收藏
点赞数
分类专栏： js 文章标签： javascript

还记得最开始接触JavaScript时，只是会用document.getElementById("")这种DOM操作来做点简单特效，但仅仅如此已经让我欣喜。后来的知道了原来可以利用ajax技术来实现无刷新获取服务端数据，这让我开始觉得前端还是有好多事可以做的，在之后因为老师的一个项目的关系接触了AngularJS，便开始了AngularJS的学习。AngularJS让我深刻地认识到在前后端分离的时候，前端原来可以做到这么多东西，诸如模块，路由，依赖注入，双向绑定这样的词汇让我感到陌生而不知所措。即便是我已经在那个项目中使用AngularJS中上面所说的那些特性，我对AngularJS还是充满了困惑——我不清楚AngularJS是如何实现的。

审视自己对JavaScript浅薄认识，我意识到自己应该去先把js语言本身好好学习一下。确实，在较为仔细地学习了ECMAScript后，我发现，我开始理解模块的实现，对如.apply()，.bind()等用法的了解让我对如何写出更好的js代码有了更多的理解。当然，现在我也只是入门水平，还需要不断学习和提高。

这篇文章包含着我对javascript作用域和闭包的理解，写的过程也是整理和归纳的过程，以后也会用这种方式来归纳总结自己所学所想，希望自己能不断进步吧。

一、JavaScript有哪些作用域类型

对于一门编程语言来说，作用域主要有两种模型，即词法作用域（Lexical Scope）和动态作用域（Dynamic Scope）。而词法作用域,即静态作用域（Static Scope），被目前JavaScript在内的大部分编程语言所采用，而动态作用域只有Bash脚本等少数编程语言在使用。

词法作用域就是定义在词法阶段的作用域，当词法分析器处理代码的时候会保持作用域不变。在表现上，词法作用域的函数中遇到既不是形式参数也不是函数内部定义的局部变量的变量时，会自动去函数定义时的环境中查询（即沿作用域链）。

还是举两个例子吧：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-comment">//这是词法作用域</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">()</span> {</span>
    console.log(a);    <span class="hljs-comment">//2</span>
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bar</span><span class="hljs-params">()</span> {</span>
    <span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span>;
    foo();
}
<span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>;
bar();</code></span>
<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-comment">//这是动态作用域</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">()</span> {</span>
    console.log(a);     <span class="hljs-comment">//3</span>
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bar</span><span class="hljs-params">()</span> {</span>
    <span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span>;
    foo();
}
<span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>;
bar();</code></span>

二、作用域与标识符查询

作用域和表示符查询紧密相关，表示符正是依靠这样一套严密的作用域规则而得以有条理地查询。而对于作用域，需要理解几个词：执行环境，变量对象，活动对象，作用域链。

执行环境与作用域链

首先解释执行环境吧，执行环境定义了在这个执行环境中变量或者函数有权访问的数据，决定了它们各自的行为。在js中执行环境的结构由全局执行环境和一级级内部嵌套的子执行环境组成。其中全局执行环境由ECMAScript实现所在的宿主环境决定，在浏览器中为window对象，在Node中是global对象。每个函数都包含着自己的执行环境，一个个执行环境组成了一个执行环境栈，当执行流进入一个函数时，该函数的执行环境会被推入环境栈中，函数执行之后该环境又会被从环境栈中弹出，这便是ECMAScript执行流的机制。

每个执行环境都包含一个变量对象，它保存着环境中定义的所有变量和函数。当一个执行环境的代码执行的时候会为它的变量对象创建一个由当前执行环境沿着环境栈到全局执行环境的作用域链，作用域链保证了对当前执行环境有权访问的所有变量和函数的 有序 访问。如果当前执行环境是一个函数，那么该函数的活动对象就会成为这个执行环境的变量对象。

而对除了全局执行环境外的执行对象，活动对象最前端是arguments对象，而作用域链沿着一层层的被包含环境的变量对象沿伸到全局执行环境的变量对象。

标识符查询

了解了执行环境和作用域链，标识符的查询就很好理解了，js引擎在遇到一个标识符的时候根据作用域链沿着变量对象从前端到后端进行查询（其实就是从子作用域逐层向父作用域查询），一旦遇到匹配的标识符便会立即停止。如：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bar</span><span class="hljs-params">()</span>{</span>
        <span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>;
        console.log(a);
    }
    a = <span class="hljs-number">3</span>;
    bar();
}
foo();  <span class="hljs-comment">//2</span></code></span>

该例中在console.log对a进行RHS查询时，在bar函数的作用域内便查询到了标识符a，因此便立即停止标识符查询，所以访问不到foo函数的标识符a。这种现象是标识符的遮蔽效应，在多层的嵌套作用域内可以定义同名的标识符，遮蔽效应使得内部的标识符可以遮蔽外层表示符。

三、可以形成独立作用域的结构

在JavaScript中，可以形成独立作用域的结构有两类，函数作用域和块作用域。先说说函数作用域吧。

函数作用域

函数作用域是js中最常见的作用域，每一个函数都拥有一个作用域，而属于这个函数的变量都能在整个函数的范围内访问（当然也能访问），但是在函数外则无法访问函数内的任何变量——除非你在函数执行时把一个闭包返回到函数体外。这种函数内部变量对外的隐藏作用使得同级作用域同名标识符之间的冲突得到避免，这样，也促成了模块机制的良好运行。

利用函数内部对外部的隐藏

如果想创建一个封闭的作用域，让这个作用域内的变量不被外部访问，利用立即执行函数表达式（IIFE）便可实现。如：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;
(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">IIFE</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>;
    console.log(a); <span class="hljs-comment">//2</span>
})();   <span class="hljs-comment">//立即执行</span>
console.log(a);     <span class="hljs-comment">//1</span></code></span>

这个函数表达式在声明后立即执行，这样函数体内的语句都得到了执行且对外部的变量没有影响。其实，JS中的模块也利用了这点。JS模块还是放到最后说吧。

匿名函数

JavaScript中的函数表达式存在具名函数表达式和匿名函数表达式两种，而函数声明则必须具名。匿名函数有什么用呢？让我们不用去冥思苦想标识符怎么取。如上面的例子中的IIFE函数，该函数即使去掉函数名，程序也可以正常运行，因为它的函数名在这种情况起到作用不大。

虽然匿名函数写起来十分便捷，但是基于以下原因，始终给每个函数命名是值得推荐的。
1. 在没有函数名的情况下，函数的递归调用等需要引用自身的时候，将会不得不用arguments.callee进行引用，而这在ES5之后便不被推荐使用了——甚至在严格模式下会抛出TypeError错误。
2. 函数名的省略使得代码可读性下降

说到了匿名函数，不得不提闭包，由于闭包内容较多，将在后面专门说明。

块作用域

除了最常见的函数作用域，JavaScript中的块作用域也可以创建出一个独立的作用域。可是，在 Nicholas C.Zakas 著的《Professional JavaScript for Web Developers(3rd Edition)》中说道：

No Block-Level Scopes

JavaScript’s lack of block-level scopes is a common source of confusion. In other C-like languages, code blocks enclosed by brackets have their own scope (more accurately described as their own execution context in ECMAScript), allowing conditional definition of variables.

Nicholas 之所以说JavaScript没有块级作用域是因为他没把with和try/catch作为块级作用域看待，他在书中把这两个情况作为延长作用域链的手段。实际上，通过with和try/catch创建的独立作用域也算是块级作用域的形式，除了这两种外还可以利用ES6中的let和const也可以形成块级作用域。

with

通过with可以创建出的作用域仅在with声明中使用。如：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">var</span> location = {
    say: <span class="hljs-string">'hello world'</span>
};
<span class="hljs-keyword">with</span> (location){
    console.log(say);<span class="hljs-comment">//hello world</span>
}
console.log(say);<span class="hljs-comment">//抛出ReferenceError错误</span></code></span>
try/catch

try/catch的catch分句会创建一个块级作用域，其中声明的变量只能在内部使用。如：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">try</span>{
    <span class="hljs-keyword">throw</span> {
        say: <span class="hljs-string">'hello world'</span>
    }
}
<span class="hljs-keyword">catch</span>(error){
    console.log(error.say);<span class="hljs-comment">//hello world</span>
}
console.log(error.say);<span class="hljs-comment">抛出ReferenceError错误</span></code></span>
let/const

ES6中引入的let和const关键字可以将变量绑定到任意由{}包含的代码块中。
以下例子可以看出用let声明变量和用var声明变量的区别：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-comment">//变量用var声明</span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i < <span class="hljs-number">5</span>; i++){
    console.log(i);
}
console.log(i);<span class="hljs-comment">//5</span>

<span class="hljs-comment">//变量用let声明</span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">1</span>; j < <span class="hljs-number">5</span>; j++){
    console.log(j);
}
console.log(j);<span class="hljs-comment">//抛出ReferenceError错误</span></code></span>

当然，也可以直接绑定在块中，如：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering">{
    <span class="hljs-keyword">let</span> a = <span class="hljs-number">10</span>;
    console.log(a);<span class="hljs-comment">//10</span>
}
console.log(a);抛出<span class="hljs-built_in">ReferenceError</span>错误</code></span>

const关键字定义的常量和let一样，能将其定义的常量绑定到{}包含的块级作用域中，就再举例子了。

四、提升

提升的概念比较简单，但是如果对js语言只是浅尝辄止的话，可能会理解不清。这里通过提升的表现，优先级和原因来简单说明js中的提升。

提升的表现

提升是变量或函数在同个作用域内表现出的可以先使用后定义的现象。先来看看变量提升：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-pi">"use strict"</span>;<span class="hljs-comment">//开启ES5的严格模式</span>
a = <span class="hljs-number">2</span>;
<span class="hljs-keyword">var</span> a;
console.log(a);<span class="hljs-comment">//2</span></code></span>

再看看函数提升：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-pi">"use strict"</span>;
foo(<span class="hljs-number">1</span>);<span class="hljs-comment">//2</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">(n)</span>{</span>
    console.log(n+<span class="hljs-number">1</span>);
}</code></span>

提升的优先级

提升具有优先级，当一个作用域里对同个标识符既使用了变量声明，也使用了函数声明，那么函数声明会优先被提升。如下面的例子。 

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering">foo();<span class="hljs-comment">//1</span>
<span class="hljs-keyword">var</span> foo;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">()</span>{</span>
    console.log(<span class="hljs-number">1</span>);
}
foo = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
    console.log(<span class="hljs-number">2</span>);
}</code></span>

提升的深层原因

提升之所以存在，是因为JavaScript引擎在对代码解释前会进行预编译。在编译阶段，有一部分的工作就是找到所有的函数声明，并用合适的作用域把它们关联起来，这也是词法作用域的核心部分。有了预编译，在解释执行时，不再检测变量的声明，引擎在对变量进行LHS或RHS查询时会直接向编译阶段生成的作用域取得数据。

也就是说对于var a = 1’;这个语句来说，js引擎会识别为两个声明，即var a 和a = 1，他们分别在编译阶段和执行阶段处理。

五、跨越词法作用域的两种机制

虽然JavaScript采用的是词法作用域，但是如果真的想要在代码执行的时候修改作用域的话也是有办法的，因为js中存在两个”bug”来做到这点。这两个”bug”是传说中的eval还有之前提到过的with。由于这两个”bug”，js的作用域应该算是不完全的词法作用域。

eval

eval可能是js中最强大的函数了，它接受一个参数即一个字符串，在执行时会把这个字符串作为实际的ECMA语句插入到原位置进行解析执行，正如下面例子所示。

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">(str)</span>{</span>
    <span class="hljs-built_in">eval</span>(str);
    console.log(a);
}
a = <span class="hljs-number">1</span>;
<span class="hljs-comment">//修改了foo函数体内的词法作用域</span>
foo(<span class="hljs-string">'var a = 2;'</span>);<span class="hljs-comment">//2</span></code></span>

因为在js编译器预编译的时候，eval()中的语句并不会被执行，所以，eval()中的变量或者函数不会被提升。

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering">foo();<span class="hljs-comment">//抛出ReferenceError错误</span>
<span class="hljs-built_in">eval</span>(<span class="hljs-string">"function foo(){console.log('1');}"</span>);</code></span>

当然，如果变量/函数的定义和使用都在eval中，那么里面的变量对于里面的调用来说是有提升的，比如:

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-built_in">eval</span>(<span class="hljs-string">"foo();function foo(){console.log('1');}"</span>);<span class="hljs-comment">//1</span></code></span>

JavaScript中还有一些类似eval()处理方式的函数，比如new Function(..)，setInterval(..)和setTimeout(..)等等。

with

with语句同样可以在执行阶段修改作用域。
如

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">var</span> obj = {
    a: <span class="hljs-string">'a'</span>,
    b: <span class="hljs-string">'b'</span>,
    c: <span class="hljs-string">'c'</span>
};
<span class="hljs-keyword">with</span> (obj){
    console.log(a+b+c);<span class="hljs-comment">//abc</span>
}</code></span>

在with语句的代码块里面，a,b,c来自obj的三个属性，这个在js预编译的时候也是不能判断的，因此with语句中的变量也不能在词法阶段确定。

六、闭包与模块机制

闭包

说起闭包，在我刚接触JavaScript的时候听到这个词的时候感觉它特别神秘——从这个奇怪的名字就感觉到了神秘感。直到深入了解后才发现，闭包，原来是这样。

什么是闭包

当一个函数能够保存自己所在的词法作用域的时，便产生了闭包——无论这个是在当前词法作用域中还是当前词法作用域外。

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bar</span><span class="hljs-params">()</span>{</span>
        console.log(a);
    }
    <span class="hljs-keyword">return</span> bar;
}
<span class="hljs-keyword">var</span> baz = foo();
baz();<span class="hljs-comment">//2</span></code></span>

在上面的例子中，在调用foo函数时bar函数保存着foo函数的局部变量a，在bar函数被返回到foo函数外面的时候，便产生了闭包，闭包里保存着bar所在的词法作用域（包含bar函数和foo函数的所有变量以及全局对象的所有属性），故调用baz函数的时候能够正常返回a中的值2。

闭包相关的问题
问题

首先看下面的例子:

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i <= <span class="hljs-number">5</span>; i++){
    setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">timer</span><span class="hljs-params">()</span>{</span>
        console.log(i);
    },<span class="hljs-number">1000</span>);
}</code></span>

这个例子中可以看出这段代码预期是按顺序分别输出1～5的数字。而实际上，每次都输出6。

现仔细造成这个”出乎意料“的现象的原因：setTimeout函数中传进来的timer函数由于作用域闭包的原因，保存着对同一个变量 i 的引用，而在循环结束后i的值为6，又由于js的异步性，在过1000ms之后，循环已经处理结束，因此，结果会输出5个6。

解决办法

只需对上面代码进行一些改进即可解决，代码如下：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i <= <span class="hljs-number">5</span>; i++){
    (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(i)</span>{</span>
        setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">timer</span><span class="hljs-params">()</span>{</span>
            console.log(i);
        },<span class="hljs-number">1000</span>);
    })(i)
}</code></span>

上面代码通过创建一个自执行的函数表达式来得到一个独立的作用域，再把外部的i作为参数传进函数体，因为函数的参数传递会创建一个副本，所以每个timer中保存不同的i的副本，问题就得到解决了。

模块机制

JavaScript中的模块模式正是充分利用了作用域闭包的能力而实现的。下面由简入深地描述js中的模块机制。

简单的模块

有了闭包的知识的话，下面的模块代码相信能很快看懂。

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myModule</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-keyword">var</span> message = <span class="hljs-string">"hello,Ontides"</span>;
    <span class="hljs-keyword">var</span> resp = <span class="hljs-string">"Hi,"</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span><span class="hljs-params">()</span>{</span>
        console.log(message);
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getResponse</span><span class="hljs-params">(name)</span>{</span>
        console.log(resp+name);
    }
    <span class="hljs-keyword">return</span> {
        sayHello: sayHello,
        getResponse: getResponse
    };
}
<span class="hljs-keyword">var</span> foo = myModule();

foo.sayHello(); <span class="hljs-comment">//Hello,Ontides</span>
foo.getResponse(<span class="hljs-string">"Scott"</span>);   <span class="hljs-comment">//Hi,Scott</span></code></span>
单例模式

将上面代码改变一下，可以实现单例模式：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">var</span> foo = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myModule</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-keyword">var</span> message = <span class="hljs-string">"hello,Ontides"</span>;
    <span class="hljs-keyword">var</span> resp = <span class="hljs-string">"Hi,"</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span><span class="hljs-params">()</span>{</span>
        console.log(message);
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getResponse</span><span class="hljs-params">(name)</span>{</span>
        console.log(resp+name);
    }
    <span class="hljs-keyword">return</span> {
        sayHello: sayHello,
        getResponse: getResponse
    };
})();
foo.sayHello(); <span class="hljs-comment">//Hello,Ontides</span>
foo.getResponse(<span class="hljs-string">"Scott"</span>);   <span class="hljs-comment">//Hi,Scott</span></code></span>
现代模块

现在实现的模块通常需要一个模块管理器，其一般实现如下：

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering"><span class="hljs-keyword">var</span> myModules = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Manager</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-keyword">var</span> modules = {};
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">define</span><span class="hljs-params">(name, deps, impl)</span>{</span>
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < deps.length; i++){
            deps[i] = modules[deps[i]]; <span class="hljs-comment">//获取模块依赖</span>
        }
        modules[name] = impl.apply(impl, deps);<span class="hljs-comment">//将依赖注入到定义的模块中</span>
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">get</span><span class="hljs-params">(name)</span>{</span>
        <span class="hljs-keyword">return</span> modules[name];
    }
    <span class="hljs-keyword">return</span> {
        define: define,
        get: get
    }
})();</code></span>

这个模块管理器的实现中，deps[i] = modules[deps[i]];语句根据目标定义模块所需要的依赖从modules中查询，而modules[name] = impl.apply(impl, deps);语句则将目标依赖注入到定义模块中。

通过上面的模块管理器，可以轻松创建模块，管理模块之间的依赖。

<span style="font-size:14px;"><code class="language-javascript hljs  has-numbering">myModules.define(<span class="hljs-string">"bar"</span>,[],<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span><span class="hljs-params">(name)</span>{</span>
        <span class="hljs-keyword">return</span> <span class="hljs-string">"Hello,"</span>+name;
    }
    <span class="hljs-keyword">return</span>{
        sayHello: sayHello
    }
});

myModules.define(<span class="hljs-string">"foo"</span>,[<span class="hljs-string">"bar"</span>],<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(bar)</span>{</span>
    <span class="hljs-keyword">var</span> person = <span class="hljs-string">"Ontides"</span>;
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">awsome</span><span class="hljs-params">()</span>{</span>
        console.log(bar.sayHello(person).toUpperCase());
    }
    <span class="hljs-keyword">return</span>{
        awsome: awsome
    }
});

<span class="hljs-keyword">var</span> bar = myModules.get(<span class="hljs-string">"bar"</span>);
<span class="hljs-keyword">var</span> foo = myModules.get(<span class="hljs-string">"foo"</span>);

console.log(bar.sayHello(<span class="hljs-string">"Ontides"</span>));<span class="hljs-comment">//Hello,Ontides</span>
foo.awsome();<span class="hljs-comment">//HELLO,ONTIDES</span></code></span>
MHuajian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解javascript作用域和闭包
10-25
作用域和作用域链是javascript中非常重要的特性，对于他们的理解直接关系到对于整个javascript体系的理解，而闭包又是对作用域的延伸，也是在实际开发中经常使用的一个特性，实际上，不仅仅是javascript，在很多语言...
闭包和作用域
小超人日常码字
12-02 713
5.1 理解闭包 闭包允许函数访问并操作函数外部的变量。只要变量或函数存在于声明函数时的作用域内，闭包即可使函数能够访问这些变量或函数。 声明的函数可以在声明之后的任何时间被调用，甚至当该函数声明的作用域消失之后仍然可以调用。 //一个简单的闭包 var outerValue = "ninja"; function outerFunction() { assert(outerValue ...
三分钟简单了解闭包及作用域
Ja_ho的博客
04-14 1173
作为八股文中最常见的一个问题，闭包一开始对小白来说是比较难理解的一个部分，虽然平时可能使用闭包的地方比较少，但是确实面试中热门的问题。本文参考地址 ☀️ 什么是闭包 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来----MDN 简单来说：闭包存在俩个特点
你不知道的JavaScript---闭包
每天都要努力学习哦~~
10-06 602
当函数可以记住并访问所在的词法时，就产生了闭包，即使函数是在当前词法作用域之外执行的闭包是什么?闭包是一个函数对自己所在的词法作用域的引用闭包的作用?闭包可以使得函数可以继续访问自己被定义时的词法作用域。
JS中的模块化
izwell的博客
12-14 292
今天看YDKJS时，明白了一个以前一直疑惑的东西，那就是JS中的模块开发，之前也使用过require.s进行模块化的开发，但是一直不能明白其中具体的原理，看了YDKJS的讲解后，真的是豁然开朗，在此记录其中一个实例的代码，并进行解析。 var myModules = (function foo(){ var modules = {}; function get(name){ re...
你不知道的JavaScript--作用域闭包
YNEWA的博客
05-20 170
关键词：词法作用域外部引用、外围函数、内部函数、单例模式 5.1 启示 闭包是基于词法作用域书写代码时所产生的自然结果，它在JavaScript中无处不在 5.2 实质问题 当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用 域之外执行 看代码： function foo() { var a = 2; function bar() { console.log( a ); } ...
浅谈JavaScript作用域和闭包
10-19
本篇文章主要介绍了JavaScript作用域和闭包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript作用域和闭包使用详解
10-26
主要介绍了javascript作用域和闭包使用详解,需要的朋友可以参考下
JavaScript 我理解的闭包：闭包之模块
木子聊前端
06-24 249
了解模块对基本开发概念，加载器对原理，深刻理解闭包对作用 模块模式的两个必要条件 一、必须有一个外部封装的函数，该函数必须被调用一次（每次都可以创建一个新的模块） 二、封闭函数至少返回一个函数。这样才能形成闭包，实现封装私有属性
细说JavaScript作用域和闭包
Ontides的博客
10-05 1407
还记得最开始接触JavaScript时，只是会用document.getElementById("")这种DOM操作来做点简单特效，但仅仅如此已经让我欣喜。后来的知道了原来可以利用ajax技术来实现无刷新获取服务端数据，这让我开始觉得前端还是有好多事可以做的，在之后因为老师的一个项目的关系接触了AngularJS，便开始了AngularJS的学习。AngularJS让我深刻地认识到在前后端分离的时候
你不知道的javascript读书笔记
qq_37891961的博客
05-02 268
这本书真的挺不错的，感觉以前很多不敢碰，很迷茫的问题都解决好多，看到模块化记录一下自己的理解下面是代码：var MyModules = (function Manager() {var modules = {};function define(name, deps, impl) {        for (var i=0; i&lt;deps.length; i++) {            d...
javaScript笔记
qq_43549054的博客
01-29 214
0、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 0.1、前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScript（行为）
css中元素不可见的几种办法
bingqingsuimeng的专栏
11-24 2万+
一、前言 今天起床之后已经是11点多了。。。有点悲催了。然后出去吃个东西，我只能说太阳火辣辣的，顺便拍了一张照片，深圳就是太阳太好了，每天都是蓝天白云，这是帝都和北方的童鞋羡慕嫉妒~恨不恨我就不懂。票票的蓝天白云如下： 所以只能索性屁颠屁颠地吃完东西之后马上回来，接着把房间里里外外打扫了一遍//有点小洁癖的双子座，看了一会书，提到了这个visibility这个属性，所以把目
模块的定义和模块之间的相互调用
smalCat的博客
08-24 6154
// 现代模块机制 var myModules = (function Manager() { var modules = {}; function define(name, deps, impl) { //for循环作用是将模块管理器内的相关模块调出来， // 在管理器的作用域中展现，然后被impl调用， ...
JavaScript关于作用域、作用域链和闭包的理解
热门推荐
Hello World
04-29 5万+
作用域先来谈谈变量的作用域 变量的作用域无非就是两种：全局变量和局部变量。 全局作用域： 最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：<script> var outerVar = "outer"; function fn(){ console.log(outerVar); } fn();//res
《你不知道的JS（05）》---作用域闭包
Aimee_ice的博客
04-05 335
1.闭包的基本概念 1.1 什么是闭包（闭包的形成） 当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。（也可以说闭包是：函数可以访问不属于自身作用域范围内的变量 的现象） 1.2 闭包的应用场景 定时器，事件监听，ajax，跨窗口通信，Web Workers 【tips】在上述应用中，只要使用了回调函数，就是在使用闭包 回调函数： 被作为实参传入另一函数，并在该外部函数中被调用，用以来完成某些任务的函数 2.闭包与循环 2.1 循环中的顺序流 // 依次输出1
闭包、作用域
dlf_0610的博客
07-13 361
一、闭包是什么?   闭包(closure)就是能够读取其他函数内部变量的函数。在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成 “定义在一个函数内部的函”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。(闭包的最典型的应用是实现回调函数（callback) )。 二、JS中闭包的优缺点及特性   → 优点：     1.保护函数内的变量安全     2.在内存中维持一个变量(用的太多就变成了缺点，占内存) ；     3. 逻辑连续，当闭包作为另一个函数调用的参数时
JavaScript作用域、上下文、执行期上下文、作用域链、闭包
山水子农
11-07 8275
  作用域、上下文、执行期上下文、作用域链、闭包是JavaScript中关键概念之一，是JavaScript难点之一，在应聘面试时必定会问到的问题，作为前端工程师必须理解和掌握。相信大家已经阅读了很多关于这方面的文章，但是看完之后似懂非懂。在我阅读了《JavaScript高级程序设计》、《高性能的JavaScript》这两本书后，我才完全理解这些概念。 一、作用域(Scope)   作...
前端模块化
前端-后端学习之路
09-27 523
1.模块化编程1.1 ES5时代1.1.1 原生代码实现模块化1) 对象写法var module1 = new Object({ 　　　　_count : 0, 　　　　m1 : function (){ 　　　　　　//... 　　　　}, 　　　　m2 : function (){ 　　　　　　//... 　　　　} 　　});2) 立刻执行函数(Immediately-Invoked Func
什么是作用域链，和闭包
最新发布
05-25
作用域链是指在 JavaScript 中，每个函数在被调用时都会创建一个作用域，而作用域又会形成一个链式结构，这个链式结构就是作用域链。它的作用是在函数内部寻找变量时，先在当前函数的作用域中查找，如果没有找到，就...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值