资讯专栏INFORMATION COLUMN

你不知道的JavaScript上卷之作用域与闭包·读书笔记

Raaabbit / 3143人阅读

摘要:的分句会创建一个块作用域,其声明的变量仅在中有效。而闭包的神奇作用是阻止此事发生。依然持有对该作用域的引用,而这个引用就叫做闭包。当然,无论使用何种方式对函数类型的值进行传递,当函数在别处被调用时都可以观察到闭包。

date: 16.12.8 Thursday
第一章 作用域是什么

LHS:赋值操作的目标是谁?
比如:

a = 2;

RHS:谁是赋值操作的源头?
比如:

console.log(2);

作用域嵌套:遍历嵌套作用域链的规则:引擎从当前的执行作用域开始查找变量,如果找不到,就向上一级继续查找。当抵达最外层的全局作用域时,无论是否找到都会停止。
异常:为什么区分LHS和RHS是一件重要的事情?
如果RHS查询在所有嵌套的作用域中遍寻不到所需的变量,引擎就会抛出ReferenceError异常。
当引擎在执行LHS查询时,如果在顶层作用域也无法找到目标变量,全局作用域就会创建一个具有该名称的变量,并将其返回给引擎。(非严格模式下)
如果RHS查询找到了一个变量,但你尝试对这个变量的值进行不合理的操作,比如试图对一个非函数类型的值进行函数调用,或者引用null或undefined类型的值中的属性,引擎会抛出TypeError.
ReferenceError同作用域判别失败相关,TypeError则代表作用域判别成功但对结果的操作是非法或不合理的。

第二章 词法作用域

词法作用域

词法作用域就是定义在词法阶段的作用域。词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变。
作用域查找会在找到第一个匹配的标识符时停止:遮蔽效应。(全局变量可以使用window.a来访问)

欺骗词法

eval():可以对一段包含一个或多个声明的代码字符串进行演算,并借此来修改已经存在的词法作用域(在运行时)

function foo(str, a){
  eval( str );
  console.log(a,b);
}
var b = 2
foo("var b = 3;",1); //1,3

with关键字:本质上是用过讲一个对象的引用当作作用域来处理,将对象的属性当作作用域中的标识符来处理,从而创建了一个新的词法作用域。

function foo(obj) {
  with (obj) {
    a = 2;
  }
}

var o1 = {
  a:3
};
var o2 = {
  b:3
};

foo(o1);
console.log( o1.a ); //2

foo(o2);
console.log( o2.a ); // undefined
console.log(a); //2---不好,a被泄露到全局作用域上了。
第三章 函数作用域和块作用域

函数作用域的含义指,属于这个函数的全部变量都可以在整个函数的范围内使用及复用。
规避冲突:

function foo() {
  function bar(a) {
    i = 3;  //不小心懂了for循环所属作用域中的i
    console.log( a + i );
  }

  for (var i=0; i<10; i++) {
    bar( i*2 ); //进入死循环。
  }
}
foo();

全局命名空间:当程序加载了多个第三方库时,如果他们没有妥善的将内部私有的函数或变量隐藏起来,就很容易产生冲突。

模块管理

为了不污染作用域,可以使用包装函数来解决这个问题。包装函数的声明以(function.. 开始。包装函数会自动运行,是一个表达式。
IIFE:立即执行函数表达式(Immediately Invoked Function Expression)

var a = 2;
(function foo(){
  var a = 3;
  console.log(a); //3
  })();    //防止了foo这个名称污染了作用域

console.log(a); //2

匿名函数表达式的利弊

setTimeout( function() {
  console.log("+1s,WTF!")
  },100);

行内函数表达式

setTimeout( function haveName() {
  console.log("+1s,WTF!")
  },100);

块作用域:几乎形同虚设,只能靠开发者自觉了。在块作用域内声明的变量都会属于外部作用域。表面上看如此,但如果深入探究。
用with从对象中创建出的作用域仅在with声明中而非外部作用域中有效。
try/catch的catch分句会创建一个块作用域,其声明的变量仅在catch中有效。
let关键字可以将变量绑定到所在的任意作用域中。let声明附属于一个新的作用域而不是当前的函数作用域(也不属于全局作用域)。

var foo = true;

if (foo) {
  let bar = foo * 2;
  bar = something(bar);
  console.log(bar);
}

console.log(bar); //ReferenceError
第四章 提升

先有鸡还是先有蛋的问题:
Demo1:

a = 2;
var a;
console.log(a); //2

Demo2:

console.log(a); //undefined
var a = 2;

事实是先有蛋(声明)后有鸡(赋值)。实际处理如下:
demo1实际:

var a;
a = 2;
console.log(a);

demo2实际:

var a;
console.log(a);
a = 2;

只有声明本身会被提升,而赋值或者其他运行逻辑会留在本地。

foo(); //TypeError
var foo = function bar() {
  // ...
};

demo3:

foo(); // TypeError
bar(); //ReferenceError

var foo = function bar(){
  // ...
}

上述代码提升后实际理解形式:

var foo;
foo();
bar();

foo = function() {
  var bar = ..self..
  //...
}

提升过程函数优先,然后才是变量:

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

上述代码会被理解成以下形式:

function foo() {
  console.log(1);
}
foo();
foo = function() {
  console.log(2);
};

尽管var foo出现在function foo()之前,但它是重复的声明,因此被忽略。因为函数声明会被提升到普通变量之前。
声明本身会被提升,但包括函数表达式的赋值在内的赋值操作并不会提升。

第五章 作用域闭包

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

function foo() {
  var a = 2;

  function bar() {
    console.log(a);
  }

  return bar;
}
var baz = foo();
baz(); //2 这就是闭包的效果

函数bar()词法作用域能够访问foo()的内部作用域。然后我们将bar()函数本身当作一个值类型进行传递。我们将bar所引用的函数对象本身当作返回值。
在foo()执行后,其返回值赋值给变量baz并调用baz(),实际上是通过不同的标识符引用调用了内部的函数bar()。
bar()显然可以被正常执行。但在这个例子中,它在自己定义的词法作用域以外的地方执行。
在foo()执行后,通常会期待foo()的整个内部作用域都被销毁,因为引擎有垃圾回收器用来释放不再使用的内存空间。由于foo()的内容不会再被使用,所以会被回收。
而闭包的神奇作用是阻止此事发生。事实上内部作用域依旧存在,因为bar()本身在使用。
拜bar()所声明的位置所赐,它拥有涵盖foo()内部作用域的闭包,使得该作用域能够一直存活,以供bar()在之后任何时间进行引用。
bar()依然持有对该作用域的引用,而这个引用就叫做闭包。

当然,无论使用何种方式对函数类型的值进行传递,当函数在别处被调用时都可以观察到闭包。

var fn;

function foo() {
  var a = 2;
  function baz() {
    console.log(a);
  }
  fn = baz; //将baz分配给全局变量
}

function bar() {
  fn();
}
foo();
bar(); //2

无论通过何种手段将内部函数传递到所在的词法作用域外,它都会持有对原始定义作用域的引用,无论在何处执行这个函数都会使用闭包。
本质上无论何时何地。如果将函数(访问它们各自的词法作用域)当作第一级的值类型并到处传递,你就会看到闭包在这类函数中的应用。(比如使用了回调函数)

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

我们预期上述代码依次输出1,2,3,4,5。实际会输出五次6。因为输出显示的是循环结束时i的值。
因为延迟函数的回调会在循环结束后才执行。根据作用域的工作原理,实际情况是尽管循环中的五个函数是在各个迭代中分别定义的,但是它们都被封闭在一个共享的全局作用域中,因此实际上只有一个i.

修改如下:

for (var i=1; i<=5; i++) {
  (function(j) {
    setTimeout( function timer() {
      console.log(j);
      }, j*1000);
    })(i);
}

再迭代中使用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 {
    doSomething: doSomething,
    doAnother: doAnother
  };
}

var foo = CoolModule();

foo.doSomething(); //cool
foo.doAnother(); //1!2!3

这就是JavaScript中最常用的模块,doSomething()和doAnother()函数具有涵盖模块实例内部作用域的闭包。
总结一下,模块模式需要两个必要条件:
1.必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例)。
2.封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且可以访问或者修改私有的状态。
也可以用单例模式来实现,这种情况适用于只需要一个实例的情景:

var foo = (function CoolModule() {
  var something = "cool";
  var another = [1,2,3];

  function doSomething() {
    console.log( something );
  }

  function doAnother() {
    console.log( another.join("!"));
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
})();
foo.doSomething();
foo.doAnother();

模块模式也可以接受参数,不再赘述。

最后总结一下闭包:
当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这是就产生了闭包。

附录A 动态作用域

JavaScript并不具有动态作用域,它只有词法作用域。

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

var a = 2;

bar();

实际上上述代码输出2,因为词法作用域让foo()中的a通过RHS引用到了全局作用域中的a,因此会输出2.如果JavaScript有动态作用域,那么会输出3,但是JavaScript并没有动态作用域。

第一部分完
感谢作者Kyle Simpson和译者赵望野,感谢自由和开源世界

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

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

相关文章

  • 读书笔记-你不知道JavaScript(上)

    摘要:比如程序会被分解为解析语法分析将词法单元流转换成一个由元素逐级嵌套所组成的代表了程序语法接口的书,又称抽象语法树。代码生成将抽象语法树转换为机器能够识别的指令。 showImg(https://segmentfault.com/img/remote/1460000009682106?w=640&h=280); 本文首发在我的个人博客:http://muyunyun.cn/ 《你不知道的...

    jzzlee 评论0 收藏0
  • 你不知道javascript笔记_作用域与闭包

    摘要:建筑的顶层代表全局作用域。实际的块级作用域远不止如此块级作用域函数作用域早期盛行的立即执行函数就是为了形成块级作用域,不污染全局。这便是闭包的特点吧经典面试题下面的代码输出内容答案个如何处理能够输出闭包方式方式下一篇你不知道的笔记 下一篇:《你不知道的javascript》笔记_this 写在前面 这一系列的笔记是在《javascript高级程序设计》读书笔记系列的升华版本,旨在将零碎...

    galaxy_robot 评论0 收藏0
  • 先有蛋还是先有鸡?JavaScript 作用域与闭包探析

    摘要:而闭包的神奇之处正是可以阻止事情的发生。拜所声明的位置所赐,它拥有涵盖内部作用域的闭包,使得该作用域能够一直存活,以供在之后任何时间进行引用。依然持有对该作用域的引用,而这个引用就叫闭包。 引子 先看一个问题,下面两个代码片段会输出什么? // Snippet 1 a = 2; var a; console.log(a); // Snippet 2 console.log(a); v...

    elisa.yang 评论0 收藏0
  • 十分钟快速了解《你不知道 JavaScript》(上卷

    摘要:最近刚刚看完了你不知道的上卷,对有了更进一步的了解。你不知道的上卷由两部分组成,第一部分是作用域和闭包,第二部分是和对象原型。附录词法这一章并没有说明机制,只是介绍了中的箭头函数引入的行为词法。第章混合对象类类理论类的机制类的继承混入。 最近刚刚看完了《你不知道的 JavaScript》上卷,对 JavaScript 有了更进一步的了解。 《你不知道的 JavaScript》上卷由两部...

    赵春朋 评论0 收藏0
  • 进击JavaScript(二)词法作用域与作用域链

    摘要:一作用域域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。概括的说作用域就是一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。 一、作用域 域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。想了解更多关于作用域的问题推荐阅读《你不知道的JavaScript上卷》第一章(或第一部分),从编译原理的角度说明什么是作用域。概...

    denson 评论0 收藏0

发表评论

0条评论

Raaabbit

|高级讲师

TA的文章

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