函数作用域和块作用域

  • 作用域包含了一系列的“气泡”,每一个都可以作为容器。其中包含了标识符(变量、函数)的定义。

函数中的作用域

  • 属于这个函数的全部变量都可以在整个函数的范围内使用及复用。

隐藏内部实现

  • 对函数的传统认知就是先声明一个函数,再向里面添加代码。反过来也可以认为:从所写的代码中挑选一个任意的片段,然后用函数声明对它进行包装(隐藏)。

规避冲突

全局命名空间

  • 程序中加载多个第三方库时,这些库通常会在全局作用域中声明一个名字足够独特的变量,通常是一个对象。这个对象被用作库的命名空间,所有需要暴露给外界的功能都会称为这个对象(命名空间)的属性,而不是将自己的标识符暴露在顶级的词法作用域中。

模块管理

函数作用域

  • 命名函数将内部的变量和函数定义“隐藏”起来,外部作用域无法访问包装函数内部的任何内容。这种方法并不理想,因为首先函数名会污染所在作用域,其次必须显式地通过函数名调用函数才能运行代码。
(function foo(){
    // some code
})()
  • 函数会被当作函数表达式而不是函数声明
  • 区分函数声明与函数表达式的方法在于function出现的位置,如果是声明中的第一个词,那么就是一个函数声明,否则就是一个表达式。
  • 函数声明和函数表达式之间最重要的区别是它们的名称标识符会被绑定在何处。
  • 函数声明的foo被绑定在函数所处的词法作用域中,通过查找词法作用域中的标识符来进行调用。而函数表达式的foo被绑定在函数表达式自身的函数的词法作用域中,也就是foo变量隐藏在自身中。

匿名和具名

匿名函数通常在回调函数中可以见到。

  • 匿名函数在栈追踪中不会显示出有意义的函数名,使得调试很困难。
  • 没有函数名,函数需要引用自身需要使用已经不再建议使用的arguments.callee
  • 匿名函数可读性差。

行内函数表达式

setTimeout(function timeoutHandler(){
    // some code
},1000)
  • 行内函数表达式只能在函数作用域中被访问。在外部作用域中无法访问。

立即执行函数表达式(IIFE)

  • 将函数包含在一对()中,使之成为一个表达式,末尾再加另一个()可以立即执行这个函数。
  • 函数名对IIFE不是必须的,IIFE最常见的用法是使用一个匿名函数表达式。
  • 函数名作为标识符只能在IIFE内部作用域中被查询到。
  • 倒置代码的运行顺序:将函数作为IIFE的参数传递进去。这种模式在UMD项目中被广泛使用。
        (function (fn) {
            fn(window);
        })(function def(global) {
            global.a = 3;
        });

        console.log(a); // 3

块作用域

with

with从对象中创建出的作用域仅在with声明中而非外部作用域中有效。

try/catch

        try {
            undefined();
        } catch (err) {
            console.log(err);
        }
        console.log(err); // RwferenceError  RHS查询错误

catch分句会创建一个块作用域,其中声明的变量仅在catch内部有效。

  • 有些旧的浏览器会因为同一作用域下多个catch(err){}中使用同样的err作为标识符而报错。但这并不是错误,因为每一个catch块内的err标识符都被限定在当前作用域中,这只是浏览器的问题。所以有的开发者会把标识符设定为不同的名字。
  • 经测试,在最新版谷歌和火狐中没有相关问题。

let

  • let关键字可以将变量绑定到所在的任意作用域中,通常是{...}内部。let将这个变量隐藏在了所在的块作用域中。
        var foo = 7;
        if (foo) {
            {
                let bar = foo * 2;
                console.log(bar); // 14
            } {
                let baz = foo * 3;
                console.log(baz); // 21
                try {
                    console.log(bar);
                } catch (err) {
                    console.log(err); // ReferenceError: bar is not defined
                }
            }
        }
  • 通过在代码中显式地添加额外的{}来使代码清晰。
  • 使用let进行的声明不会在块作用域中进行提升。声明的代码被运行之前,声明并不存在。

垃圾回收

        function process(data) {
            // some code
        }

        var someBigData = {
            // some code
        };

        process(someBigData);

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click', function fn() {
            console.log(typeof fn); // function
        }, false);
  • 这段代码很有趣,可以清晰地看出块作用域对于垃圾回收的意义。
  • 事件监听回调函数是一个行内函数表达式,addEventListener本身也是一个函数,其接收一个函数作为参数,但行内函数表达式实际上也是一个闭包函数(它作为addEventListener函数的内部函数,引用着外部函数作用域的变量),那么javascript引擎极有可能依然保存着这个结构(取决于具体实现),外部数据在使用后依然存在而不被删除。
  • 通过块作用域让引擎清楚地知道没有必要保留someBigData变量了。
        {
            var someBigData = {
                // some code
            };

            process(someBigData);
        }

let循环

  • 将计数器重新绑定到了循环的每一个迭代中,确保使用上一个循环迭代结束时的值重新进行赋值。
  • 每次迭代时重新绑定行为:
        {
            let j;
            for (j = 0; j < 10; j++) {
                let i = j;
                console.log(i);
            }
        }

const

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

推荐阅读更多精彩内容