JavaScript 函数表达式与函数声明的用法及区别

目录
  • 前言
  • 什么是函数声明？
  • 函数声明的好处
  • 什么是函数表达式？
  • 函数表达式的好处
  • 函数表达式和函数声明之间的区别
  • 函数表达式中的作用域
  • 如何在表达式和声明之间进行选择
  • 何时选择函数声明与函数表达式
  • 在以下情况下使用函数声明
  • 在以下情况下使用函数表达式

前言

在 JavaScript 中创建函数有两种方法：函数表达式和函数声明。在本文中，将讨论何时使用函数表达式与函数声明，并解释它们之间的区别。

函数声明已经使用了很长时间，但函数表达式已经逐渐占据主导地位。函数表达式和函数声明之间有一些关键区别，来看看这些差异，以及何时在代码中使用函数表达式与函数声明。

// 函数声明
function funcDeclaration() {
    return "函数声明";
}
// 函数表达式
const funcExpression = function () {
    return "函数表达式";
};

什么是函数声明？

函数声明是在创建函数并为其命名的方式，开始使用 function 关键字声明函数。

例如：

function customFunction() {
    // 函数逻辑
    conosle.log("Hello")
};

如上所见，函数名称（customFunction）是在创建函数时声明的，这种方式着这个函数可以在定义之前调用它，

如下：

customFunction();
function customFunction() {
    // 函数逻辑
    console.log("Hello");
}

函数声明的好处

  • 它可以使代码更具可读性：如果有一个很长的函数，给它一个名字可以帮助跟踪它在做什么。
  • 函数声明被提升：这种方式定义的函数可以在定义之前调用它，如果需要在定义之前使用该函数，这将非常有用。

什么是函数表达式？

函数表达式是在创建函数并将其分配给变量，此方式定义的函数是匿名函数，这意味着它没有名称。

例如：

const customFunction = function() {
    // 函数逻辑
    conosle.log("Hello")
};

如上所述，该函数被分配给 customFunction 变量，这种方式必须先定义该函数，才能调用它。

如下的方式是错误的：

customFunction();
const customFunction = function() {
    // 函数逻辑
    conosle.log("Hello")
};

函数表达式的好处

  • 比函数声明更灵活：可以创建函数表达式并将它们分配给不同的变量，这在需要在不同的地方使用相同的函数时会很有帮助。
  • 函数表达式未提升：在代码中定义它们之前不能使用它们。如果想确保函数仅在定义后使用，这将很有帮助。

函数表达式和函数声明之间的区别

函数表达式和函数声明之间有几个关键区别：

  • 函数声明被提升（关于提升，可以参阅《Javascript变量函数声明提升深刻理解》，而函数表达式则没有。可以在定义函数声明之前调用它，但不能使用函数表达式执行此操作。
  • 使用函数表达式，可以在定义函数后立即使用它。使用函数声明，必须等到整个脚本被解析。
  • 函数表达式可以是匿名的，而函数声明则不能。

函数表达式中的作用域

与let语句类似，函数声明被提升到其它代码的顶部。函数表达式不会被提升。这允许它们从定义它们的范围内保留局部变量的副本。

通常，可以互换使用函数声明和函数表达式，但有时函数表达式会生成更易于理解的代码，而不需要临时函数名。

如何在表达式和声明之间进行选择

那么，什么时候应该使用函数表达式与函数声明呢？

答案取决于需求，如果需要一个更灵活的函数或一个不被提升的函数，那么函数表达式就是首选。如果需要一个更具可读性和可理解性的函数，请使用函数声明。

如上所见，这两种语法是相似的，最明显的区别是函数表达式是匿名的，而函数声明是有名字的。当需要做一些函数表达式不能做的事情时，通常会使用函数声明。如果不需要做任何只能通过函数声明才能完成的事情，那么通常最好使用函数表达式。

当需要创建递归函数或需要在定义函数之前调用该函数时，就需要使用函数声明。

作为一个经验法则，当不需要做这些事情时，使用函数表达式来获得更简洁的代码。

何时选择函数声明与函数表达式

在大多数情况下，很容易确定哪种定义函数的方法最适合需求。下面这些准则在大多数情况下可以快速做出决定。

在以下情况下使用函数声明

  • 需要一个更易读易懂的函数（比如一个长函数，或者需要在不同地方使用的函数）
  • 匿名函数不适合的需求
  • 需要创建一个递归函数
  • 需要在定义之前调用该函数

在以下情况下使用函数表达式

  • 需要一个更灵活的功能
  • 需要一个未提升的功能
  • 该函数只应在定义时使用
  • 该函数是匿名的，或者不需要名称供以后使用
  • 想控制函数何时执行，使用立即调用函数表达式 (IIFE) 等技术

到此这篇关于JavaScript 函数表达式与函数声明的用法及区别的文章就介绍到这了,更多相关JS函数声明内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

    JavaScript 中需要创建函数的话,有两种方法:函数声明.函数表达式,各自写法如下: // 方法一:函数声明 function foo() {} // 方法二:函数表达式 var foo = function () {}; 另外还有一种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行: (function () { // var x = ... })(); 此种自执行函数表达式归类于以上两种方法

  • JavaScript中函数声明与函数表达式的区别详解

    前言 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略.下面看看这两者的详细区别介绍. 什么是 Function Declaration(函数声明)? Function Declaration 可以定义命名的函数变量,而无需给变量赋值.Function Declaration 是一种独立的结构,不能

  • 理解 javascript 中的函数表达式与函数声明

    理解 javascript 中的函数表达式与函数声明

    常用闭包的同学肯定很清楚下面一段代码: //通常的闭包写法 (function () { ... }()) 那么我们的问题来了,为什么要在 function () {...}() 之外用圆括号包裹呢?解答这个问题,就需要我们理解 Javascript 中函数表达式与函数声明的概念. 函数定义带来的错误 虽然 function () {...} 看上去像是一个函数声明,但是由于没有函数名,它的本质其实是一个函数表达式.我们看下规范中对于函数声明与函数表达式的定义: 可以看出来,函数声明是必须带有函

  • JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同

    函数表达式和函数声明 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明: function 函数名称 (参数:可选){ 函数体 } 函数表达式: function 函数名称(可选)(参数:可选){ 函数体 } 所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函

  • 浅谈javascript 函数表达式和函数声明的区别

    浅谈javascript 函数表达式和函数声明的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • js中函数声明与函数表达式

    目前为止,我们一直没有对函数声明和函数表达式加以区别.而实际上,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问):至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行.如下例子: 复制代码 代码如下: alert(sum(10,10)); function sum(num1,num2) {     return num1+num2; } 以上代码完全可以正确执行,因为在代码开始执行之前,解析

  • JavaScript 函数表达式与函数声明的用法及区别

    目录 前言 什么是函数声明? 函数声明的好处 什么是函数表达式? 函数表达式的好处 函数表达式和函数声明之间的区别 函数表达式中的作用域 如何在表达式和声明之间进行选择 何时选择函数声明与函数表达式 在以下情况下使用函数声明 在以下情况下使用函数表达式 前言 在 JavaScript 中创建函数有两种方法:函数表达式和函数声明.在本文中,将讨论何时使用函数表达式与函数声明,并解释它们之间的区别. 函数声明已经使用了很长时间,但函数表达式已经逐渐占据主导地位.函数表达式和函数声明之间有一些关键区别

  • JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符返回一个用来表示表达式的数据类型的字符串. typeof expression ; expression 参数是需要查找类型信息的任意表达式. 说明typeof 是一个一元运算符,放在一个运算数之前. typeof 运算符把类型信息当作字符串返回.typeof 返回值有六种可能: "number" ,"string",

  • 浅析javascript中函数声明和函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • Javascript学习笔记之 函数篇（一） : 函数声明和函数表达式

    函数声明 function foo() {} 函数 foo 将会在整个程序执行前被 hoist (提升),因此它在定义 foo 函数的整个 scope (作用域)中都是可用的.即使在函数定义之前调用它也没问题. foo(); // Works because foo was created before this code runs function foo() {} 因为我打算专门写篇介绍作用域的文章,所以这里就不详述了. 函数表达式 对于函数声明,函数的名称是必须的,而对于函数表达式而言则是

  • JavaScript中的函数声明和函数表达式区别浅析

    记得在面试腾讯实习生的时候,面试官问了我这样一道问题. 复制代码 代码如下: //下述两种声明方式有什么不同   function foo(){};   var bar = function foo(){}; 当初只知道两种声明方式一个是函数声明一个是函数表达式,具体有什么不同没能说得很好.最近正好看到这方面的书籍,就想好好总结一番. 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终

  • JavaScript函数声明和函数表达式的区别

    JavaScript函数声明和函数表达式的区别

    目录 一.写法不一样 二.函数声明加载 三.分析浏览器如何执行代码 一.写法不一样 //函数声明 let res1 = sum1(10 , 20) console.log(res1) function sum1(num1, num2) { return num1 + num2 } //函数表达式 let res2 = sum2(10 , 20) console.log(res2) let sum2 = function ( num1, num2 ){ return num1 + num2 } 二

  • javascript 函数声明与函数表达式的区别介绍

    还是一样,先上代码: 复制代码 代码如下: <script> var f = function g() { return 1; }; if (false) { f = function g(){ return 2; }; } alert(g()); // 2 </script> 把这段代码扔到IE 6 里面和chorme里面是完全不同的两种效果. 这里输出2 是在ie6里面的效果,如果在chorme会出现g没有定义. 这也算是JScript的bug吧. 在这里很明显,这里的只是定义

随机推荐