js深入(三)作用域链与闭包
在之前我们根绝对象的原型说过了js的原型链,那么同样的js 万物皆对象,函数也同样存在这么一个链式的关系,就是函数的作用域链
作用域链
首先先来回顾一下之前讲到的原型链的寻找机制,就是实例会先从本身开始找,没有的话会一级一级的网上翻,直到顶端没有就会报一个undefined
同样的js的机制就是这样的,函数在执行的时候会先函数本身的上下文的变量对象中查找,没有的话,也会从这个函数被创建的时候的父级的执行上下文的变量对象中去找(词法环境),一直找到全局上下文的变量对象(比如客户端的window对象),这个多层的执行上下文的链式关系就是函数的作用域链
盗一张图
作用域被创建的时机
大家可以看到,我在控制台声明了一个函数,并且打印了他,这个a函数的里边有一个[[scope]]属性,
这是一个内部属性,当一个函数被创建的时候,会保存所有的父级的变量对象(词法环境)到这个里边,比如说上图中 就有一个global 属性展开后,往下找你会发现很多我们常见的属性和方法,比如alert等等
如图
函数作用域的生命周期
姑且叫他生命周期,我是这么理解的,当进入一个函数的上下文,经历了创建阶段之后,就会把函数的作用域链创建出来,直到销毁这个上下文,这个作用域链也是存在的
先来一个正经的例子
function a(){
var aaa = 'aaa';
return aaa;
}
checkscope();
这个函数的生命周期是这样的
首先函数被创建,先把函数的作用域链保存到函数的[[scope]]属性上边
a.[[scope]] = [
globalContext.VO//这个也就是我们上边图片里边看的golbal
];
globalContext 全局上下文 VO 这个之前没有介绍 是Variable object的简称,也就是之前经常提到的变量对象
还有一个AO ,这个AO指的是函数被激活的时候(被执行)得活动对象
- 创建完成之后,执行到a函数,创建了a函数得执行上下文,并压入执行栈里边
现在执行栈里边已经有了两个执行上下文一个globalContext还有一个aContext
- 到了a函数之后,首先会做一些列得准备工作,就是之前讲到得函数得arguments,this等等
首先第一步复制之前得[[scope]]属性,创建作用域链
aContext = {
Scope: a.[[scope]],
}
然后开始初始化活动变量 argments对象 形参,函数声明,变量声明等等
最后把把活动变量也塞到作用域链中去
以上,一个函数得准备工作就算是做完了,然后下一步就是函数得执行阶段
之前讲过,在之后阶段得时候函数会根据代码给之前得活动对象赋值,然后执行里边得代码,直到执行完毕
最后,函数执行完毕,函数得上下文被从上下文栈中弹出销毁
在弹出得最后时候,a函数得结构大概长成这个样子
aContext = {
AO: {
arguments: {
length: 0
},
},
Scope: [AO, [[Scope]]]
}
接下来我们在举一个不正经得例子,就是为了证明一下作用域链即使在函数被销毁后,也会存在这么一个事实
闭包
首先什么是闭包,闭包是指在一个函数内部能够访问不是函数得参数,也不是局部变量得函数,所以广义得讲我们用的所有得函数都是可算作是闭包,都能访问全局变量。。。
不过工作中不是这样子得,说正题,给上边得问题举个例子
var item = '1'
function a(){
var item = '2'
function b(){
return item
}
return b;
}
var foo = a();
foo();
试着猜想一下这段代码得执行过程
还是来一步一步得解释一下
首先不用多想,进入全局代码,创建全局执行上下文,推入执行栈,全局上下文得一系列初始化
然后创建a , 创建上下文,推入执行栈,一些列得初始化
在执行a得时候创建了b函数,这个时候,还记得上边之前说过得把,作用域链是在被创建得时候确定得
这个时候得b函数得作用域链应该是这个样子的
bContext = {
Scope: [AO, aContext.AO, globalContext.VO],
}
这个是重点,我们先把执行过程说完
在a函数执行完毕之后,a的上下文栈被弹出
然后在后边执行b函数,然后一样的套路,进上下文压入栈
进栈一些列的初始化
执行完毕b的上下文被弹出
上边已经把顺序说的很清楚了对吧, 执行过程是a进栈出栈,b进栈出栈,但是你打印这段代码的时候
会打印出一个2,就是因为虽然说a的上下文被销毁了,但是b的作用域链里边还是有a的活动对象的
,在b的上下文里边可以找到这个item
这也就是我们之前所说的闭包,也符合闭包的定义
创建他的函数的上下文被销毁,但是他依然存在
在代码中引用了不是自身的参数或者局部变量
最后放一个网上很常见的面试题
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
}
data[0]();
data[1]();
data[2]();
从作用域链的角度思考一下会打印出什么结果,为什么会打印出这个结果
以上是我对js的作用域链和闭包的一些认识,有不足之处,希望批评指正
js深入(三)作用域链与闭包的更多相关文章
- JS详细图解作用域链与闭包
JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...
- 前端高质量知识(四)-JS详细图解作用域链与闭包
攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法 ...
- js之作用域链到闭包
一.作用域 全局作用域和函数作用域(局部作用域). 一个变量的作用域就是源代码中定义这个变量的区域. 二.作用域链和闭包 全局变量只有一个(window,globel),全局环境下每一个函数都会形成一 ...
- 1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This
参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p ...
- 在chrome开发者工具中观察函数调用栈、作用域链与闭包
在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...
- 前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包
在前端开发中,有一个非常重要的技能,叫做断点调试. 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象, ...
- 聊一下JS中的作用域scope和闭包closure
聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...
- 个人理解的javascript作用域链与闭包
闭包引入的前提个人理解是为从外部读取局部变量,正常情况下,这是办不到的.简单的闭包举例如下: function f1(){ n=100; function f2(){ alert(n); } retu ...
- 【进阶2-2期】JavaScript深入之从作用域链理解闭包(转)
这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://github.com/yygmind/blog/issues/18 红宝书(p178)上对于闭包的定义:闭包是指有权访问另外一 ...
随机推荐
- crossplatform---Nodejs in Visual Studio Code 01.简单介绍Nodejs
1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...
- 微信小程序支付结果 c#后台回调
又为大家带来简单的c#后台支付结果回调方法,首先还是要去微信官网下载模板(WxPayAPI),将模板(WxPayAPI)添加到服务器上,然后在打开WxPayAPI项目中的example文件下的 Nat ...
- mysql常见操作汇总 专题
mysql中in多个字段 1. 基本用法 SELECT * FROM USER WHERE , , ); 2. 多个字段同时使用 SELECT * FROM USER WHERE (, ),(, ), ...
- doesn't contain a valid partition table 解决方法
输入 fdisk -l 可以看到 输入 fdisk /dev/xvdb 跟着向导一步步做下去(如果不知道该输入什么,就输入“m”并回车,可以打印出菜单): Command (m for help): ...
- WPF刷新界面
Winform 里有 Application.DoEvents();可刷新! WPF 里没这个,尽管可用委托实现多线程,但是刷新还是不行! 后来找到了 类似App.DoEvents()的方法(): 代 ...
- jquery 显示和隐藏的三种方式
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> & ...
- DOM解析xml实现读、写、增、删、改
qt提供了三种方式解析xml,不过如果想实现对xml文件进行增.删.改等操作,还是DOM方式最方便. 项目配置 pro文件里面添加QT+=xml include <QtXml>,也可以in ...
- Windows7,程序兼容助手:这个程序可能安装不正确(做注册表里设置白名单,软件自身的名字不能带setup)
Windows上有一个很奇怪的一个现象,一个exe只要名字里面带了setup\install之类的,打开exe后立即退出就会弹出下面的窗口. 解决方法: 方法一.更改exe的名字,去掉setup\in ...
- Java底层知识学习:Bytecode and JMM
最近在跟着耗子哥的程序员练级指南学习Java底层知识,结合<深入理解Java虚拟机>这本书在看,写笔记,看资料,成长中…… 目前看完了第二章JMM和各内存区OOM的情况 一篇图文并茂介绍字 ...
- C#通过HttpListener实现HTTP监听
代码: using NLog; using System; using System.Diagnostics; using System.IO; using System.Net; using Sys ...