javascript从作用域链谈闭包


Posted in Javascript onJuly 29, 2020

神马是闭包

关于闭包的概念,是婆说婆有理。

闭包是指有权访问另外一个函数作用域中的变量的函数
这概念有点绕,拆分一下。从概念上说,闭包有两个特点:

  • 1、函数
  • 2、能访问另外一个函数作用域中的变量

在ES 6之前,Javascript只有函数作用域的概念,没有块级作用域(但catch捕获的异常 只能在catch块中访问)的概念(IIFE可以创建局部作用域)。每个函数作用域都是封闭的,即外部是访问不到函数作用域中的变量。

function getName() {
 var name = "美女的名字";
 console.log(name); //"美女的名字"
}
function displayName() {
 console.log(name); //报错
}

但是为了得到美女的名字,不死心的单身汪把代码改成了这样:

function getName() {
 var name = "美女的名字";
 function displayName() {
 console.log(name); 
 }
 return displayName;
}
var 美女 = getName(); 
美女() //"美女的名字"

这下,美女是一个闭包了,单身汪想怎么玩就怎么玩了。(但并不推荐单身汪用中文做变量名的写法,大家不要学)。

关于闭包呢,还想再说三点:

1、闭包可以访问当前函数以外的变量

function getOuter(){
 var date = '815';
 function getDate(str){
 console.log(str + date); //访问外部的date
 }
 return getDate('今天是:'); //"今天是:815"
}
getOuter();

getDate是一个闭包,该函数执行时,会形成一个作用域A,A中并没有定义变量date,但它能在父一级作用域中找到该变量的定义。

2、即使外部函数已经返回,闭包仍能访问外部函数定义的变量

function getOuter(){
 var date = '815';
 function getDate(str){
 console.log(str + date); //访问外部的date
 }
 return getDate; //外部函数返回
}
var today = getOuter();
today('今天是:'); //"今天是:815"
today('明天不是:'); //"明天不是:815"

3、闭包可以更新外部变量的值

function updateCount(){
 var count = 0;
 function getCount(val){
 count = val;
 console.log(count);
 }
 return getCount; //外部函数返回
}
var count = updateCount();
count(815); //815
count(816); //816

作用域链
为毛闭包就能访问外部函数的变量呢?这就要说说Javascript中的作用域链了。
Javascript中有一个执行环境(execution context)的概念,它定义了变量或函数有权访问的其它数据,决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。你可以把它当做Javascript的一个普通对象,但是你只能修改它的属性,却不能引用它。

变量对象也是有父作用域的。当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量的标示符或者不再存在父作用域了,这就是作用域链。

作用域链和原型继承有点类似,但又有点小区别:如果去查找一个普通对象的属性时,在当前对象和其原型中都找不到时,会返回undefined;但查找的属性在作用域链中不存在的话就会抛出ReferenceError。

作用域链的顶端是全局对象。对于全局环境中的代码,作用域链只包含一个元素:全局对象。所以,在全局环境中定义变量的时候,它们就会被定义到全局对象中。当函数被调用的时候,作用域链就会包含多个作用域对象。

  • 全局环境

关于作用域链讲得略多(红皮书上有关于作用域及执行环境的详细解释),看一个简单地例子:

// my_script.js
"use strict";
var foo = 1;
var bar = 2;

在全局环境中,创建了两个简单地变量。如前面所说,此时变量对象是全局对象。

  • Non-nested functions

改动一下代码,创建一个没有函数嵌套的函数:

"use strict";
var foo = 1;
var bar = 2;
function myFunc() {
 //-- define local-to-function variables
 var a = 1;
 var b = 2;
 var foo = 3;
 console.log("inside myFunc");
}
console.log("outside");
//-- and then, call it:
myFunc();

当myFunc被定义的时候,myFunc的标识符(identifier)就被加到了当前的作用域对象中(在这里就是全局对象),并且这个标识符所引用的是一个函数对象(function object)。函数对象中所包含的是函数的源代码以及其他的属性。其中一个我们所关心的属性就是内部属性[[scope]]。[[scope]]所指向的就是当前的作用域对象。也就是指的就是函数的标识符被创建的时候,我们所能够直接访问的那个作用域对象(在这里就是全局对象)。

比较重要的一点是:myFunc所引用的函数对象,其本身不仅仅含有函数的代码,并且还含有指向其被创建的时候的作用域对象。

当myFunc函数被调用的时候,一个新的作用域对象被创建了。新的作用域对象中包含myFunc函数所定义的本地变量,以及其参数(arguments)。这个新的作用域对象的父作用域对象就是在运行myFunc时我们所能直接访问的那个作用域对象。

  • Nested functions

如前面所说,当函数返回没有被引用的时候,就会被垃圾回收器回收。但是对于闭包(函数嵌套是形成闭包的一种简单方式)呢,即使外部函数返回了,函数对象仍会引用它被创建时的作用域对象。

"use strict";
function createCounter(initial) {
 var counter = initial;
 function increment(value) {
 counter += value;
 }
 function get() {
 return counter;
 }
 return {
 increment: increment,
 get: get
 };
}
var myCounter = createCounter(100);
console.log(myCounter.get()); // 返回 100
myCounter.increment(5);
console.log(myCounter.get()); // 返回 105

当调用createCounter(100)时,内嵌函数increment和get都有指向createCounter(100) scope的引用。如果createCounter(100)没有任何返回值,那么createCounter(100) scope不再被引用,于是就可以被垃圾回收。但是因为createCounter(100)实际上是有返回值的,并且返回值被存储在了myCounter中,所以对象之间的引用关系发生变化。

需要用点时间思考的是:即使createCounter(100)已经返回,但是其作用域仍在,并能且只能被内联函数访问。可以通过调用myCounter.increment() 或 myCounter.get()来直接访问createCounter(100)的作用域。

myCounter.increment() 或 myCounter.get()被调用时,新的作用域对象会被创建,并且该作用域对象的父作用域对象会是当前可以直接访问的作用域对象。

当执行到return counter;时,在get()所在的作用域并没有找到对应的标示符,就会沿着作用域链往上找,直到找到变量counter,然后返回该变量,调用increment(5)则会更有意思。当单独调用increment(5)时,参数value会存贮在当前的作用域对象。函数要访问value,能马上在当前作用域找到该变量。但是当函数要访问counter时,并没有找到,于是沿着作用域链向上查找,在createCounter(100)的作用域找到了对应的标示符,increment()就会修改counter的值。除此之外,没有其他方式来修改这个变量。闭包的强大也在于此,能够存贮私有数据。

Similar function objects, different scope objects
对于上面的counter示例,再说点扩展的事。看代码:

//myScript.js
"use strict";
function createCounter(initial) {
 /* ... see the code from previous example ... */
}
//-- create counter objects
var myCounter1 = createCounter(100);
var myCounter2 = createCounter(200);

myCounter1 和 myCounter2创建之后,关系图是酱紫的:

javascript从作用域链谈闭包

在上面的例子中,myCounter1.increment和myCounter2.increment的函数对象拥有着一样的代码以及一样的属性值(name,length等等),但是它们的[[scope]]指向的是不一样的作用域对象。

这才有了下面的结果:

var a, b;
a = myCounter1.get(); // a 等于 100
b = myCounter2.get(); // b 等于 200
myCounter1.increment(1);
myCounter1.increment(2);
myCounter2.increment(5);
a = myCounter1.get(); // a 等于 103
b = myCounter2.get(); // b 等于 205

作用域和this

作用域会存储变量,但this并不是作用域的一部分,它取决于函数调用时的方式。

Javascript 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 #Javascript
JavaScript仿支付宝密码输入框
Dec 29 #Javascript
js实现商城星星评分的效果
Dec 29 #Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 #Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 #Javascript
JavaScrip常见的一些算法总结
Dec 28 #Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 #Javascript
You might like
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP一些有意思的小区别
2006/12/06 PHP
php防盗链的常用方法小结
2010/07/02 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
业务经理岗位职责
2013/11/11 职场文书
好的演讲稿开场白
2013/12/30 职场文书
人力资源经理自我评价
2014/01/04 职场文书
期中考试反思800字
2014/05/01 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
生日答谢词
2015/01/05 职场文书
自主招生专家推荐信
2015/03/26 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
python入门之算法学习
2021/04/22 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript