js函数和变量的声明与执行顺序

一、函数执行顺序

1、正常顺序

     function f(){
alert(2);
}
f(); //alert 2

  所有浏览器都能测试通过。

2、倒序调用

      f();        //alert 2
function f(){
alert(2);
}

  之前一些浏览器会报undefined,不过,目前的版本大多都可以了

3、含参函数倒序

         f(2);        //alert 2
function f(a){
alert(a);
}

  目前主流浏览器一样可以正常测试通过

4、声明式函数和赋值式函数

         f();                        //
function f() { // 声明式函数
console.log(2);
}
f1(); // Uncaught TypeError: f1 is not a function
var f1 = function () { // 赋值式函数
console.log(2);
}

声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。

二、变量执行顺序

1、正常顺序

         var a  =2;
alert(a); //alert 2

2、倒序使用变量

         alert(a);       //alert undefined
var a =2;

  在变量未定义之前使用,会返回undefined。

3、局部变量的执行

*注意:js中全局var声明的为全局变量  函数体内var声明为局部变量(函数外部访问不到)但是,函数体内未用var声明的为全局变量(函数外部可以使用)

         function f(){
alert(a);
a = 3;
}
f(); //error: a is not defined

  这里Firefox的控制台中会报错ReferenceError(引用错误):a 未被定义。。。。所以建议函数体内最好用var声明变量,保持局部性 如:

         function f(){
alert(a);
var a = 3;
}
f(); //undefined

  这里alert语句可以弹出,虽然是undefined ,但是没有报错,这是为什么呢??

  事实上,JS的解析过程分为两个阶段:预编译期(预处理)执行期

  预编译期 JS会对本代码块中的所有var声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。

  执行期 会按照代码块的顺序逐行执行。。

 *函数内部 再次声明赋值,函数f()内有局部变量a时,会优先使用自己的变量,只不过第一次alert时未赋值

         var a = 1;
function f(){
alert(a);
var a = 3;
alert(a);
} f(); //undefined 和 3

  *函数内部 再次全局声明,会修改全局的a

         var a = 1;
function f(){
alert(a);
a = 2;
alert(a);
}
f(); //1 和 2

  *函数内全局赋值一次,var声明一次    函数f()内还是会优先使用自己的变量a

        var a = 1;                 //           函数f()内变量a的执行顺序
function f(){
alert(a);
a = 2; // #2
alert(a);
var a = 3; //等价于 var a ; #1
// a = 3 ; #3
alert(a);
} f(); //undefined 2 和 3
alert(a); //1

  函数f()内 变量a 声明与赋值 的执行顺序如上,应该很明确了!!

*一个经典的例子复习一下:

              var a,b;
(function(){
alert(a); //undefined
alert(b); //undefined
var a=b=3; //等价于 var a = 3 ; b = 3; b是全局的
alert(a); //
alert(b); //
})();
alert(a); //undefined
alert(b); //

三、总结

  1、JS的解析过程分为两个阶段:预编译期(预处理)执行期

    预编译期 JS会对本代码块(两个script块互不影响)中的所有var声明的变量函数进行处理(类似与C语言的编译)

    此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。

    执行期 会按照代码块的顺序筑行执行

  2、把执行方法写在函数定义之前是不太规范的,但这个界限被弱化了。如今在一个作用范围之内,都可以被正常调用。

  所以,建议和优化如下:

    1.函数体内变量最好var声明为局部,保持安全性和局部性。

    2.所有变量的声明最好一次性写在作用域的顶端,函数不必需如此,如:

             function f(){
var a, b, c; a = "abc";
b = [1,3,1];
c = 12;
}

    3.函数的执行方法 最好在 函数的定义 之后

  

  

  作者:没错high少是我                                                                                                                                                                                     

  出处:http://www.cnblogs.com/highshao/                                                                                                        
  本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

js函数和变量的执行顺序【易错】的更多相关文章

  1. js 函数和变量的提升

    js 函数和变量的提升 1. 函数的作用域: js中 ,函数的作用域为函数,而不是大括号. var hei = 123;if(true){ hei = 456;}console.log(hei);// ...

  2. JS的预编译和执行顺序 详析

    原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题   代码:   复制代码 代码一 <ht ...

  3. wex5 实战 wex5与js的组件关系与执行顺序(父子与先后)

    初学wex5,先理理让人容易混淆的三个概念: 一 基本概念: 1 wex5组件,顾名思义,在编辑窗口右侧的组件集合里的,都是wex5基于开源自创的组件,并封装了一套自已的方法.目的是为了方便.相关方法 ...

  4. JS函数和变量

    JS函数和变量  函数: 函数是由事件或者当它被调用时执行的可重复使用的代码块. 是一个独立的代码块,实现特定功能模块. 函数他不进行调用触发的话,不会自己主动执行. 像ATM机一样,不去取钱的话不会 ...

  5. js 关于setTimeout和Promise执行顺序问题

    js 关于setTimeout和Promise执行顺序问题 异步 -- Promise和setTimeout 执行顺序   Promise 和 setTimeout 到底谁先执行 定时器的介绍 Jav ...

  6. js函数和变量的声明与执行顺序

    一.函数执行顺序 1.正常顺序 function f(){ alert(2); } f(); //alert 2 所有浏览器都能测试通过. 2.倒序调用 f(); //alert 2 function ...

  7. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  8. JS的预编译和执行顺序 详析(及全局与局部变量)

    最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题:   <html> <head> <title> ...

  9. JS函数和变量名称冲突

    在JS中如果函数名与变量名冲突,JS是怎么执行的? <script> console.log(sum);//function sum(){} function sum(){} var su ...

随机推荐

  1. 清除inline-block元素默认间距

    1. font-size:0; 2.letter-spaceing:-0.5em;

  2. Extjs-树 Ext.tree.TreePanel 动态加载数据

    先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...

  3. 服务化之Netty

    关于Netty的介绍可参考:https://www.zhihu.com/question/24322387 Netty官网为:http://netty.io/ Git:https://github.c ...

  4. HDU3065 病毒侵袭持续中 —— AC自动机

    题目链接:https://vjudge.net/problem/HDU-3065 病毒侵袭持续中 Time Limit: 2000/1000 MS (Java/Others)    Memory Li ...

  5. Java 出现“Illegal key size”错误的解决方案

    用AES加密时出现"java.security.InvalidKeyException: Illegal key size"异常. 如果密钥大于128, 会抛出上述异常.因为密钥长 ...

  6. Java线程面试题 Top 50(转载)

    原文链接:http://www.importnew.com/12773.html 本文由 ImportNew - 李 广 翻译自 javarevisited 不管你是新程序员还是老手,你一定在面试中遇 ...

  7. Java线程池技术以及实现

    对于服务端而言,经常面对的是客户端传入的短小任务,需要服务端快速处理并返回结果.如果服务端每次接受一个客户端请求都创建一个线程然后处理请求返回数据,这在请求客户端数量少的阶段看起来是一个不错的选择,但 ...

  8. myeclipse_JUnit导包问题

    第一种方式: MyEclipse创建JUnit单元测试时,在需要测试的代码段前键入“@Test”时,按ctrl和1一般会自动提示JUnit需要导包,但有时会无法提示这个建议,如图所示.该经验教你如何解 ...

  9. windows下多进程加协程并发模式

    好久没更新博客了.正好最近要整理一下最近这段时间做过的项目以及学习python的一些心得.如标题所示,今天就来说说windows下多进程加协程并发模式.其实网上还是蛮多在linux下的多进程加协程并发 ...

  10. 条件变量pthread_cond_wait()和pthread_cond_signal()详解

    条件变量        条件变量是利用线程间共享的全局变量进行同步的一种机制,主要包括两个动作:一个线程等待"条件变量的条件成立"而挂起:另一个线程使"条件成立" ...