看懂JavaScript代码

简单来说,声明的代码是给浏览器看的,执行代码才是给人看的.声明代码是找变量的时候看的.

• 关于JavaScript声明前置问题: JavaScript引擎分析代码是区分 声明+执行两个步骤的. JavaScript引擎先把代码一字不漏地存放在浏览器某个地方, 这时候这些代码是死的,没有任何意义,就是一些字符串. 一旦执行的时候,var function 等声明的代码会提前到相应作用域的顶部.var 只是提前变量,function是整体前移,也就是包括{}花括号里面的内容.
  var a = 1
  function fn1 (){
  function fn2(){
  console.log(a)
  }
  var a = 2
  return fn2
  }
  var fn = fn1() //这些代码都是在声明,并没有执行,执行前完整存放在浏览器某个内存区//声明阶段一切都是浮云不会执行,直到被调用被执行
  fn() // 2
  这里也有一个问题,var fn =fn1()这行代码意图?//简单来说就是 fn1()() 等价于 fn2()

---

• 关于浏览器f12的调试,其实就是在顶层对象下console.log() 求什么就写对应的变量,如果求一串代码的执行结果,就写一串代码

• 上面代码延伸问题,为什么要赋值给fn? 是封装的需要吗?是为了日后调用方便吗?

重大代码架构分析

var a = 1
function fn1(){
function fn3(){
function fn2(){
console.log(a)
}
var a
fn2()
a = 4
}
var a = 2
return fn3
}
var fn = fn1() // 这里打上都是声明,在不被调用和执行命令之前都是不动的,仅是声明了,产生几个变量
fn() //输出多少

---

因为fn就是fn1 所以执行fn1
function fn1(){
function fn3(){
function fn2(){
console.log(a)
}
var a
fn2()
a = 4
}
var a = 2 // 这里打上也是不执行的,因为都是声明,还没有收到执行命令
return fn3 //return fn3 也就是执行fn3
}

---

function fn3(){
function fn2(){
console.log(a)
}
var a
fn2() // 除了这行代码是执行,其他都是声明所以其他都不执行,就执行这行代码,所以执行fn2
a = 4
}

---

function fn2(){
console.log(a)
}
执行fn2 ,内部没有变量a网上找,找到a是undefined 所以输出undefined,fn()结果就是undefined

结论:如何看JavaScript代码? 要理解声明 + 执行是两个 意思,执行代码就是执行代码,没声明卵事,声明的部分都是不执行的.