zoukankan      html  css  js  c++  java
  • js中的块级作用域

    概述

    函数是js中最常见的作用域单元, 声明在一个函数内部的变量或函数会在所处的作用域中隐藏起来, 这是有意为之的非常好的设计原则.

    但是随着js的发展, 我们有了某个代码块(通常指{..}内部)隐藏变量或函数的需求, 这就是块级作用域的由来.

    下面是不用es6实现块级作用域的三种方法, 供以后开发时参考, 相信对其他人也有用.

    IIFE

    IIFE, 即立即执行函数, 用一个函数作用域(闭包)来模拟块级作用域.示例如下:

    //es6中的块级作用域
    {let a = 1;
     console.log(a);}
    console.log(a); //ReferenceError
    
    //IIFE实现
    (function() {
        var a = 1;
        console.log(a);
    })();
    console.log(a); //Undefined
    

    可以看到, 由于变量提升, a不再是未初始化, 而是未定义. 这是使用IIFE不好的一方面, 但还可以接受. 另一方面由于闭包拥有很多不好的特性, 比如this指向改变啊, return,break和continue发生变化啊, 内存泄漏问题啊等等, 所以IIFE并不是一个普适的方案.

    throw

    es3开始, js中就已经定义了一种块级作用域, 它就是throw函数. 示例如下:

    //es6中的块级作用域
    {let a = 1;
     console.log(a);}
    console.log(a); //ReferenceError
    
    //throw函数实现
    {
        try {
            throw undefined;
        } catch(a) {
            a = 2;
            console.log(a);
        }
    }
    console.log(a); //ReferenceError
    

    之前我在看别人的代码的时候觉得用throw好像很高级, 可能是为了实现块级作用域吧.

    当有多个变量时, 我们一般不用a, 而是用err123456等.

    优雅的方案

    如果用babel编译一下如上代码, 会发现编译出来的es5与上面的方案都不同, 它是这么编译的.

    //es6中的块级作用域1
    {let a = 1;
     console.log(a);}
    console.log(a); //ReferenceError
    
    //babel编译1
    "use strict";
    {
      var _a = 1;
      console.log(_a);
    }
    console.log(a); //ReferenceError
    
    //es6中的块级作用域2
    {let a = 1;
     console.log(a);
     let _a = 2;
     console.log(_a);
    }
    console.log(a);
    console.log(_a);
    
    //babel编译2
    "use strict";
    {
      var _a2 = 1;
      console.log(_a2);
      var _a3 = 2;
      console.log(_a3);
    }
    console.log(a);
    console.log(_a);
    

    哈哈, 是不是很优雅? 虽然会在全局初始化_a等变量, 但是没有太大的问题.

  • 相关阅读:
    网络七层协议之部分协议详解
    C/C++书籍分享(百度网盘版)
    poi导出excel实例
    java map去除空值和null,等一些好用的工具类
    mysql查询出来的sum结果后边有.0如何去除
    java form 表单提交多条数据到后台!
    使用jsp链接jdbc数据库并将数据显示出来
    对接短信平台wsdl获取代码方式!并使用
    Flutter! 记录一下艰难的Flutter+vscode+真机,第一次调试成功
    微信公众号开发-微信公众号网页H5静默授权!!!
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/8719740.html
Copyright © 2011-2022 走看看