js预解释分析(转)

2函数预解释(代码内部)

function fn(num1,num2) {
    var total = num1 + num2;
    console.log(total);
}
复制代码

• 预解释，fn函数内部有形参两个，私有变量一个
• 代码执行 total = num1+num2；console.log(total)

  JS中内存的分类(预解释发生在栈内存)

  //栈内存:用来提供一个供JS代码执行的环境 --->作用域(全局作用域/私有作用域)
  //堆内存:用来存储引用数据类型的值 --->对象存储的时属性名和属性值
  //函数存储的是代码字符串
  

  如何区分私有变量和全局变量(主要用来分析函数预解释)

  • 在“全局作用域”下声明(预解释的时候)的变量是全局变量
  • 在“私有作用域”中声明的变量和“函数的形参”都是私有的变量
  • 在私有作用域中，我们代码执行的时候遇到了一个变量，首先我们要确认它是否是私有的变量， 如果是私有的变量，那么和外面的变量没有任何的关系，如果不是私有的，则往当前作用域的 上级作用域查找，如果上级作用域没有则继续查找，一直找到window为止 —>(“作用域链”)
  • 当函数执行的时候(直接目的:让函数体中的代码执行)，首先会形成一个新的私有作用域，然后按照如下步骤执行: a:如果有形参，先给形参赋值 b:进行私有作用域中的预解释 c:私有作用域中的代码从上到下执行
  • 函数形成一个新的私有作用域保护了里面的私有变量不受外界的影响(外面修改不了私有的，私有的也修改不了外面的)形成了“闭包” —>(保护机制)

  全局作用域中，带var和不带var的区别

  • 区别1: 带var的可以进行预解释，所以在赋值的前面执行不会报错，不带var的是不能进行预解释的，在前面执行会报错
  • 代码如下

  console.log(num);--->undefined
  var num = 12;
  console.log(num2); --->直接报错 因为num2没有预解释
  num2=13;

  • 区别2: 看下述代码

  var num = 12;
  console.log(num);//12
  num2 = 12;
  console.log(num2) //12 --->相当于window.num2
  //关系:num2 = 12 --->相当于给window增加了一个叫num2的属性名，属性值是12
  //var num =12 --->相当于给全局作用域增加了一个全局变量num,但是不仅如此，
  //它也相当于给window增加了一个属性名num,属性值是12
  复制代码

  • 函数内部不带var的代码如下

  var total = 0；
  function fn() {
      console.log(total) // 0
      total = 100;//相当于修改了全局变量total
  }
  fn();
  console.log(total)//--->100
  //注释:私有作用域中出现的一个变量不是私有的，则往上级作用域查找，上级没有则继续向上查找，一直找到window
  //如果window下没有 分两种情况:
  //1、如果是获取值:console.log(total) -->直接报错
  //2、如果是设置值:total = 100;--->相当于给window加了total属性
  //3、JS中如果在不进行任何特殊处理的情况下,上边的代码报错，下边的代码都不执行了
  复制代码

  2.1.6 预解释是一种毫无节操的机制

  • 预解释的时候不管你的条件是否成立，都要把带var的进行提前声明
  • 具体代码如下

  if(!("num" in window)) { //===>if(false)
      var num = 12;
  }
  console.log(num);//--->实际输出undefined
  //分析:不管if的条件是否成立 都会把带var的进行预解释 (var num = 12)
  //所以"num" in window 是true  !("num" in window) --->false 
  //if条件是false  var num = 12 不会执行 所以 console.log(num) 是undefined
  复制代码

  • 匿名函数之函数表达式 把函数定义的部分当作一个值赋给我们的变量/或者赋给元素的某一个事件

  fn();//====>fn 是undefined 相当于 undefined()  报错 uncaught TypeError: fn is not a function
  //window下的预解释 var fn; 预解释的时候只会预解释 "="(等号)左边的
  //右边的是值  不参与预解释
  var fn = function() {
      console.log("ok");
  }
  复制代码

  • 自执行函数 定义和执行一起完成的

  //自执行函数定义的那个function在全局作用域下不进行预解释，当代码执行到这个位置的时候，定义和执行一起完成了
  //自执行函数的5种形式
  (function(num){})(100);//常用形式
  ~function(){}(100);
  +function(){}(100);
  -function(){}(100);
  !function(){}(100)
  复制代码

  • 函数内部return相关

  function fn() {
      console.log(num);//--->undefined
      return function() {};
      var num = 100;
  }
  fn();
  //函数体种return 下面的代码虽然不再执行了，但是需要进行预解释
  //return 后边跟着的是我们的返回值，所以不进行预解释
  复制代码

  • 预解释经典习题解析

  //注释:在预解释的时候，如果名字已经声明过了，不需要重新声明，但是需要重新定义(赋值)
  //JS比较懒，声明过一次，便不再声明，但是可以重新定义
  //在JS中，如果变量的名字和函数的名字重复了，也算冲突
  fn();
  function fn() {console.log(1)};
  fn();
  var fn = 10;
  fn();
  function fn() {console.log(2)};
  fn();
  //输出结果是2 、2 、 报错:fn is not a function 后边代码不执行

  作者：dafeige
  链接：https://juejin.im/post/5c1893bef265da6172656959
  来源：掘金
  著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。