资讯专栏INFORMATION COLUMN

重读你不知道的JS (上) 第一节五章

worldligang / 3254人阅读

摘要:词法作用域的查找规则是闭包的一部分。因此的确同闭包息息相关,即使本身并不会真的使用闭包。而上面的创建一个闭包,本质上这是将一个块转换成一个可以被关闭的作用域。结合块级作用域与闭包模块这个模式在中被称为模块。

你不知道的JS(上卷)笔记

你不知道的 JavaScript

JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 JavaScript 开发者,如果没有认真学习的话也无法真正理解它们.

上卷包括俩节:

作用域和闭包

this 和对象原型

作用域和闭包

希望 Kyle 对 JavaScript 工作原理每一个细节的批判性思 考会渗透到你的思考过程和日常工作中。知其然,也要知其所以然。

作用域闭包 启示

秘诀: JavaScript中闭包无处不在,你只需要能够识别并拥抱它。

闭包是基于词法作用域书写代码时所产生的自然结果,你甚至不需要为了利用它们而有意识的创建闭包。

闭包的创建和使用在你的代码中随处可见。
你缺少的是根据你自己的意愿来识别、拥抱和影响闭包的思维环境。

实质问题

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。

词法作用域的查找规则是闭包的一部分。

function foo() {
  var a = 2;
  function bar() {
    console.log( a ); // 2
  }
  bar();
}
foo();

纯学术的角度上说,上述代码片段中,函数 bar() 具有一个涵盖 foo() 作用域的闭包 (事实上,涵盖了它能访问的所有作用域,比如全局作用域)。也可以认为 bar() 被封闭在了 foo() 的作用域中。为什么呢?原因简单明了,因为 bar() 嵌套在 foo() 内部。

闭包使得函数可以继续访问定义时的词法作用域。

无论通过何种手段将内部函数传递到所在的词法作用域以外,它都会持有对原始定义作用 域的引用,无论在何处执行这个函数都会使用闭包。

思考:

function foo() {
  var a = 2;
  function baz() {
    console.log( a, b ); // 2 , b能获取到1吗?
  }
  bar( baz );
}
function bar(fn) {
  var b = 1;
  fn(); // 妈妈快看呀,这就是闭包!
}
常见的闭包场景
function wait(message) {
  setTimeout( function timer() { // timer函数由引擎调用,但是已经超出了wait作用域,所以存在闭包
      console.log( message );
  }, 1000 );
}
wait( "Hello, closure!" );

在定时器、事件监听器、 Ajax 请求、跨窗口通信、Web Workers 或者任何其他的异步(或者同步)任务中,只要使 用了回调函数,实际上就是在使用闭包!

IIFE闭包
var a = 2;
(function IIFE() {
  console.log( a );
})();

尽管 IIFE 本身并不是观察闭包的恰当例子,但它的确创建了闭包,并且也是最常用来创建 可以被封闭起来的闭包的工具。因此 IIFE 的确同闭包息息相关,即使本身并不会真的使用 闭包。

循环和闭包
for (var i=1; i<=5; i++) {
  setTimeout( function timer() {
    console.log( i );
  }, i*1000 );
}

延迟函数的回调会在循环结束时才执行。事实上, 当定时器运行时即使每个迭代中执行的是setTimeout(.., 0),所有的回调函数依然是在循 环结束后才会被执行,因此会每次输出一个 6 出来。

缺陷是我们试图假设循环中的每个迭代在运行时都会给自己“捕获”一个 i 的副本。但是 根据作用域的工作原理,实际情况是尽管循环中的五个函数是在各个迭代中分别定义的, 但是它们都被封闭在一个共享的全局作用域中,因此实际上只有一个 i。
这样说的话,当然所有函数共享一个 i 的引用。

它需要有自己的变量,用来在每个迭代中储存 i 的值:

for (var i=1; i<=5; i++) { 
  (function() { // IIFE 每次执行都会立即创建一个词法上的函数作用域
    var j = i; // 闭包作用域的变量j, 立即得到i的值 
    setTimeout( function timer() {
                 console.log( j ); // 访问闭包作用域的变量j
             }, j*1000 );
  })();
}

变体:

for (var i=1; i<=5; i++) {
  (function(j) { // IIFE 每次执行都会立即创建一个词法上的函数作用域
    // 闭包作用域的变量j, 参数传递立即得到i的值
    setTimeout( function timer() {
                 console.log( j ); // 访问闭包作用域的变量j
             }, j*1000 );
  })(i);
}
块作用域和闭包

let 声明,可以用来劫 持块作用域,并且在这个块作用域中声明一个变量。

而上面的IIFE创建一个闭包,本质上这是将一个块转换成一个可以被关闭的作用域。

结合块级作用域与闭包:

for (let i=1; i<=5; i++) {
  setTimeout( function timer() {
    console.log( i );
  }, i*1000 );
}
模块
function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() { 
    console.log( something );
  }
  function doAnother() {
    console.log( another.join( " ! " ) );
  }
  return {
    doSomething1: doSomething,
    doAnother: doAnother
  };
}
var foo = CoolModule(); 
foo.doSomething1(); // cool
foo.doAnother(); // 1 ! 2 ! 3

这个模式在 JavaScript 中被称为模块。最常见的实现模块模式的方法通常被称为模块暴露, 这里展示的是其变体。
doSomething() 和 doAnother() 函数具有涵盖模块实例内部作用域的闭包(通过调用 CoolModule() 实现)。
当通过返回一个含有属性引用的对象的方式来将函数传递到词法作 用域外部时,我们已经创造了可以观察和实践闭包的条件。

模块模式需要具备两个必要条件。

必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块 实例)。

封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并 且可以访问或者修改私有的状态。

一个具有函数属性的对象本身并不是真正的模块。从方便观察的角度看,一个从函数调用 所返回的,只有数据属性而没有闭包函数的对象并不是真正的模块。

模块模式另一个简单但强大的变化用法是,命名将要作为公共 API 返回的对象:
在上述模块中,dosomething1被作为模块内部dosomething的公开访问名。

现代的模块机制
var MyModules = (function Manager() { // 模块 管理器/依赖加载器
  var modules = {};
  function define(name, deps, impl) {
    for (var i=0; i
未来的模块机制

基于函数的模块并不是一个能被稳定识别的模式(编译器无法识别),它们 的 API 语义只有在运行时才会被考虑进来。因此可以在运行时修改一个模块 的 API。
相比之下,ES6 模块 API 更加稳定(API 不会在运行时改变)。由于编辑器知 道这一点,因此可以在(的确也这样做了)编译期检查对导入模块的 API 成 员的引用是否真实存在。如果 API 引用并不存在,编译器会在运行时抛出一 个或多个“早期”错误,而不会像往常一样在运行期采用动态的解决方案。

ES6 的模块没有“行内”格式,必须被定义在独立的文件中(一个文件一个模块)。浏览 器或引擎有一个默认的“模块加载器”(可以被重载,但这远超出了我们的讨论范围)可 以在导入模块时异步地加载模块文件。

小结

闭包就好像从 JavaScript 中分离出来的一个充满神秘色彩的未开化世界,只有最勇敢的人 才能够到达那里。但实际上它只是一个标准,显然就是关于如何在函数作为值按需传递的 词法环境中书写代码的。
当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时 就产生了闭包。
如果没能认出闭包,也不了解它的工作原理,在使用它的过程中就很容易犯错,比如在循 环中。但同时闭包也是一个非常强大的工具,可以用多种形式来实现模块等模式。
模块有两个主要特征:

(1)为创建内部作用域而调用了一个包装函数;
(2)包装函数的返回 值必须至少包括一个对内部函数的引用,这样就会创建涵盖整个包装函数内部作用域的闭 包。

现在我们会发现代码中到处都有闭包存在,并且我们能够识别闭包然后用它来做一些有用 的事!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101541.html

相关文章

  • 重读你不知道JS () 一节四章

    摘要:如果提升改变了代码执行的顺序,会造成非常严重的破坏。声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会提升。要注意避免重复声明,特别是当普通的声明和函数声明混合在一起的时候,否则会引起很多危险的问题 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 Ja...

    chanjarster 评论0 收藏0
  • 重读你不知道JS () 一节三章

    摘要:如果是声明中的第一个词,那么就是一个函数声明,否则就是一个函数表达式。给函数表达式指定一个函数名可以有效的解决以上问题。始终给函数表达式命名是一个最佳实践。也有开发者干脆关闭了静态检查工具对重复变量名的检查。 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 Ja...

    lavor 评论0 收藏0
  • 重读你不知道JS () 一节二章

    摘要:词法作用域定义在词法阶段的作用域由你在写代码时将变量和块作用域写在哪来决定的,因此当词法分析器处理代码时会保持作用域不变。欺骗词法作用域在词法分析器处理过后依然可以修改作用域。 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 JavaScript 开发者,如果没...

    baihe 评论0 收藏0
  • 重读你不知道JS () 一节一章

    摘要:的抽象语法树中可能会有一个叫作的顶级节点,接下来是一个叫作它的值是的子节点,以及一个叫作的子节点。值得注意的是,是非常重要的异常类型。严格模式下,未声明的和俩者行为相同,都会是。 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 JavaScript 开发者,如果...

    lk20150415 评论0 收藏0

发表评论

0条评论

worldligang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<