资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/你不知道的 JavaScript 笔记——作用域和闭包

你不知道的 JavaScript 笔记——作用域和闭包

BearyChat / 1778人阅读

摘要：理解作用域在引擎看来是两个完全不同的声明。在循环中使用闭包闭包是函数和声明该函数的词法环境的组合。回到我们上面说的在自己定义的作用域以外的地方执行，这里声明的是全局变量，使用全局变量不构成闭包。

第一章：作用域是什么

程序中变量存储在哪里，需要是怎么找到它，这就需要设计一套存储以及能方便的找到它的规则，这个规则就是作用域

编译原理

JavaScript 是一门编译语言，它与传统编译语言不同，但编译步骤又非常相似；它不是提前编译的，编译结果也不能在分布式系统中进行移植。

传统编译步骤

分词 / 词法分析
将由字符组成的字符串分解成有意义的代码，例如：var a = 2;通常会被分解为var、a、=、;这些词法单元，判断a是独立的词法单元还是其他词法单元一部分时，如果调用的是有状态的解析规则那这个过程就是词法分析。

解析 / 语法分析
将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表程序语法结构的树，叫做“抽象语法树”（Abstract Syntax Tree，AST）

代码生成
将 AST 转换为可执行代码的过程被称为代码生成。简单说就是：将var a = 2;的 AST 转化为一组机器指令，用来创建一个a的变量（包括分配内存），并将一个值存储在a中。

理解作用域

var a = 2;在 JavaScript 引擎看来是两个完全不同的声明。

遇到var a首先编译器会向作用域询问是否有a变量存在这一作用域，如果有就忽略，没有就创建a。

接下来处理a = 2这个赋值操作，先向当前作用域询问是否有这个变量，如果有就使用这个变量，并赋值；如果没有，继续找。

LHS查询 RHS查询
LHS 赋值操作的目标是谁；RHS 谁是赋值操作的源头（我要查找×××，并把它给我）；简单说如果查找的目的是对变量进行赋值，会使用 LHS 查询，如果查找的目的是为了获取变量值，会使用 RHS 查询。
var a = foo(a){...} 这里的声明，a = ...并不会做 LHS 查询。

function foo(a){
  var b = a;
  return a + b;
}
var c = foo(2)
LHS
c = ...
a = 2(隐示变量分配)
b = ...

RHS
foo(...)
= a
a ...
... b
第二章：词法作用域

词法作用域是在写代码时，将变量和块级作用域写在哪里来决定的

词法阶段 
function foo(a){
  var b = a * 2;
  function bar(c){
    console.log(a,b,c);        //2,4,12
  }
  bar( b * 3);
}
foo(2);

全局作用域下包含foo

foo作用域下包含a、b、bar

bar作用域下包含c
对b、c的 RHS 查询是在上一级作用域中完成的

欺骗词法

eval()接受一个字符串作为参数，把它当做代码来执行，在哪个作用域下调用它，它的作用域就在哪边

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

with可以简化单调重复的赋值操作
如

var obj ={
  a = 1,
  b = 2,
  c = 3
};
//单调重复的赋值
obj.a = 4;
obj.b = 5;
obj.c = 6;
//用with简化
with(obj){
  a = 7;
  b = 8;
  c = 9;
}
function foo(obj){
    with(obj){        //相当于 obj.a = 2，区别 with 创建了全局变量 a
        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

eval()、with实际工作中不推荐使用，会影响性能。

第三章：函数作用域和块作用域 函数中的作用域

函数内部可以访问函数外部的变量，函数外部不可以访问函数内部变量

函数作用域

函数的名称也会污染全局作用域，可以用匿名函数+立即执行函数来实现

立即执行函数

有一个bug，上一行表达式必须要分号结尾，省略会报错

var a = 2;
(function(global){
    var a = 3;
    console.log(a);        //3
    console.log(global.a)    //2
})(window) 
var a = 2;
(function(){
    var a = 3;
    console.log(a);        //3
}())
作用域闭包

1. 在自己定义的作用域以外的地方执行
2. 使用回调函数也是闭包

function foo(){
  var a = 2
  function bar(){
    console.log(a)
  }
  return bar
}
var baz = foo()
baz() //2  这里就用了闭包

bar是在foo里面定义的，所以它是在foo作用域下，但调用它的地方是在foo作用域外，就这构成了闭包。
在来看一个

function foo(){
  var a = 2
  function bar(){
    console.log(a)
  }
  baz(bar)
}
function baz(fn){
  fn()        //2，在这里执行了bar，这里构成了闭包
}
foo()

还有

var fn 
function foo(){
  var a =2
  function bar(){
    console.log(a)
  }
  fn = baz
}
function baz(){
  fn()
}
foo()
baz()    //2，构成了闭包，这里执行了 bar，构成了闭包。

在循环中使用闭包
闭包是函数和声明该函数的词法环境的组合。

回到我们上面说的：在自己定义的作用域以外的地方执行，这里声明的i是全局变量，使用全局变量不构成闭包。

for(var i = 1; i <= 3; i++){
    setTimeout(function(){
        console.log(i)    //打印出 3 个 4，这里没有闭包
    },1000)
}

如果要写成闭包的样子，必须要在外面用函数包裹一层，并调用它，才能形成闭包

function xxx(){
    for(var i = 1; i <= 3; i++){
        setTimeout(function(){
            console.log(i)    //打印出 3 个 4，这是一个闭包没有立即执行
        },1000)
    }
}
xxx()

优化1：这里setTimeout里面的i和立即执行函数的形参构成闭包，阻隔了与for循环的i形成闭包。

function xxx(){
    for(var i = 1; i <= 3; i++){
        (function(i){    //这个形参 i 和外面的 i 不是同一个变量
            setTimeout(function(){
                console.log(i)    //1,2,3，用立即执行函数，
            },1000)
        })(i)
    }
}
xxx()

优化2：用let声明

function xxx(){
    for(let i = 1; i <= 3; i++){
        setTimeout(function(){
            console.log(i)    //1,2,3，用 let 声明变量，在循环的过程中不止一次的声明
        },1000)
    }
}
xxx()

模块中闭包
模块中闭包需要具备两个条件：

必须有外部的封闭函数，该函数至少被调用一次

封闭函数至少返回一个内部函数（可以用 return 或 window）

例：

var foo = function(){
  function a(){
    console.log(1)
  }
  function b(){
    console.log(2)
  }
  return {
    a:a,
    b:b
  }
}
var c = foo()
c.a() //1
超融合服务器 混合云 你不知道的javascript 你不知道的javascript上卷 你不知道的 你不知道

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

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

相关文章

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

    摘要：词法作用域的查找规则是闭包的一部分。因此的确同闭包息息相关，即使本身并不会真的使用闭包。而上面的创建一个闭包，本质上这是将一个块转换成一个可以被关闭的作用域。结合块级作用域与闭包模块这个模式在中被称为模块。 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言，又是一门具有许多复杂微妙技术的语言，即使是经验丰富的 Jav...

    worldligang 评论0 收藏0

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

    摘要：的分句会创建一个块作用域，其声明的变量仅在中有效。而闭包的神奇作用是阻止此事发生。依然持有对该作用域的引用，而这个引用就叫做闭包。当然，无论使用何种方式对函数类型的值进行传递，当函数在别处被调用时都可以观察到闭包。 date: 16.12.8 Thursday 第一章 作用域是什么 LHS：赋值操作的目标是谁？ 比如： a = 2; RHS：谁是赋值操作的源头？ 比如： conso...

    Raaabbit 评论0 收藏0

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

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

    lavor 评论0 收藏0

  • [JS]《你不知道的Javascript·上》——词法作用域和闭包

    摘要：吐槽一下，闭包这个词的翻译真是有很大的误解性啊要说闭包，要先说下词法作用域。闭包两个作用通过闭包，在外部环境访问内部环境的变量。闭包使得函数可以继续访问定义时的词法作用域。 闭包是真的让人头晕啊，看了很久还是觉得很模糊。只能把目前自己的一些理解先写下来，这其中必定包含着一些错误，待日后有更深刻的理解时再作更改。 吐槽一下，闭包这个词的翻译真是有很大的误解性啊…… 要说闭包，要先说下词法...

    guqiu 评论0 收藏0

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

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

    chanjarster 评论0 收藏0

发表评论

登陆后可评论

0条评论

BearyChat

男|高级讲师
我要私信

TA的文章

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