2020-04-26

Javascript-S...

Atom

Expression

Statement

Grammar

简单语句

  • ExpressionStatement
    • a = 1 + 2;
  • EmptyStatement
    • ;
  • DebuggerStatement
    • debugger
  • ThrowStatement
    • throw a;
  • ContinueStatement
    • continue ;
    • continue label;
  • BreakStatement
    • break ;
    • break label;
  • ReturnStatement
    • return ;
    • return expression;

组合语句

  • BlockStatement

    • 把多条语句从语法上括起来，让它像一条语句一样

      1
      2
      3
      4
      5
      6
      7
      8
      9
      {
        Statement...
        Statement...
        Statement...
      }

      {
        a: 1 // a 被理解为 label
      }

    • BlockStatement 中有非 normal ，就会中断

      1
      2
      3
      4
      5
      6
      {
        const a = 1;
        throw 1;
        let b = 2;
        b = foo();
      }

    • 为 const / let 提供作用域

    • Completion Record

      • [[type]]: normal
      • [[value]]: –
      • [[target]]: –

  • IfStatement

  • SwitchStatement

  • IterationStatement

    • for await(… of …)

    • while(Expression…) Statement…

    • do Statement… while(Expression…);

    • for(Definition…; Expression…; Expression…) Statement…

      • Definition

        • var
        • const / let

      • for 会独立产生一个作用域，在 blockStatement 之外

        1
        2
        3
        4
        5
        6
        7
        8
        {
          let i = 0;
          {
            let i = 1;
            console.log(i)
          }
          console.log(i)
        }

    • for(Definition… in Expression…) Statement….

      1
      2
      3
      for(let i in {a: 1, b: 2}) {
        console.log(i)
      }

    • for(Definition…of Expression…) Statement…

      1
      2
      3
      for(let i of [1, 2, 3]) {
        console.log(i)
      }
      1
      2
      3
      4
      5
      6
      7
      8
      function *g() {
        yield 0;
        yield 1;
        yield 4;
      }
      for(let p  of g()){
        console.log(p)
      }

      for of –> Iterator –> Generator/Array

  • WithStatement

  • LabelledStatement

  • TryStatement

    1
    2
    3
    4
    5
    6
    7
    try {
      Statement...
    } catch(definition...) {
      Statement...
    } finally {
      Statement...
    }
    1
    2
    3
    4
    5
    6
    try {
      throw 2;
    } catch(e) {
      let e;
      console.log(e);
    }
    1
    2
    3
    4
    5
    6
    var e = 3;
    try {
      throw 2;
    } catch(e) {
      console.log(e);
    }

    • catch 中的声明，只在 {} 这一个作用域中，与 for 不一样。

    • 运行时产生错误的时候，都有可能产生 throw

      1
      2
      1 = a;
      null.a;

    • Completion Record

      • [[type]]: return
      • [[value]]: –
      • [[target]]: label

标签、循环、break、continue

  • LabelledStatement
  • IterationStatement
  • ContinueStatement
  • BreakStatement
  • SwitchStatement
  • Completion Record
    • [[type]]: break continue
    • [[value]]: –
    • [[target]]: label

声明机制

  • FunctionDeclaration

  • GeneratorDeclaration

  • AsyncFunctionDeclaration

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function sleep(d) {
      return new Promise(resolve => setTimeout(resolve, d))
    }
    void async function() {
      var i = 0;
      while(true) {
        console.log(i ++);
        await sleep(1000);
      }
    }()

  • AsyncGeneratorDeclaration

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    function sleep(d) {
      return new Promise(resolve => setTimeout(resolve, d))
    }
    async function* foo() {
      var i = 0;
      while(true) {
        yield i ++;
        await sleep(1000);
      }
    }
    void async function() {
      var g = foo();
      console.log(await g.next());
      console.log(await g.next());
      console.log(await g.next());
      console.log(await g.next());
      console.log(await g.next());
    }()
    // 想无限循环输出

    void async function() {
      var g = foo();
      for await(let e of g) {
        console.log(e)
      }
    }()

  • VariableStatement

  • ClassDeclaration

  • LexicalDeclaration

  • 声明

    • function

    • function *

    • async function

    • async function*

    • var

      • 有 var 不建议写在任何语句子结构里，建议写在 function 的范围内

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        var x = 0;
        function foo() {
          var o = {x: 1};
          x = 2;
          with(o) {
            var x = 3;
          }
          console.log(x); // --> 2
          console.log(o.x); // --> 3
        }
        foo()
        console.log(x); // --> 0
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        var x = 0;
        function foo() {
          var o = {x: 1};
          x = 2;
          with(o) {
            x = 3;
          }
          console.log(x); // --> 2
          console.log(o.x); // --> 3
        }
        foo()
        console.log(x); // --> 2

    • class

    • const

    • let

Runtime

Completion Record

  • [[type]]: normal, break, continue, return, throw
  • [[value]]: Types
  • [[target]]: label

Lexical Environment

预处理（pre-process）BoundNames

1
2
3
4
5
6
7
8
var a = 2;
void function (){
  a = 1;
  console.log(a) 
  return ;
  var a;
}()
console.log('a', a);

var 预处理

1
2
3
4
5
6
7
void a = 2;
void function (){
  a = 1;
  return ;
  const a;
}();
console.log(a);

const 无预处理

作用域

1
2
3
4
5
6
7
8
var a = 2;
void function (){
  a = 1;
  {
    var a;
  }
}();
console.log(a);
1
2
3
4
5
6
7
8
var a = 2;
void function (){
  a = 1;
  {
    const a;
  }
}();
console.log(a);

作用域

  • 作用域与上下文的区别
    • 作用域可以简单理解为源代码文本的作用区域
    • 执行上下文可以理解为，在用户的电脑上，内存里的，存变量的地方，JavaScript 引擎在执行过程中需要的变量，引擎里的那块内存。

Structure

Program/Module

EllePeng

EllePeng

stay awesome.