当前位置: 首页 > 编程笔记 >

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

程毅
2023-03-14
本文向大家介绍详解JavaScript中的函数声明和函数表达式,包括了详解JavaScript中的函数声明和函数表达式的使用技巧和注意事项,需要的朋友参考一下

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!");'); // 等同于上面一行

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

 类似资料:
  • 本文向大家介绍浅析javascript中函数声明和函数表达式的区别,包括了浅析javascript中函数声明和函数表达式的区别的使用技巧和注意事项,需要的朋友参考一下 javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数

  • 本文向大家介绍javascript函数声明和函数表达式区别分析,包括了javascript函数声明和函数表达式区别分析的使用技巧和注意事项,需要的朋友参考一下   平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本

  • 本文向大家介绍javaScript的函数对象的声明详解,包括了javaScript的函数对象的声明详解的使用技巧和注意事项,需要的朋友参考一下 写作缘由:     平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到     var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,

  • 函数是JavaScript中的一等对象,这意味着可以把函数像其它值一样传递。 一个常见的用法是把匿名函数作为回调函数传递到异步函数中。 函数声明 function foo() {} 上面的方法会在执行前被 解析(hoisted),因此它存在于当前上下文的任意一个地方, 即使在函数定义体的上面被调用也是对的。 foo(); // 正常运行,因为foo在代码运行前已经被创建 function foo

  • 本文向大家介绍JavaScript中的函数申明、函数表达式、箭头函数,包括了JavaScript中的函数申明、函数表达式、箭头函数的使用技巧和注意事项,需要的朋友参考一下 JavaScript中的函数可以通过几种方式创建,如下。 函数声明和表达式之间的差别是 JavaScript 解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会

  • 本文向大家介绍详解Javascript函数声明与递归调用,包括了详解Javascript函数声明与递归调用的使用技巧和注意事项,需要的朋友参考一下 Javascript的函数的声明方式和调用方式已经是令人厌倦的老生常谈了,但有些东西就是这样的,你来说一遍然后我再说一遍。每次看到书上或博客里写的Javascript函数有四种调用方式,我就会想起孔乙己:茴字有四种写法,你造吗? 尽管缺陷有一堆,但Ja

  • 本文向大家介绍函数声明与函数表达式有什么区别?相关面试题,主要包含被问及函数声明与函数表达式有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 函数声明 function fn() { ///... } 函数表达式 const aa = function() { ///... } 区别: 1.函数声明,函数名必须有,在函数表达式中可以省略函数名 2.函数声明会被预解析,函数表达式不会

  • 5.1. 函数声明 函数声明包括函数名、形式参数列表、返回值列表(可省略)以及函数体。 func name(parameter-list) (result-list) { body } 形式参数列表描述了函数的参数名以及参数类型。这些参数作为局部变量,其值由参数调用者提供。返回值列表描述了函数返回值的变量名以及类型。如果函数返回一个无名变量或者没有返回值,返回值列表的括号是可以省略的。如