本文实例讲述了 JavaScript 解析机制与闭包原理. 分享给大家供大家参考, 具体如下:
JS 解析机制:
JS 代码解析之前会创建一个如下的词法环境对象 (仓库):LexicalEnvironment{ }
在扫描 JS 代码时会把:
1, 用声明的方式创建的函数的名字;
2, 用 var 定义的变量的名字存到这个词法环境中;
3, 同名的时候: 函数声明会覆盖变量, 下面的函数声明会覆盖上面的同名函数;
4, 函数的值为: 对函数的一个引用; 变量的值为 undefined;
5, 如果用函数表达式的方式创建一个函数:
var fn = function(){ } 这样词法环境中存的是一个变量名 fn, 并赋值为 undefined;
在调用函数的时候如果在函数上面调用就会出现和变量一样的情况报错 undefined;
这也是以两种不同方式创建函数的区别;
- LexicalEnvironment(这个词法环境 ===Windows)
- {
fn: 对函数的一个引用;
b:undefined;
}
用声明的方式创建的函数:
function fn(){ };
用 var 定义的变量:
var b=5;
每次调用函数的时候就会创建一个新的词法环境对象 (仓库):LexicalEnvironment{ };
在解析函数内部的变量和函数声明的时候跟全局词法环境相同, 不过有两点需要注意, 如下:
- LexicalEnvironment(这个词法环境 ===fn)
- {
a: 对函数的一个引用;(解析的时候函数声明把变量覆盖了, 尽管变量已经被赋值为 1)
- b:2;(解析的时候把变量存在了词法环境里, 同时赋值为 2)
- }
- function fn (a,b){
- alert(a)// function a(){ }
- alert(b)//2
- var b= 100;
- function a(){ }
- }
- fn(1,2);
调用函数并传递参数的时候, 词法环境里会再存变量名的同时赋值, 如果是函数内部有同名的函数声明则会把传入的参数覆盖; 如果形参只有一个, 那么另一个实参则被赋值为 undefined;
闭包:
定义:(有多种定义)
1,(比较通俗的定义): 函数嵌套函数, 内部函数可以引用外部函数的参数和变量, 这些参数和变量不会被垃圾回收机制所回收;
2, 在计算机科学中, 闭包是词法闭包的简称, 是引用了自由变量的函数, 这个被引用的自由变量将和这个函数一同存在, 即使已经离开了创造它的环境也不例外 (意思就是不会被销毁).
3, 闭包是由函数和其相关的引用环境组合而成的实体.(潜台词就是这个函数将和引用环境同时存在, 必须有引用)
综合来说, 不管怎么定义都是在围绕着两个本质: 函数在引用变量, 这个变量将不会被销毁.
什么叫做被引用的自由变量离开了创造它的环境? 如下:
- function fn(){
- var a = 10;
- var b = 20;
- return function fn2(){
- alert(a);
- }
- }
- var result = fn();
- result();//10;
以上代码就是 fn2 在被 return 出去以后, 离开了 fn 函数这个环境, 但是在外部调用依然能够访问到 fn 的变量;
这就是被引用的变量不会被销毁; 同理在自执行函数这个闭包里, 虽然自执行函数在自身执行过后内部变量本该被垃圾回收机制所回收, 但是由于其内部有引用它的变量的子函数, 也就是说构成了闭包, 它的变量依然不会被销毁;
由此可见闭包的一个作用就是: 我们能够通过闭包的方法来在外部访问到一个内部函数的变量;
很多人在解释闭包的时候都会把子函数 return 出去以后在外部调用, 其实无论在哪里调用, 闭包都已经形成了, 只要是函数嵌套函数, 并且子函数引用了父函数的变量,(不论子函数有没有被调用, 这个用一种方法证明: 在子函数内部打断点, 在 f12 中观察闭包里的内容, 已经出现了引用函数, 这时候调用还没有被执行) 这个时候闭包已经形成了.
闭包的本质: 就是形成了作用域链.
注意: 形成闭包的条件: 1, 函数要嵌套; 2, 子函数要引用父函数的变量 (如果没有引用, 则不会形成闭包, 如果是引用父函数的父函数的变量也会形成闭包);
父函数每调用一次, 就会形成一个新的闭包 (函数每调用一次, 就 会复制一份), 也就是说形成一个新的词法作用域, 重新引用父函数的变量;
以下代码说明:
- function fn() {
- var num = 1;
- return function() {
- num++;
- alert(num);
- }
- }
- var result1 = fn();
- result1();//2;
- result1();//3;
- var result2 = fn();
- result2();//2;
- result2();//3;
在 fn 被调用两次时, 都形成了新的闭包, 有各自新的词法作用域, 所以 result2 的输出结果不受 result1 的影响;
函数每调用一次, 都会复制一份新的, 可以说明 for 循环里 i 的问题;
- for (var i = 0; i < 5; i++) {
- (function(index){
- oDiv.onclick = function() {
- alert(index)
- }
- })(i)
- }
自执行函数每调用一次都会复制一份新的, 传进的 i 值也在变化, 由于在函数静态作用域里, 在预解析阶段已经确定了变量的作用域, 所以子函数引用的父函数变量 index 只能是每次复制的那个父函数变量, 所以就实现了我们想要取不同的 i 值的目的;
闭包的用途:
1, 匿名自执行函数
不污染全局变量,(否则被声明为全局变量的话别的函数可能误用这些变量; 造成全局对象过于庞大, 影响访问速度 (因为变量的取值是需要从原型链上遍历的). 提高效率;
2, 结果缓存:
我们开发中会碰到很多情况, 设想我们有一个处理过程很耗时的函数对象, 每次调用都会花费很长时间利用闭包, 它不会释放外部的引用, 从而函数内部的值可以得以保留., 这样我们在第二次调用的时候, 就会从缓存中读取到该资源.
3, 实现封装;
4, 实现类和继承 (构造函数);
最后
为了帮助大家让学习变得轻松, 高效, 给大家免费分享一大批资料, 帮助大家在成为全栈工程师, 乃至架构师的路上披荆斩棘. 在这里给大家推荐一个前端全栈学习交流圈: 866109386. 欢迎大家进群交流讨论, 学习交流, 共同进步.
当真正开始学习的时候难免不知道从哪入手, 导致效率低下影响继续学习的信心.
但最重要的是不知道哪些技术需要重点掌握, 学习时频繁踩坑, 最终浪费大量时间, 所以有有效资源还是很有必要的.
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们, 祝福大家在往后的工作与面试中一切顺利.
来源: http://www.jianshu.com/p/5c5c56828921