js解析机制:


js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ }

在扫描js代码时会把:

1、用声明的方式创建的函数的名字;

2、用var定义的变量的名字存到这个词法环境中;

3、同名的时候:函数声明会覆盖变量,下面的函数声明会覆盖上面的同名函数;

4、函数的值为:对函数的一个引用; 变量的值为undefined;

5、如果用函数表达式的方式创建一个函数:

  var fn = function(){ } 这样词法环境中存的是一个变量名fn,并赋值为undefined;

  在调用函数的时候如果在函数上面调用就会出现和变量一样的情况报错undefined;

  这也是以两种不同方式创建函数的区别;


LexicalEnvironment(这个词法环境===window)
{
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、实现类和继承(构造函数);

javascript解析机制、闭包详解的更多相关文章

  1. javascript系列2 -- 闭包详解

    转发请标明来源:http://www.cnblogs.com/johnhou/p/javascript.html  请尊重笔者的劳动成果  --John Hou 今天我们从内存结构上来讲解下 java ...

  2. JavaScript中的闭包详解

    闭包是JavaScript的重要特性,非常强大,可用于执行复杂的计算,可并不容易理解,尤其是对之前从事面向对象编程的人来说,对 JavaScript 认识和编程显得更难.特别是在看一些开源的JavaS ...

  3. JavaScript进阶内容——BOM详解

    JavaScript进阶内容--BOM详解 在上一篇文章中我们学习了DOM,接下来让我们先通过和DOM的对比来简单了解一下BOM 首先我们先来复习一下DOM: 文档对象模型 DOM把文档当作一个对象来 ...

  4. 谷歌地图地理解析和反解析geocode.geocoder详解

    地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. 地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国 ...

  5. Javascript 异步加载详解

    Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...

  6. Python闭包详解

    Python闭包详解 1 快速预览 以下是一段简单的闭包代码示例: def foo(): m=3 n=5 def bar(): a=4 return m+n+a return bar >> ...

  7. 谷歌地图地理解析和反解析geocode.geocoder详解(转)

    谷歌地图地理解析和反解析geocode.geocoder详解 谷歌Geocoder服务 实例代码 地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. ...

  8. Java SPI机制实战详解及源码分析

    背景介绍 提起SPI机制,可能很多人不太熟悉,它是由JDK直接提供的,全称为:Service Provider Interface.而在平时的使用过程中也很少遇到,但如果你阅读一些框架的源码时,会发现 ...

  9. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  10. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

随机推荐

  1. 初识JSON

    ▓▓▓▓▓▓ 大致介绍 JSON(JavaScript Object Notation  JavaScript对象表示法),JSON是一种数据格式,不是一种编程语言.虽然它的名字中有JavaScrip ...

  2. OCR技术浅探: 语言模型(4)

    由于图像质量等原因,性能再好的识别模型,都会有识别错误的可能性,为了减少识别错误率,可以将识别问题跟统计语言模型结合起来,通过动态规划的方法给出最优的识别结果.这是改进OCR识别效果的重要方法之一. ...

  3. 蓝桥网试题 java 入门训练 圆的面积

    ---------------------------------------------------------------------------------------------------- ...

  4. 基于basys2用verilog设计多功能数字钟(重写)

    话不多说先上图         前言 自从学习FPGA以来,唯一做过的完整系统就是基于basys2得多功能数字表.记得当时做的时候也没少头疼,最后用时间磨出来了一个不是很完整的小系统,当时还是产生了满 ...

  5. “-webkit-font-smoothing”

    CSS3里面加入了一个"-webkit-font-smoothing"属性. 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服. 加上之后就顿时感觉页面小清晰了. 淘 ...

  6. 循环语句——do…while语句

    一.do while语句结构 do { 执行语句 } while (条件表达式); 条件表达式必须是trur或false 二.do while语句特点 不论条件是否满足,都先执行一次执行语句 三.示例 ...

  7. JS - What does `void 0` mean?

    语法 void expression // or void(expression) MDN的描述 能向期望一个表达式的值是 undefined 的地方插入会产生副作用的表达式.也就是为了避免产生某种副 ...

  8. Nginx工作原理

    Nginx的模块 Nginx由内核和模块组成. Nginx的模块从结构上分为核心模块.基础模块和第三方模块: 核心模块:HTTP模块.EVENT模块和MAIL模块 基础模块:HTTP Access模块 ...

  9. 【.Net Framework 体积大?】不安装.net framework 也能运行!?原理补充-3

    继续补充点吧.接上一篇,我们实现了.net framework的精简的步骤. 有网友评论了,那个核心的 mscoree.dll 从.net framework 2.0开始,微软开始了新的CLR承载模型 ...

  10. request和response对象的具体介绍

    Request 对象 - request 对象表示 HTTP 请求,包含了请求查询字符串,参数,内容,HTTP 头部等属性.常见属性有:    req.app:当callback为外部文件时,用req ...