JavaScript解析机制与闭包原理实例详解


Posted in Javascript onMarch 08, 2019

本文实例讲述了JavaScript解析机制与闭包原理。分享给大家供大家参考,具体如下:

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程序设计有所帮助。

Javascript 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
window.location.hash 使用说明
Nov 08 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
小程序实现留言板
Nov 02 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 #Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 #Javascript
Javascript之高级数组API的使用实例
Mar 08 #Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 #Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 #Javascript
详解JavaScript 的变量
Mar 08 #Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 #Javascript
You might like
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
Python中的hypot()方法使用简介
2015/05/18 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
教师节倡议书
2014/08/30 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
关于倡议书的范文
2015/04/29 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
Mysql 设置boolean类型的操作
2021/06/04 MySQL
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
python模板入门教程之flask Jinja
2022/04/11 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers