Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装、继承等,也可以让代码得到复用。但事物都有两面性,Javascript函数有的时候也比较“任性”,你如果不了解它的“性情”,它很可能给你制造出一些意想不到的麻烦(bugs)出来。

  Javascript Function有两种类型:

  1)函数声明(Function Declaration);

    // 函数声明
function funDeclaration(type){
return type==="Declaration";
}

  2)函数表达式(Function Expression)。

    // 函数表达式
var funExpression = function(type){
return type==="Expression";
}

  上面的代码看起来很类似,感觉也没什么太大差别。但实际上,Javascript函数上的一个“陷阱”就体现在Javascript两种类型的函数定义上。下面看两段代码(分别标记为代码1段和代码2段):

1     funDeclaration("Declaration");//=> true
2 function funDeclaration(type){
3 return type==="Declaration";
4 }
1     funExpression("Expression");//=>error
2 var funExpression = function(type){
3 return type==="Expression";
4 }
  用函数声明创建的函数funDeclaration可以在funDeclaration定义之前就进行调用;而用函数表达式创建的funExpression函数不能在funExpression被赋值之前进行调用。
为什么会这样呢?!这就要理解Javascript Function两种类型的区别:用函数声明创建的函数可以在函数解析后调用(解析时进行等逻辑处理);而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用。
这个区别看似微小,但在某些情况下确实是一个难以发现的陷阱。出现这个陷阱的本质原因体现在这两种类型在Javascript function hoisting(函数提升)和运行时机(解析时/运行时)上的差异。
关于变量提升https://www.cnblogs.com/gaoht/p/10404911.html
上面两段代码的函数提升可示意为下图:

代码1段JS函数等同于:
    function funDeclaration(type){
return type==="Declaration";
}
funDeclaration("Declaration");//=> true

代码2段JS函数等同于:
    var funExpression;
funExpression("Expression");//==>error
funExpression = function(type){
return type==="Expression";
}

  上述代码在运行时,只定义了funExpression变量,但值为undefined。因此不能在undefined上进行函数调用。此时funExpression赋值语句还没执行到。为了进一步加深JS函数两种类型的区别,下面给出一个更具迷惑性的示例,请看下面的代码(代码段4):

var sayHello;
console.log(typeof(sayHey)); //=>function
console.log(typeof(sayHo)); //=>undefined function sayHey() {
console.log("sayHey");
}
sayHello = function sayHo() {
console.log("sayHello");
} function sayHey() {
console.log("sayHey2");
}
sayHello = function sayHo() {
console.log("sayHello2");
} sayHey(); // => sayHey2
sayHello(); // => sayHello
分析:sayHey是用函数声明创建的,在JS解析时JS编译器将函数定义进行了函数提升,也就是说,在解析JS代码的时候,JS编译器(条件判断不形成新的作用域,两个sayHey函数定义都被提升到条件判断之外)检测到作用域内有两个同名的sayHey定义,第一个定义先被提升,第二个定义接着被提升(第二个定义在第一个定义之下),
第二个定义覆盖了第一个sayHey定义,所以sayHey()输出sayHey2;而sayHello是用函数表达式创建的,其表达式的内容是在JS运行时(不是解析时)才能确定(这里条件判断就起到作用了),
所以sayHello表达式执行了第一个函数定义并赋值,则sayHello()输出sayHello。

  代码段4的代码实际上等同于下面的代码(代码段5):

var sayHello;

function sayHey() {
console.log("sayHey");
} function sayHey() {
console.log("sayHey2");
}
console.log(typeof(sayHey)); //=>function
console.log(typeof(sayHo)); //=>undefined //hoisting...
sayHello = function sayHo() {
console.log("sayHello");
} //hoisting...
sayHello = function sayHo() {
console.log("sayHello2");
} sayHey(); // => sayHey2
sayHello(); // => sayHello2 并非是 sayHello

  总结

  Javascript 中函数声明和函数表达式是存在区别的,函数声明在JS解析时进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用。而函数表达式的值是在JS运行时确定,并且在表达式赋值完成后,该函数才能调用。这个微小的区别,可能会导致JS代码出现意想不到的bug,让你陷入莫名的陷阱中。

  最后附

  上图为sayHello函数执行的主要步骤示意图。

上图为sayHey函数执行主要步骤的示意图。若对闭包感兴趣,可以看另外一篇博文https://www.cnblogs.com/gaoht/p/10430853.html

js函数声明和函数表达式的区别的更多相关文章

  1. js学习之函数声明与函数表达式区别[原创]

    作为一名js初学者,与大家分享下.Javascript中有函数声明提升的功能,会优先编译函数声明部分.比如, ff(); function ff(){ alert("hello world. ...

  2. JS中的函数声明和函数表达式的区别,即function(){}和var function(){},以及变量提升、作用域和作用域链

    一.前言 Uncaught TypeError: ... is not a function function max(){}表示函数声明,可以放在代码的任何位置,也可以在任何地方成功调用: var ...

  3. JavaScript(js)函数声明与函数表达式的区别

    在JavaScript中,函数是经常用到的,在实际开发的时候,我想很多人都没有太在意函数的声明与函数表达式的区别,但是呢,这种细节的东西对于学好js是非常重要的. 函数声明与函数表达式用代码写出来是这 ...

  4. Js中函数声明和函数表达式的区别

    先看以下几段烧脑的代码: f();//=>? var f = function () { console.log("var"); } function f() { conso ...

  5. js 函数声明和函数表达式的区别

    javascript中声明函数的方法有两种:函数声明和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数 ...

  6. JS的一些总结(函数声明和函数表达式的区别,函数中的this指向的问题,函数不同的调用方式,函数也是对象,数组中的函数调用)

    一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ conso ...

  7. js中的函数声明和函数表达式的区别

    目录 一.声明与表达式的格式 1.1 声明式的格式: 1.2 表达式的格式: 二.区别 2.1 函数表达式可以直接在后面加括号执行,而函数声明不可以. 2.2 函数表达式可以被提前解析出来 2.3 命 ...

  8. JS高级---函数声明和函数表达式的区别

    函数声明和函数表达式的区别 多用函数表达式 var ff=function(){}; //函数声明 // // if(true){ // function f1() { // console.log( ...

  9. 【JS】函数提升变量提升以及函数声明和函数表达式的区别

    今天看js的变量提升问题,里面提到了函数提升.然后发现自己之前一直把函数声明和函数表达式弄错,导致函数提升出错 一.变量提升 console.log(a) var a=100 //undefined ...

随机推荐

  1. 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  2. [再寄小读者之数学篇](2014-05-27 矩阵的迹与 Jacobian)

    (from MathFlow) 设 $A=(a_{ij})$, 且定义 $$\bex \n_A f(A)=\sex{\cfrac{\p f}{\p a_{ij}}}. \eex$$ 试证: (1) $ ...

  3. js高级知识---词法分析和AO 链

    转载自https://www.cnblogs.com/OceanHeaven/p/4957704.html 上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代 ...

  4. EF优化之启动预热

    为什么Entity Framework的初始化速度慢如蜗牛呢? 对于在应用程序中定义的每个DbContext类型,在首次使用时,Entity Framework都会根据数据库中的信息在内存生成一个映射 ...

  5. 给Ubuntu系统清理垃圾

    原文地址:https://blog.csdn.net/levon2018/article/details/81746613 1.清理下载的软件包  不过与你想象的可能有很大的不同,Ubuntu系统在运 ...

  6. ES进阶--04

    第30节彻底掌握IK中文分词_上机动手实战IK中文分词器的安装和使用 之前大家会发现,我们全部是用英文在玩儿...好玩儿不好玩儿...不好玩儿 中国人,其实我们用来进行搜索的,绝大多数,都是中文应用, ...

  7. centos/linux/ubuntu在局域网上网

    前言:对于服务器来说,一般不会安装windowns系统,都是会安装类unix系统,在局域网或者在内网中,上网还是走代理上网 1.知道代理服务器的ip及端口 2.就两条命令 export  http_p ...

  8. 详解 CAP 定理 Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性)

    CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者不可得兼. 分布式 ...

  9. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  10. node爬取html乱码

    var http = require('http'), iconv = require('iconv-lite'); http.get("http://website.com/", ...