js作用域_js执行顺序距离_js面试题常见执行结果讲解

一 例子

<script type="text/javascript"> 
var a=100;
     function cc() {
        alert(a);
        var a=200;
        alert(a);
     }
     cc();
     alert(a);
     var a;
     alert(a);
     var a=300;
     alert(a);
</script>
执行结果为:undefined, 200, 100, 100, 300

二 浏览器的js执行顺序

• 遇到script标签/函数调用时,进入作用域
• 进入作用域后,执行js预解析

          1. 创建一个独立的空间

          2.由上至下顺序查看代码。

          3.遇到var时，将var声明的变量保存在独立空间中,变量值为underfined；

          4.遇到方法参数时，将方法参数声明的变量保存在独立空间中,变量值为underfined；

          5.遇到function方法时，完整保存function方法。

          6.当变量名和方法名一致的时候，因为二者都涉及到提升，方法的优先级高，方法会覆盖变量，但是这种情况建立在变量没有赋值的前提下，如果变量赋值那么变量的优先级高，变量会覆盖方法；当方法名一致的时候，后执行的方法会覆盖掉前一个方法

        

//针对第6条在做一下详细的讲解
function fn(){
  var d=2;
  function d(){console.log(3)}  
  return d
}
console.log(fn())//2

function fn(){
  var d;
  function d(){console.log(3)}  
  d=2
  return d
}
console.log(fn())//2

function fn(){
  var d;
  function d(){console.log(3)}  
  return d
}
console.log(fn())//function d()

　　

• 顺序执行

           从上到下顺序执行，遇到表达式（+、-、*、/、++、--....）就去修改作用域里面的变量值。

  三 例题结果分析

• 浏览器遇到script进入作用域，开辟独立空间A
• 预解析:

            1.遇到var a=100，将a录入空间A，有a=underfined。

            2.遇到function，空间A保存function完整内容。

            3.遇到var a，a指向空间A的a=underfined。找到var a=300，a指向空间A的a=underfined。

            4.此时空间A有：a=underfined、function cc(){.....}，预解析完成

• 顺序执行，遇到表达式（+、-、*、/、++、--....）就去修改预解析里面的变量值。第一行就遇到了表达式“=”（var a=100）,所以空间A中a的值修改为100。

 

• 继续执行，遇到了函数调用cc（），再次进入作用域，开辟独立空间B
• 在方法cc中开始预解析

            1.遇到了var a=200,将a录入空间B，有a=underfined，预解析完成

• 顺序执行，遇到第一个alert（a），此时空间B中有a=underfined，所以弹出underfined；继续执行遇到表达式“=”（var a=200），空间B中a的值修改为200；继续向下执行，遇到第二个alert（a），a指向空间B，所以弹出200

 

• 执行完cc（）后，继续顺序执行，遇到第三个alert（a），指向空间A，弹出100
• 继续执行，遇到var a，由于没有表达式，所以空间A中a的值不变，仍是100
• 继续顺序执行，遇到第四个alert（a），指向空间A，弹出100
• 继续执行，遇到var a =300，有表达式“=”，所以空间A中a值修改为300
• 继续顺序执行，遇到第五个alert（a），指向空间A，弹出300

 

推荐参考网址：http://www.cnblogs.com/lonelyxmas/p/3990954.html