JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同_javascript技巧

函数表达式和函数声明

在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符:

  函数声明:

  function 函数名称 (参数:可选){ 函数体 }

  函数表达式:

  function 函数名称(可选)(参数:可选){ 函数体 }

所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?ECMAScript是通过上下文来区分的,如果function foo(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,如果function foo(){}被包含在一个函数体内,或者位于程序的最顶部的话,那它就是一个函数声明。

 function foo(){} // 声明,因为它是程序的一部分
 var bar = function foo(){}; // 表达式,因为它是赋值表达式的一部分
 new function bar(){}; // 表达式,因为它是new表达式
 (function(){
  function bar(){} // 声明,因为它是函数体的一部分
 })();

还有一种函数表达式不太常见,就是被括号括住的(function foo(){}),他是表达式的原因是因为括号 ()是一个分组操作符,它的内部只能包含表达式,我们来看几个例子:

  function foo(){} // 函数声明
  (function foo(){}); // 函数表达式:包含在分组操作符内

命名函数表达式

提到命名函数表达式,理所当然,就是它得有名字,前面的例子var bar = function foo(){};就是一个有效的命名函数表达式,但有一点需要记住:这个名字只在新定义的函数作用域内有效,因为规范规定了标示符不能在外围的作用域内有效:

 var f = function foo(){
  return typeof foo; // foo是在内部作用域内有效
 };
 // foo在外部用于是不可见的
 console.log(typeof foo); // "undefined"
 console.log(f()); // "function"
var f = function foo(){
return foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
console.log(typeof foo); // "undefined"
console.log( f()==f); // "function"
console.log(f.name);//foo

既然,这么要求,那命名函数表达式到底有啥用啊?为啥要取名?

正如我们开头所说:给它一个名字就是可以让调试过程更方便,因为在调试的时候,如果在调用栈中的每个项都有自己的名字来描述,那么调试过程就太爽了,感受不一样嘛。

ps:JS中函数声明与函数表达式的不同

Js中的函数声明是指下面的形式:

function functionName(){
} 

这样的方式来声明一个函数,而函数表达式则是类似表达式那样来声明一个函数,如:

     var functionName = function(){
}

可能很多朋友在看到这两一种写法时会产生疑惑,这两种写法差不多,在应用中貌似也都是可行的,那他们有什么差别呢?

 事实上,js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明,js解析器会优先读取,确保在所有代码执行之前声明已经被解析,而函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析,所以在实际中,它们还是会有差异的,具体表现在,当使用函数声明的形式来定义函数时,可将调用语句写在函数声明之前,而后者,这样做的话会报错。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript函数声明
函数声明和函数表达式、函数声明与函数表达式、函数表达式 函数声明、javascript函数表达式、javascript 函数声明,以便于您获取更多的相关知识。

时间: 2024-09-30 18:56:55

JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同_javascript技巧的相关文章

JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)_javascript技巧

一.函数作用域 1.函数作用域 就是作用域在一个"Function"里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a, b, c ); // 三个全都失败 上面的"foo"函数内的几个标识符,放到函数外面访问就都会报错. 2.立即执行函数表达式 在任意代码片段外部

JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)_javascript技巧

js中输出信息的方法内容如下所示: 1.文档流输出 document.write('hello'); 2.输出信息提示框 模态对话框 window.alert('要输出显示的内容'); 或 alert('要输出显示的内容'); alert(n); 3.信息确认框 var f = window.confirm('是否要进入新浪网'); confirm(""); if(f){ location.href = 'http://www.sina.com.cn'; } 4.提示输入框 windo

JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法_javascript技巧

今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时都是正常的,但是在"08","09"就会返回0 (这种现象出现在ie内核的浏览器中,如360浏览器就会出现这种错误)(谷歌,火狐不受影响) . 查阅资料得知着这种现象原因: 大神的解释: 01--07自然没有问题,但是09,08都是不合格的八进制形式,所以被按照0处理了

JavaScript中为什么null==0为false而null大于=0为true(个人研究)_javascript技巧

生活中我们在不停的编写代码,写着JavaScript,很少有时间进行概念上的研究.我呢,今天闲来没啥事,研究了一下有关"null"和"0"的关系.希望大家看完了能有所收获. 复制代码 代码如下: alert(null>=0) 复制代码 代码如下: 上面的代码会弹出什么来呢?False?True?其实是true.那么是为什么呢?为什么"null>=0"为true呢?null>=0的时候,强转为数字类型.在进行null>=0比

JavaScript中实现键值对应的字典与哈希表结构的示例_javascript技巧

字典(Dictionary)的javascript实现编程思路: 使用了裸对象datastore来进行元素存储: 实现了两种得到字典长度的方法,一种为变量跟踪,一种为实时计算. 代码: function(){ "use strict"; function Dictionary(){ this._size = 0; this.datastore = Object.create(null); } Dictionary.prototype.isEmpty = function(){ retu

JavaScript中的索引数组、关联数组和静态数组、动态数组讲解_javascript技巧

数组分类: 1.从数组的下标分为索引数组.关联数组 复制代码 代码如下: /* 索引数组,即通常情况下所说的数组 */ var ary1 = [1,3,5,8]; //按索引去取数组元素,从0开始(当然某些语言实现从1开始) //索引实际上就是序数,一个整型数字 alert(ary1[0]); alert(ary1[1]); alert(ary1[2]); alert(ary1[3]);   /* 关联数组,指以非序数类型为下标来存取的数组  python中称为字典 */ var ary2 =

用函数模板,写一个简单高效的 JSON 查询器的方法介绍_javascript技巧

JSON可谓是JavaScript的亮点,它能用优雅简练的代码实现Object和Array的初始化.同样是基于文本的数据定义,它比符号分隔更有语义,比XML更简洁.因此越来越多的JS开发中,使用它作为数据的传输和储存. JS数组内置了不少有用的方法,方便我们对数据的查询和筛选.例如我们有一堆数据: 复制代码 代码如下: var heros = [        // 名============攻=====防=======力量====敏捷=====智力====        {name:'冰室女巫

javascript prototype的深度探索不是原型继承那么简单第1/3页_javascript技巧

1 什么是prototype        JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念.         前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,因此我们把"类"看作是对象特征的模型化,而对象看作是类特征的具体化,或者说,类(Class)是对象的一个类型(Type).例如,在前面的

Javascript访问html页面的控件的方法详细分析第1/2页_javascript技巧

下面切入正题:    访问控件的主要对象是:document对象.分别对应当前文档所有的(子对象)个人观点.并且已经提供的几个主要方法来访问对象. 1.       document.getElementById 2.       document.getElementsByName  3           document.getElementsByTagName 4           document.all 下面我主要谈谈以上几个方法的具体用法:   一.首先我来谈谈document.

JS中页面与页面之间超链接跳转中文乱码问题的解决办法_javascript技巧

在原页面一张图片上添加了一个链接,链接中有中文,于是出现下面的情况:   解决办法是在tomcat的server.xml文件的中加入URIEncoding="utf-8",如下: <Connector URIEncoding="utf-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443