【前端基础进阶系列】学习笔记

前端基础进阶系列

1. JS变量对象详解

• 执行上下文的生命周期:
  
• 变量对象创建
  
  • 建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。
  • 检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
  • 检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。
    
• 执行阶段之前，变量对象中的属性都不能访问！但是进入执行阶段之后，变量对象转变为了活动对象，里面的属性都能被访问了，然后开始进行执行阶段的操作。

// demo2function test() {    console.log(foo);    console.log(bar);    var foo = 'Hello';    console.log(foo);    var bar = function () {        return 'world';    }    function foo() {        return 'hello';    }}test();/*ƒ foo() {        return 'hello';    }undefined"Hello"*/

2. JS详细图解作用域链与闭包

• 作用域 vs 执行上下文
  作用域 —— 代码编译阶段
  执行上下文 —— 代码执行阶段
  

• 作用域 vs 作用域链

  • 作用域在编译阶段确定规则，作用域链在执行上下文的创建阶段生成。
  • 作用域链是作用域规则的具体实现

• 作用域链——是由一系列变量对象组成

  var a = 20;function test() {    var b = a + 10;    function innerTest() {        var c = 10;        return b + c;    }    return innerTest();}test();

  innerTestEC = {    VO: {...},  // 变量对象    scopeChain: [VO(innerTest), VO(test), VO(global)], // 作用域链    this: {}}

  • 闭包
    chrome浏览器认为闭包是 foo，而不是通常我们认为的innerFoo