您现在的位置:爱折腾>> web>>正文内容

javascript执行顺序

javascript给人的直观感受是,从上往下执行,但实际上却不是这样的,先看个例子。

  1. console.log(test); //undefined  
  2.  
  3. var test = "你好";  
  4.  
  5. console.log(test); //"你好"  
  6.  
  7. console.log(test2); //Uncaught ReferenceError: test2 is not defined  
  8.  
  9.  
  10.  
  11. //模拟编译和执行  
  12.  
  13.  
  14.  
  15. var test;//最先编译出来  
  16.  
  17. test = "你好";//执行的时候,赋值给test 

复制代码

按理说这样写,应该会报错因为函数还没定义就执行了,但实际运行的时候却没有报错。为什么呢?因为javascript执行时,在同一个作用域内是先编译再执行。编译的时候会编译function和var这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值。所以test执行之前, var test 已经执行过了,所以test不会报错,而test2就会报错。

下一个例子

  1. test();//执行结果是"你好"  
  2.  
  3.  
  4.  
  5. function test() {  
  6.  
  7.     console.log("你好");  
  8.  
  9. }  
  10.  
  11.  
  12.  
  13. //模拟编译和执行  
  14.  
  15. var test = function(){}//编译时把方法赋值给test  
  16.  
  17. test();//执行  
  18.  
  19. console.log(test); //把函数打印出来了  



function和var是有些不一样的, function编译时会把function赋值给test, 然后再往下执行。

还有另外的坑人的例子

  1. console.log(test) //undefined  
  2.  
  3. test(); //执行结果报错 Uncaught TypeError: test is not a function  
  4.  
  5.  
  6.  
  7. var test = function() {  
  8.  
  9.     console.log("你好");  
  10.  
  11. }  
  12.  
  13.  
  14.  
  15. //模拟编译和执行  
  16.  
  17. var test;//先编译找到关键字var  
  18.  
  19. test = function() {//然后赋值  
  20.  
  21.     console.log("你好");    
  22.  
  23. }  



上面这个例子的function是以赋值的形式给test的,编译的时候只编译了var test,所以执行的时候从上往下执行,test()会报错。

变量提升:

  1. var a = 1;  
  2.  
  3.  
  4.  
  5. function test() {  
  6.  
  7.     a = 2;  
  8.  
  9.     return;  
  10.  
  11.     function a() {}  
  12.  
  13. }  
  14.  
  15.  
  16.  
  17. test();  
  18.  
  19. console.log(a); //结果还是1  



为什么结果是1不是2? 因为a = 2是局部变量,那为什么a变成了test里面的局部变量了呢?因为javascript是在同一个作用域内先编译后执行,test里面有一个function a(),遇见关键字function了就要编译,前面讲过function怎么编译执行的,所以a = 2就变成局部变量了,所以最后执行结果a=1。

总结一下: javascript就是在同一个作用域内先编译后执行,记住这句话就行了。

相关文章