一、函数执行顺序

1、正常顺序

  

  1. function f(){
  2. alert(2);
  3. }
  4. f(); //alert 2

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

2、倒序调用

  1. f(); //alert 2
  2. function f(){
  3. alert(2);
  4. }

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

3、含参函数倒序

  1. f(2); //alert 2
  2. function f(a){
  3. alert(a);
  4. }

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

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

  1. f();
  2. function f(){ //声明式函数
  3. alert(2);
  4. }
  5. f1();
  6. var f1 = function () { //赋值式函数
  7. alert(2);
  8. }

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

二、变量执行顺序

1、正常顺序

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

alert(a); //alert 2

2、倒序使用变量

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

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

3、局部变量的执行

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

  1. function f(){
  2. alert(a);
  3. a = 3;
  4. }
  5. f(); //error: a is not defined

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

  1. function f(){
  2. alert(a);
  3. var a = 3;
  4. }
  5. f(); //undefined

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

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

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

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

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

  1. var a = 1;
  2. function f(){
  3. alert(a);
  4. var a = 3;
  5. alert(a);
  6. }
  7. f(); //undefined 和 3

  *函数再度全局声明,会修改全局的a

  1. var a = 1;
  2. function f(){
  3. alert(a);
  4. a = 2;
  5. alert(a);
  6. }
  7. f(); //1 和 2

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

  1. var a = 1; //函数f()内变量a的执行顺序
  2. function f(){
  3. alert(a);
  4. a = 2; //#2
  5. alert(a);
  6. var a = 3; //等价于 var a ; #1
  7. // a = 3 ; #3
  8. alert(a);
  9. }
  10. f(); //undefined 2 和 3
  11. alert(a); //1

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

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

  1. var a,b;
  2. (function(){
  3. alert(a); //undefined
  4. alert(b); //undefined
  5. var a=b=3; //等价于 var a = 3 ; b = 3; b是全局的
  6. alert(a); //
  7. alert(b); //
  8. })();
  9. alert(a); //undefined
  10. alert(b); //

三、总结

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

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

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

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

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

  所以,建议和优化如下:

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

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

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

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

js函数和变量的声明与执行顺序的更多相关文章

  1. js函数和变量的执行顺序【易错】

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

  2. js 函数和变量的提升

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

  3. JS函数和变量

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

  4. js函数、变量提升(hoisting)

    其实我只是想复习下变量提升的,然后看到了函数提升,然后再看到了函数声明.函数表达式. 有必要怀着敬仰之心提及园子里的TOM大叔的解密命名函数表达式,不愧是大叔,好好地脑补了下基础知识. 在ECMASc ...

  5. JS基础_变量的声明提前、函数的声明提前

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JS函数、变量作用域

    函数参数 函数的()中指定一个或多个形参(形式参数),多个形参之间用,号隔开,声明形参相当于在函数内部声明了对应的变量,但不赋值.在调用时在()中指定实参  调用时解析器不会检查实参类型.数量,实参可 ...

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

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

  8. MIC中函数和变量的声明

    c++/c使用 __declspec(target(mic))函数或变量声明 或 __attribute__((target(mic)))函数或变量声明 举例如下: __attribute__((ta ...

  9. [转]js 判断js函数、变量是否存在

    本文转自:http://blog.csdn.net/liang4571231/article/details/4042519 在进行js编程时,总会出现可能一些函数或者变量未定义而被引用,导致报错的情 ...

随机推荐

  1. Maven设置本地仓库路径

    在maven文件下的settings.xml中添加<localRepository>F:\cppdy\repo</localRepository>(本地仓库路径)

  2. 给artDialog插件增加动画效果

    领导想给弹窗增加几种动画效果,以前用过layer弹窗,效果不错,它的动画是用的样式,实现很简单,所以把动画拷贝了过来,打包到现在的artDialog.js里... 使用方式:新增配置参数{anim:4 ...

  3. 【linux】ftp使用端口转发问题

    相关资料: 1.[ssh]端口转发 2.[ftp]主动模式和被动模式 先说结论:用端口转发无法解决ftp客户端与服务器的连接问题,原因是ftp的data端口不固定,不能把所有>1024的端口都做 ...

  4. log4j2的log输出到tomcat/logs目录下及使用(转)

    原文链接:http://blog.csdn.net/honghailiang888/article/details/50370252 原文作者:  Herman-Hong 一.环境配置 log4j2. ...

  5. ORA-27157 ORA-27300 ORA-27301

    目录: 问题现象 原因分析 解决方案 问题现象: 收到同事反馈,数据库无法连接.于是登录服务器发现,数据库莫名挂掉.实例crash,日志中记录截取一段如下: Errors in file /u01/a ...

  6. python with语句中的变量有作用域吗?

    一直以为python中的with语句中的变量,只在with语句块中起作用.不然为什么要缩进一个级别呢? 呵呵,然而并没有为with语句内的变量创建新的作用域. 举例: # test.py with o ...

  7. Caused by: java.net.ConnectException: Connection refused: master/192.168.3.129:7077

    1:启动Spark Shell,spark-shell是Spark自带的交互式Shell程序,方便用户进行交互式编程,用户可以在该命令行下用scala编写spark程序. 启动Spark Shell, ...

  8. jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

    jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuery MiniUI学习网址:http:// ...

  9. explicit specialization 显式指定

    //explicit specialization 显式指定 #include "stdafx.h" #include <iostream> #include < ...

  10. The connection string 'MysqlEF' in the application's configuration file does not contain the require异常

    在学习EF core first 对接mysql时,出现了这个异常. 原因是:连接字符串中缺少providerName="MySql.Data.MySqlClient" <a ...