详解JavaScript中的函数声明和函数表达式

 更新时间:2015年08月01日 11:25:51   作者:libuchao  
这篇文章主要介绍了详解JavaScript中的函数声明和函数表达式,是JS入门学习中的基础知识,需要的朋友可以参考下

JavaScript 中需要创建函数的话,有两种方法:函数声明、函数表达式,各自写法如下:

// 方法一:函数声明

function foo() {}


// 方法二:函数表达式
var foo = function () {};

另外还有一种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行:

(function () {
  // var x = ...
})();

此种自执行函数表达式归类于以上两种方法的第二种,也算是函数表达式。

方法一和方法二都创建了一个函数,且命名为 foo,但是二者还是有区别的。JavaScript 解释器中存在一种变量声明被提升(hoisting)的机制,也就是说变量(函数)的声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。

例如以下代码段:

alert(foo); // function foo() {}
alert(bar); // undefined
function foo() {}
var bar = function bar_fn() {};
alert(foo); // function foo() {}
alert(bar); // function bar_fn() {}

输出结果分别是function foo() {}、undefined、function foo() {}和function bar_fn() {}。

可以看到 foo 的声明是写在 alert 之后,仍然可以被正确调用,因为 JavaScript 解释器会将其提升到 alert 前面,而以函数表达式创建的函数 bar 则不享受此待遇。

那么bar 究竟有没有被提升呢,其实用 var 声明的变量都会被提升,只不过是被先赋值为 undefined 罢了,所以第二个 alert 弹出了 undefined。

所以,JavaScript 引擎执行以上代码的顺序可能是这样的:

  •     创建变量 foo 和 bar,并将它们都赋值为 undefined。
  •     创建函数 foo 的函数体,并将其赋值给变量 foo。
  •     执行前面的两个 alert。
  •     创建函数 bar_fn,并将其赋值给 bar。
  •     执行后面的两个 alert。

注:

严格地说,再 JavaScript 中创建函数的话,还有另外一种方法,称为“函数构造法”:

var foo = Function('alert("hi!");');
var foo = new Function('alert("hi!");'); // 等同于上面一行

此方法以一个字符串作为参数形成函数体。但是用这种方法,执行效率方面会打折扣,且似乎无法传递参数,所以少用为妙。

相关文章

  • springboot整合shiro实现登录验证授权的过程解析

    springboot整合shiro实现登录验证授权的过程解析

    这篇文章主要介绍了springboot整合shiro实现登录验证授权,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • Spring Boot整合mybatis并自动生成mapper和实体实例解析

    Spring Boot整合mybatis并自动生成mapper和实体实例解析

    本文是小编给大家总结的关于Spring Boot整合mybatis并自动生成mapper和实体的内容,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • Java中逆序遍历List集合的实现

    Java中逆序遍历List集合的实现

    本文主要介绍了Java中逆序遍历List集合的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • Java生成唯一ID的三种方法总结

    Java生成唯一ID的三种方法总结

    单机环境下,可以使用AtomicLong来生成唯一ID;而在需要非纯数字形式的场景中,可以通过UUID结合哈希函数如MD5或SHA-1转换成数字,但需注意哈希碰撞的低概率风险;对于分布式系统,模拟Snowflake算法是一种复杂但有效的方法,每种方法都有其适用场景和潜在问题
    2024-09-09
  • java通过Jsoup爬取网页过程详解

    java通过Jsoup爬取网页过程详解

    这篇文章主要介绍了java通过Jsoup爬取网页过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 详解Spring中bean实例化的三种方式

    详解Spring中bean实例化的三种方式

    本篇文章主要介绍了详解Spring中bean实例化的三种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Java多线程Atomic包操作原子变量与原子类详解

    Java多线程Atomic包操作原子变量与原子类详解

    这篇文章主要介绍了Java多线程Atomic包操作原子变量与原子类详解,简单介绍了Atomic,同时涉及java.util.concurrent中的原子变量,Atomic类的作用等相关内容,具有一定参考价值,需要的朋友可以了解下。
    2017-11-11
  • SpringMVC五大组件与执行原理分析总结

    SpringMVC五大组件与执行原理分析总结

    这篇文章主要介绍了SpringMVC五大组件与执行原理分析总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • SSM框架把日志信息保存到数据库过程详解

    SSM框架把日志信息保存到数据库过程详解

    这篇文章主要介绍了SSM框架把日志信息保存到数据库过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Java超详细梳理IO流的使用方法上

    Java超详细梳理IO流的使用方法上

    流(Stream)是指一连串的数据(字符或字节),是以先进先出的方式发送信息的通道,数据源发送的数据经过这个通道到达目的地,按流向区分为输入流和输出流
    2022-04-04

最新评论