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

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 函数声明,以便于您获取更多的相关知识。

时间: 2024-12-09 13:50:44

详解JavaScript中的函数声明和函数表达式_java的相关文章

详解JavaScript中的Unescape()和String() 函数_javascript技巧

JavaScript中的Unescape()和String() 函数详解,具体内容如下所示: 定义和用法 JavaScript unescape() 函数可对通过 escape() 编码的字符串进行解码. 语法 unescape(string) 参数 描述 string 必需.要解码或反转义的字符串. 返回值 string 被解码后的一个副本. 说明 该函数的工作原理是这样的:通过找到形式为 %xx 和 %uxxxx 的字符序列(x 表示十六进制的数字),用 Unicode 字符 \u00xx

详解JavaScript中的forEach()方法的使用

这篇文章主要介绍了详解JavaScript中的forEach()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript数组的 forEach()方法调用数组中的每个元素. 语法 ? 1 array.forEach(callback[, thisObject]); 下面是参数的详细信息: callback : 函数测试数组的每个元素. thisObject : 对象作为该执行回调时使用. 返回值: 返回创建数组. 兼容性: 这种方法是一个JavaScript扩展到ECM

详解JavaScript中循环控制语句的用法

  这篇文章主要介绍了详解JavaScript中循环控制语句的用法,包括break语句和continue语句的使用方法,需要的朋友可以参考下 JavaScript提供完全控制来处理循环和switch语句.可能有一种情况,当你需要退出一个循环,但未达到其底部.也可能有一种情况,当要跳过的码块的一部分,并直接开始下一个迭代. 为了处理这些情况下,JavaScript提供了break和continue语句.这些语句是用来马上退出任何循环或启动循环的下一次迭代. break 语句: break语句,这是

详解JavaScript中的客户端消息框架设计原理

  这篇文章主要介绍了详解JavaScript中的客户端消息框架设计原理,包括客户端和服务器端的通信等方面的内容,需要的朋友可以参考下 哇--是个危险的题目,对吗?我们对于什么是本质的理解当然会随着我们对要解决问题的理解而变化.因此我不会说谎--一年前我所理解的本质很不幸并不完整,因为我确信我将要写的已经快伴随我有6个月之久.所以,这篇文章是我在发现JavaScript中成功的运用客户端消息模式的一些关键要点时的一个掠影. 1.) 理解中介者与观察者的区别 大多数人在描述任何事件/消息机制的时候

详解JavaScript中void语句的使用

  这篇文章主要介绍了详解JavaScript中void语句的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 void是在JavaScript中的一个重要的关键字可被用作其单操作数之前出现一元运算符,其可以是任何类型. 此运算符指定不需要返回值,进行计算的表达式.它的语法可能是下列之一: ? 1 2 3 4 5 <head> <script type="text/javascript"> <!-- void func() javascript:vo

详解JavaScript中的4种类型识别方法_javascript技巧

具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

详解JavaScript中常用的函数类型_javascript技巧

网页中的java代码需要写在JavaScript中,里面部分少不了函数,介绍一下JavaScript中常用的函数类型.1.可变函数 <script> function show(){ alert("第一个..."); } function show(str){ alert("第二个"); } function show(a,b){ alert("第三个..."); alert(a+":"+b); } </sc

详解Javascript中的this关键字

请看下面的代码,最后alert出来的是什么呢? var name = "Bob"; var nameObj ={ name : "Tom", showName : function(){ alert(this.name); }, waitShowName : function(){ setTimeout(this.showName, 1000); } }; nameObj.waitShowName(); 要解决这个问题我们需要了解Javascript的this关键字

详解JavaScript中数组的相关知识_JavaScript

创建数组 js中数组的声明可以有如下几种方式: var arr = []; // 简写模式 var arr = new Array(); // new一个array对象 var arr = new Array(arrayLength); // new一个确定长度的array对象 要说明的是:     虽然第三种方法声明了数组的长度,但是实际上数组长度是可变的.也就是说,即使指定了长度为5,仍然可以将元素存储在规定长度之外,这时数组的长度也会随之改变. 此外,还需要明确的一点:     js是弱类