HTML5学堂-码匠 HTML5学堂

您当前位于:ECMAScript 基础语法 ——> 函数声明与函数表达式的区别

函数声明与函数表达式的区别

2016/03/28 20:57:29 | 作者:HTML5学堂(码匠) | 分类:ECMAScript 基础语法 | 关键词:函数声明,函数表达式,JS基础

函数声明与表达式的区别

HTML5学堂:函数有不同的定义方法,一种是函数声明,另一种是函数表达式,那么这两种有何区别呢?

函数声明的基本语法

  1. function functionName(arg0, arg1, ..., argn) {
  2.     // 函数体 - HTML5学堂
  3. }

函数声明的重要特征:函数声明提升

在执行代码之前,会先读取函数声明,这也就意味着,可以把函数声明放在调用它的语句的后面。

函数表达式的常见语法形式

  1. var functionName = function(arg0, arg1, ..., argn) {
  2.     // 函数体 - HTML5学堂
  3. };

如何理解上面这段代码呢?创建一个匿名函数(也叫拉达姆函数),并将整个函数赋值给变量functionName

在执行这句代码之前,是不能够实现functionName()函数的调用的,函数表达式和其他表达式一样,都需要在使用前赋值。

经典案例

此段代码合法

  1. var say;
  2. if(conditions) {
  3.     say = function () { console.log('函数表达式-代码合法'); }
  4. } else {
  5.     say = function () { console.log('H5course'); }
  6. }

此段代码不合法

  1. if(conditions) {
  2.     function say() { console.log('函数声明-不合法代码'); }
  3. } else {
  4.     function say() { console.log('HTML5学堂'); }
  5. }

拓展性知识

在使用函数声明创建函数时,对于非IE浏览器,会为函数定义一个非标准的name属性,可以通过name属性访问到给函数指定的名字。而采用函数表达式所定义的函数,name属性为空字符串。如下:

  1. function h5course() {};
  2. console.log(h5course.name);
  3. var h5 = function(){};
  4. console.log(h5.name);

此段代码中,前者会打印h5course,但是后者只会输出空字符串

写在最后的一些话:关于此方面知识的理解,会涉及到“预编译与执行”,想了解此方面知识的童鞋可以点击——>《JavaScript 运行机制之执行顺序详解》

HTML5学堂小编-利利。耗时:1.5h

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端