专栏首页HTML5学堂函数声明与表达式的区别

函数声明与表达式的区别

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

函数声明的基本语法

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

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

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

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

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

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

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

经典案例

此段代码合法

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

此段代码不合法

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

拓展性知识

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

function h5course() {};
console.log(h5course.name);
var h5 = function(){};
console.log(h5.name);

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

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

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

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-03-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 轻松但深入的学习闭包原理 —— 曾让几乎所有JS新手痛恨的知识

    HTML5学堂-码匠:这或许是你看过的,最浅显易懂的一篇关于闭包原理的讲解! 闭包的官方定义 官方定义:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通...

    HTML5学堂
  • JS 计时器参数剖析与真题

    HTML5学堂-码匠:计时器的第一个参数,包含几种不同的书写方法,可以是函数名,匿名函数,JS代码字符串,还有一些面试题当中会出现“函数调用”的书写方式。 那么...

    HTML5学堂
  • 点击块,让小块动起来 - 函数封装

    上一期我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式,它是实现页面交互效果的重要基础知识。如果想具体了解JS设置标签的内容和样式,可以回复“标...

    HTML5学堂
  • JavaScript 编程精解 中文第三版 三、函数

    ApacheCN_飞龙
  • 深入理解JavaScript函数 原

        从功能上理解,函数是一组可以随时运行的语句,是一段代码块,也是所谓的子程序。在JavaScript中,函数实质上也是一种对象,是Function对象。函...

    珲少
  • 【玩转腾讯云】万物皆可Serverless之关于云函数冷热启动那些事儿

    然后我们再来看一下腾讯云云函数文档里的简介 https://cloud.tencent.com/document/product/583/9199

    乂乂又又
  • 前端学习(33)~js学习(十):函数

    从方式二的举例中可以看出:所谓的“函数表达式”,其实就是将匿名函数赋值给一个变量。

    Vincent-yuan
  • 【融职培训】Web前端学习 第3章 JavaScript基础教程6 函数基础

    函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数, 语法如下所示:

    学习猿地
  • Web前端学习 第3章 JavaScript基础教程6 函数基础

    函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数, 语法如下所示:

    学习猿地
  • C语言之函数

      结构化程序设计主张按功能来分析需求,主要原则自顶向下,逐步求精,模块化等。 主张按功能把软件系统逐步细分,每个功能都负责对数据进行一次处理,每个功能接收一些...

    互联网金融打杂

扫码关注云+社区

领取腾讯云代金券