• 代码生成

将 AST 转换成可执行的代码，存放于内存中，并分配内存和转化为一些机器指令

2、理解作用域

其实结合上面提到的编译原理，作用域就好理解了。作用域就是当前执行代码对这些标识符的访问权限。 编译器会在当前作用域中声明一些变量，运行时引擎会去作用域中查找这些变量（其实就是一个寻址的过程），如果找到这些变量就可以操作变量，找不到就往上一层作用域找（作用域链的概念），或者返回 null

第三章： 函数作用域和块作用域

1、函数中的作用域

每声明一个函数都会形成一个作用域，那作用域有什么用呢，它能让该作用域内的变量和函数不被外界访问到，也可以反过来说是不让该作用域内的变量或函数污染全局。

对比：

(function foo() {
  var a = 123
  function bar() {
    //...
  }
})()

{
  let name = '曾田生'
}

console.log(name); //ReferenceError: name is not defined

解决方法2

早在没 es6 的 let 声明之前，常用的做法是利用 函数也能形成作用域 这么个概念来解决一些问题的。

看个例子

function foo() {
  var result = []
  for (var i = 0; i < 10; i++) {
    result[i] = function () {
      return i
    }
  }
  console.log(i）// i 作用在整个函数，for 执行完此时 i 已经等于 10 了
  return result
}
var result = foo()
console.log(result[0]()); // 输出 10 期望 0
console.log(result[1]()); // 输出 10 期望 1
console.log(result[2]()); // 输出 10 期望 2

这个例子出现的问题是执行数组函数最终都输出了 10， 因为 i 作用在整个函数，for 执行完此时 i 已经等于 10 了, 所以当后续执行函数 result[x]() 内部返回的 i 已经是 10 了。

利用函数的作用域来解决

function foo() {
  var result = []
  for (var i = 0; i < 10; i++) {
    result[i] = function (num) {
      return function () { // 函数形成一个作用域，内部变量被私有化了
        return num
      }
    }(i)
  }
  return result
}
var result = foo()
console.log(result[0]()); // 0
console.log(result[1]()); // 1
console.log(result[2]()); // 2

console.log(a); // undefined
var a = 1;

var a;
console.log(a); // undefined
a = 1;

foo();
function foo() {
  console.log('---foo----');
}

foo();
var foo = function() {
  console.log('---foo----');
}
// TypeError: foo is not a function

var foo = 1;
foo();
function foo() {
  console.log('---foo----');
}
// TypeError: foo is not a function

var foo = undefined; // 变量名赋值 undefined
function foo() {     // 函数先提升
  console.log('---foo----');
}
foo = 1;             // 但接下去是变量被重新赋值了 1，是个Number类型
foo();               // Number类型当然不能用函数方式调用，就报错了
// TypeError: foo is not a function

function foo() {
  var a = 0;
  function bar() {
    a++;
    console.log(a);
  }
  return bar;
}

var bat = foo()
bat() // 1
bat() // 2
bat() // 3

function foo() {
  var _a = 0;
  var b = 0;
  function _add() {
    b = _a + 10    
  }
  function bar() {
    _add()
  }
  function getB() {
    return b
  }
  return {
    bar: bar,
    getB: getB
  }
}

var bat = foo()
bat.bar()
bat.getB() // 10

foo.js

var _a = 0;
var b = 0;
function _add() {
  b = _a + 10
}
function bar() {
  _add()
}
function getB() {
  return b
}
export default {
  bar: bar,
  getB: getB
}
复制代码
bat.js

import bat from 'foo'

bat.bar()
bat.getB() // 10