JavaScript之作用域和闭包

一、作用域

  1. 作用域共有两种主要的工作模型:第一种是最为普遍的,被大多数编程语言所采用的词法作用域,另外一种叫作动态作用域;
  2. JavaScript所采用的作用域模式是词法作用域。

1.词法作用域

  1. 词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的,从而能够预测在执行过程中如何对它们进行查找。
  2. JavaScript 中有两个机制可以“欺骗”词法作用域:
    • eval(..):可以对一段包含一个或多个声明的“代码”字符串进行演算,并借此来修改已经存在的词法作用域(在运行时) ;
    • with:通过将一个对象的引用当作作用域来处理,将对象的属性当作作用域中的标识符来处理,从而创建了一个新的词法作用域(同样是在运行时) 。
    • 这两个机制的副作用是引擎无法在编译时对作用域查找进行优化,因为引擎只能谨慎地认为这样的优化是无效的。使用这其中任何一个机制都将导致代码运行变慢。

2.函数作用域和块级作用域

  1. 函数作用域: 函数是 JavaScript 中最常见的作用域单元。本质上,声明在一个函数内部的变量或函数会在所处的作用域中“隐藏”起来,即函数内定于的函数和变量为该函数私有;
  2. 块级作用域:
    • 块作用域指的是变量和函数不仅可以属于所处的作用域,也可以属于某个代码块(通常指 { .. } 内部)
    • ES6前在JavaScript中并不存在块级作用域( 例外:try/catch 结构在 catch 分句中具有块作用域);
    • 在 ES6 中引入了 let 关键字( var 关键字的表亲) ,用来在任意代码块中声明变量。 if(..) { let a = 2; } 会声明一个劫持了 if 的 { .. } 块的变量,并且将变量添加到这个块中(另外常量定义const也具有块级作用域)。

3.函数和变量的提升

(1)、提升

  1. 函数作用域和块作用域的行为是一样的,即,某个作用域内的变量,都将附属于这个作用域。
  2. 引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将它们关联起来;
  3. 因此包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理;
  4. 当看到 var a = 2; 时,可能会认为这是一个声明。但 JavaScript 实际上会将其看成两个声明: var a; 和 a = 2; 。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。
    • 这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。这个过程就叫作提升
  5. 每个作用域都会进行提升操作;

(2)、函数优先

  1. 函数声明和变量声明都会被提升。但是函数会首先被提升,然后才是变量。
foo(); // 1
var foo;
function foo() {
    console.log( 1 );
}
foo = function() {
    console.log( 2 );
};
  • 会输出 1 而不是 2 !这个代码片段会被引擎理解为如下形式:
function foo() {
    console.log( 1 );
}
foo(); // 1
foo = function() {
    console.log( 2 );
};
  • var foo 尽管出现在 function foo()... 的声明之前,但它是重复的声明(因此被忽略了) ,因为函数声明会被提升到普通变量之前。
  • 尽管重复的 var 声明会被忽略掉,但出现在后面的函数声明还是可以覆盖前面的。

二、作用域闭包

(1)、理解闭包

  • 当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。
  1. 在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
  2. 在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁

(2)、闭包的用途

  1. 可以读取函数内部的变量;
  2. 让变量的值始终保持在内存中。

(3)、闭包的产生实例

  1. 可以读取函数内部的变量
function foo() {
var a = 2;
function bar() {
    console.log( a );
}
return bar;
}
var baz = foo();
baz(); // 2 —— 这就是闭包的效果。
  • 在 foo() 执行后,通常会期待 foo() 的整个内部作用域都被销毁,因为我们知道引擎有垃圾回收器用来释放不再使用的内存空间;
  • 闭包的“神奇”之处正是可以阻止这件事情的发生。事实上内部作用域依然存在,因此没有被回收,因为 bar() 本身在使用;
  • 拜 bar() 所声明的位置所赐,它拥有涵盖 foo() 内部作用域的闭包,使得该作用域能够一直存活,以供 bar() 在之后任何时间进行引用。
  • bar() 依然持有对该作用域的引用,而这个引用就叫作闭包。
  1. 循环和闭包:
for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
}
  • 正常情况下,我们对这段代码行为的预期是分别输出数字 1~5,每秒一次,每次一个。但实际上,这段代码在运行时会以每秒一次的频率输出五次 6:
    • 延迟函数的回调会在循环结束时才执行。事实上,当定时器运行时即使每个迭代中执行的是 setTimeout(.., 0) ,所有的回调函数依然是在循环结束后才会被执行,因此会每次输出一个 6 出来。
    • 实际情况是尽管循环中的五个函数是在各个迭代中分别定义的,但是它们都被封闭在一个共享的全局作用域中,因此实际上只有一个 i,即所有函数共享一个 i 的引用 。
  • 解决方案:使用 IIFE在每次迭代中将本次迭代的i传入创建的作用域并封闭起来;
for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })( i );
}
  • 在迭代内使用 IIFE 会为每个迭代都生成一个新的作用域,使得延迟函数的回调可以将新的作用域封闭在每个迭代内部,每个迭代中都会含有一个具有正确值的变量供我们访问。

(4)、使用闭包的注意点

  1. 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。
    • 解决方案:在退出函数之前,将不使用的局部变量全部删除。
  2. 闭包会在父函数外部,改变父函数内部变量的值。所以,如果把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Python正则表达式的七个使用范例

作为一个概念而言,正则表达式对于Python来说并不是独有的。但是,Python中的正则表达式在实际使用过程中还是有一些细小的差别。 本文是一系列关于Pyth...

3435
来自专栏PPV课数据科学社区

【工具】Python正则表达式的七个使用范例

? 作为一个概念而言,正则表达式对于Python来说并不是独有的。但是,Python中的正则表达式在实际使用过程中还是有一些细小的差别。 本文是一系列关于Py...

3539
来自专栏程序员同行者

python基础(一)

所以,以下这些值都是对象: "guigu"、38、['北京', '上海', '深圳'],并且是根据不同的类生成的对象。

1052
来自专栏LuckQI

Redis初识~Set命令

1192
来自专栏技术小站

(String)、toString、String.valueOf用法区别(转)

在Java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能。本文将对常用的转换方法进行一个总结。

1162
来自专栏Vamei实验室

Python基础09 面向对象的进一步拓展

我们熟悉了对象和类的基本概念。我们将进一步拓展,以便能实际运用对象和类。 调用类的其它信息 上一讲中提到,在定义方法时,必须有self这一参数。这个参数表示某个...

2086
来自专栏达摩兵的技术空间

a>b的那些事

经常会遇到对比两个值大小关系的逻辑,常规的处理中我们都是处理两个数字或者数字类型的字符串。那么这里进行延伸拓展的练习,来避免一些开发中的采坑。

701
来自专栏诸葛青云的专栏

C语言什么是结构体?初步学习C语言结构体三部曲

结构体部分内容,涉及结构体定义,结构体变量,结构体指针,结构体数组,更多内容敬请关注。

1573
来自专栏Python爱好者

Java基础笔记06

1518
来自专栏PHP实战技术

解构赋值,你不能不懂!

14710

扫码关注云+社区

领取腾讯云代金券