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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
echarts实现折线图的拖拽效果
Dec 19 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
零基础之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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
js内置对象 学习笔记
2011/08/01 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Linux下python3.7.0安装教程
2018/07/30 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
tensorflow多维张量计算实例
2020/02/11 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
django 模版关闭转义方式
2020/05/14 Python
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
交通事故协议书
2014/04/15 职场文书
小学生演讲稿大全
2014/04/25 职场文书
爱牙日活动总结
2014/08/29 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
消防安全主题班会
2015/08/12 职场文书
PHP解决高并发问题
2021/04/01 PHP
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
如何用python绘制雷达图
2021/04/24 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
Python实现视频自动打码的示例代码
2022/04/08 Python