js的作用域和闭包

当我写一段js代码并运行时,有三个非常重要的角色:引擎、 编译器、 作用域

下面模拟一段js代码运行的过程
如下代码

var a = 2
  1. 遇到var a 编译器会询问作用域是否已经有一个变量a存在于统一作用域下,如果有则忽略该声明,继续进行编译,,否则会要求作用域在当前作用域声明新的变量a
  2. 编译器会为引擎生产运行时所需要的代码,用来处理a=2的赋值操作,引擎运行时,会先询问作用域是否有变量a,如果是,会引用这个变量,否则,引擎会继续查找该变量。
  3. 如果引擎找到了a,就把2赋值给它。否则引擎就会丢出一个异常

词法作用域

  1. let:可以将变量绑定在所在的作用域内(通常是{....}内部),也就是说let为它声明的变量隐式的劫持了所在的块作用域
    注意:使用显式的代码能让代码更加的清晰,如下
var a = 6
if (a) {
    {    // <--  显式的块
        let boy = "Jack"
        console.log(boy)
    }
}

声明提前的小细节

查看以下代码

foo()    //TypeError 此时只声明了foo,并未定义foo是函数
bar()    //ReferenceError      找不到bar

var foo = function bar() {
    console.log("hello")
}

以上代码会被理解为以下形式

var foo

foo()
bar()

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

注意:包括函数表达式的赋值操作在内的赋值操作不会被提升

闭包

考虑如下代码

function foo() {
    var a = 2

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

    return bar
}

var baz = foo()

baz()      //2  这就是典型的闭包了

我们打开控制台研究下这段代码


看看绿色箭头处,这就是闭包

注意:无论何种方式将内部函数传递到所在的词法作用域外,它都会持有对原始作用域的引用,无论在何处执行这个函数,都会使用闭包

闭包的本质

将(访问它们各自词法作用域的)函数当作第一级的值类型并且到处传递,这就是闭包

考虑以下例子

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

这是典型的闭包应用,在js中被称为模块,最常见的实现模块的方式通常被称为模块暴露

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

  1. 必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例)
  2. 封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且可以访问或者修改私有的状态

模块模式的功能

命名将要作为公共API返回的对象

var foo = (function CoolModule(id) {
  function change() {
    publickAPI.identify = identify2
  }

  function identify1() {
    console.log(id)
  }

  function identify2() {
    console.log(id.toUpperCase())
  }

  var publickAPI = {
    change: change,
    identify: identify1
  }

  return publickAPI
})("foo module")

foo.identify()    //foo module
foo.change()
foo.identify()    //FOO MODULE

通过模块化实例的内部保留对公共API对象的内部引用,可以从内部对模块实例进行修改,包括添加或删除方法和属性,以及修改它们的值

现代化的模块机制

大多数模块依赖加载器/管器本质上都是将这种模块定义封装进一个友好的API

考虑如下代码:

var MyModules = (function Manager() {
  var modules = {}

  function define(name, deps, impl) {
    for (var i = 0; i < deps.length; i++) {
      deps[i] = modules[deps[i]]
    }
    modules[name] = impl.apply(impl, deps)
  }

  function get() {
    return modules[name]
  }

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

推荐阅读更多精彩内容