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

第一章:作用域是什么

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

编译原理

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

传统编译步骤

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

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

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

理解作用域

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

  1. 遇到var a首先编译器会向作用域询问是否有a变量存在这一作用域,如果有就忽略,没有就创建a
  2. 接下来处理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);
  1. 全局作用域下包含foo
  2. foo作用域下包含abbar
  3. bar作用域下包含c
    bc的 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()

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

  1. 必须有外部的封闭函数,该函数至少被调用一次
  2. 封闭函数至少返回一个内部函数(可以用 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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,874评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,102评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,676评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,911评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,937评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,935评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,860评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,660评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,113评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,238评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,861评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2 352

推荐阅读更多精彩内容