美文网首页
你不知道的javascript(上卷)读书笔记

你不知道的javascript(上卷)读书笔记

作者: 亲爱的孟良 | 来源:发表于2016-10-28 11:24 被阅读53次
    • 所谓编译的三个阶段
      1. 分词/词法分析:将字符组成的字符串分解成有意义的代码块。var a = 1;会被分解成:var,a,=,2,;.
      2. 解析/语法分析:将词法单元流转换成一个“抽象语法树”(Abstract Syntax Tree,AST)
      3. 代码生成:将AST转换为可执行代码
    • 作用域是根据名称查找变量的一套规则。
    • “词法作用域”就是定义在词法阶段的作用域。换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变。
    • eval:eval()函数接受一个字符串为参数,并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。
      function foo(str, a){
        eval(str);
        console.log(a,b)
      }
      var b = 2;
      foo("var b = 3;", 1)
      //也就是永远都找不到外部的b,好像就是在动态的写代码一样
      
    • with:with通常被当作重复引用同一个对象中的多个属性的更快捷方式
      eg:var obj = {
                a:1,
                b:2
                }
         obj.a = 2;
         obj.b = 3;
      相当于:
        with(obj){
            a:2;
            b:33;
        }
      //可以方便的访问对象属性
      
      with可以将一个没有或有多个属性的对象处理为一个完全隔离的词法作用域,因此这个对象的属性也会被处理为定义在这个作用域中的词法标识符。但是这个块内部正常的var声明并不会被限制在这个块的作用域中,而是被添加到with所在的函数作用域中,所以就有一个新的问题,变量会被泄露。
    • 函数作用域
      • 函数作用域,函数作用域的含义是指,属于这个函数的全部变量都可以在整个函数的范围内使用及复用(及嵌套的作用域中也可以使用)。
      • 函数作用域的利用:在任意代码片段外部添加包装函数,可以将内部的变量和函数定义“隐藏”起来,外部作用域无法访问包装函数内部的任何内容。
      • (function foo(){...}),作为函数表达式意味着foo只能在...所代表的位置中被访问,外部作用域则不行,优点是不污染外部作用域
      • 进阶----引出匿名函数(作为回调函数),优点显而易见,不污染外部作用域
      • 立即执行函数表达式(Immediately Invoked Function Expression,IIFE),函数被包在一对()内部,因此成了一个表达式,通过在末尾加上另一对()可以立即执行这个函数。当然函数名并不是必须的
      (function foo(){
        ...
      })()
      
      • IIFE进阶用法:把它们当做函数调用并且传递参数进去
      var a = 2;
      (function IIFE(global){
          var a = 3;
          console.log(a);
          console.log(global.a);
      })(window);
      console.log(a);
      
      将window对象的引用传递进去,但将形参命名为global,因此在代码风格上对全局对象的引用变的比引用一个没有“全局”字样的变量更加清晰。
      • 块作用域,javascript是没有块作用域的,只要用var来声明变量,最终都会属于外部作用域,比如在if语句块中声明的变量,(函数当然是另外一回事)
      for(var i  =0; i<10; i++){
        ...
      }//i已经被泄漏到外部了
      
      • 思考:为什么要把一个只在for循环内部使用的变量i污染到整个函数作用域中呢?

        • with,是块作用域的一个例子🌰!!!!使用with从对象中创建出的作用域仅在with声明中而非外部作用域中有效。
        • try/catch,try/catch的catch分句会创建一个块作用域,其中声明的变量仅在catch内部有效
        tyr{
          undefined();//执行一个非法操作来强制制造一个异常
        }
        cathc(err){
          console.log(err)//正常执行
        }
        console.log(err);//ReferenceError:err not found
        
        • let,let关键字可以将变量绑定到所在的任意作用域中,也就是let为其声明的变量隐式的创建了一个块作用域,这样在if中用let声明的变量就不会污染到全局作用域,那么如何显式的创建一个块?加大括号就行了。
        if(foo){
          {
              let bar = foo * 2;
              bar = something(bar);
              console.log(bar)
          }
        }// 这样就显示的创建了一个块,只要声明是有效的,在声明中的任意位置都可以使用{...}来为let创建一个用于绑定的块
        

        let进行的声明不回在块作用域中进行提升,也就是let声明的变量,在let这一行运行之前是不存在的

        • const,同样可以用来创建块作用域变量,但其值是固定的(常量)
    • 提升
      a = 2;
      var a;
      console.log(a);//输出2
      *=================*
      console.log(a); //输出undefined
      var a = 2;
      
      • 只有声明会被提升,而赋值或其他运行逻辑会留在原地。函数声明会被提升,但是函数表达式不会被提升!
      foo();
      var foo = function(){
      ...
      }//错误,TypeError
      
      • 函数优先,函数声明和变量声明都会被提升,但是函数首先被提升,然后才是变量,后声明的会覆盖掉先声明的,比如一个函数叫foo,一个变量叫foo,那么肯定是变量会优先。
    • 作用域闭包
    • 闭包的一次理解
    function foo(){
      var a = 2;
      function bar(){
          console.log(a);
      }
      return bar;
    }
    var baz = foo();
    baz();//2--闭包啊!!!
    

    函数bar()可以访问foo()的内部作用域,然后将bar()函数本身当作一个值类型进行传递,foo()执行后,其返回值赋值给变量baz并调用baz(),实际上只是通过不同的标识符调用了内部函数bar()。神奇的地方在于bar()函数在自己定义的词法作用域以外的地方执行了。,foo()执行之后,通常会把foo()的整个内部作用域销毁,但是闭包可以阻止被销毁,也就是foo()的内部作用域还在,并且由bar()本身在引用,这个引用就是闭包。

    • 本质上,无论何时何地,如果将函数当做第一级的值类型并到处传递(就是将函数作为参数传入另一个函数中,比如回调函数,定时器,事件监听器),你就会看到闭包在这些函数中的应用。
    • 一段神奇代码----对闭包二次理解
    for(var i=1; i<=5; i++){
      setTimeout(function timer(){
          console.log(i);
      }, i*1000);
    }
    

    输出的结果是五个六,频率为1秒,这是为什么呢???

    for(var i=1; i<=5; i++){
              (function(j){
                  setTimeout(function timer() {
                      console.log(j);
                  },j*1000);
              })(i);
          }
    

    输出的结果是每秒输出一个数字,分别是1,2,3,4,5,这又是为什么呢???

    相关文章

      网友评论

          本文标题:你不知道的javascript(上卷)读书笔记

          本文链接:https://www.haomeiwen.com/subject/ryxeuttx.html