老生常谈JavaScript 函数表达式
JavaScript中创建函数主要有两种方法：函数声明和函数表达式。这两种方式都有不同的适用场景。这篇笔记主要关注的是函数表达式的几大特点以及它的使用场景，下面一一描述。
主要特点
•可选的函数名称
函数名称是函数声明的必需组成部分，这个函数名称相当于一个变量，新定义的函数会复制给这个变量，以后函数的调用都需要通过这个变量进行。而对于函数表达式来说，函数的名称是可选的，例如下面的例子：
var sub = function(a1,a2){
return a1-a2;
}
这个例子中函数表达式没有名称，属于匿名函数表达式。再看下面的例子：
var sub = function f(a1,a2){
return a1-a2;
}
console.log(f(5,3)); //错误调用方式
console.log(sub(5,3)); //正确调用方式
在这个例子中，函数表达式的名称为f，这个名称f实际上变成了函数内部的一个局部变量，并且指代函数对象本身，在函数递归的时候有很大用处，后面会详细讲到。
•在执行阶段创建(区别于函数声明)
这个特点是函数表达式明显区别于函数声明的地方。
解释器在解析JavaScript代码时对于这两种方式并不是一视同仁的。解释器会首先读取函数声明，并使其在执行任何代码之前可用；而对于函数表达式，则必须等到解释器执行到它所在的代码行，才会被真正解析执行。例如：
console.log(add(1,2)); //"3"
console.log(sub(5,3)); //"unexpected identifier"，报错
function add(a1,a2){
return a1+a2;
}
var sub = function(a1,a2){
return a1-a2;
}
第一条语句完全可以正常执行。对代码求值时，JavaScript引擎在第一遍就会声明函数并通过一个名为函数声明提升的过程将它们放到源代码树的顶部。也就是说在执行环境的创建阶段(函数被调用但还没有开始执行)就会对函数声明进行"hosting"操作。所以，即使声明函数的代码在调用它的代码后面，JavaScript引擎也会把函数声明提升到顶部。但是如果把函数声明更改为函数表达式，就会在执行期间报错。原因在于在执行到函数所在的语句之前，变量sub中并不会包含对函数的引用。也就是说在代码执行阶段，变量sub才会被赋值。除了以上不同，在其它方面函数声明和函数表达式的语法是等价的。
•不会影响变量对象
var sub = function f(a1,a2){
console.log(typeof f); //"function"
return a1-a2;
}
console.log(typeof f); //"Uncaught ReferenceError: f is not defined(…)"
通过上面的例子可以看到，函数名称f只能在函数对象内部使用，函数表达式的函数名称并不存在于变量对象中。
使用场景
函数表达式的使用场景很多。下面主要描述的是函数递归以及代码模块化方面的应用。
•函数递归
看下面的例子：
function factorial(num){
if(num <= 1){
return 1;
}else{
return num * factorial(num - 1);
}
}
这是一个经典的阶乘函数，但是这个例子存在的一个问题是函数名称factorial与函数体紧密耦合在一起，执行下面的语句就会报错：
var anotherFactorial = factorial; factorial = null; console.log(anotherFactorial(5)); //"Uncaught TypeError: factorial is not a function"
报错的原因在于在函数体内部会调用factorial函数，而变量factorial对函数的引用已经被解除所以报错。这种情况的解决方法一般可以使用arguments.callee来解决，arguments.callee始终指向当前的函数，例如：
function factorial(num){
if(num <= 1){
return 1;
}else{
return num * arguments.callee(num - 1);
}
}
这样在此执行anotherFactorial函数就可以得到正确结果了。但是在严格模式"strict"下，arguments.callee是不能通过脚本访问的，这是就可以使用函数表达式来解决这个问题了，例如：
var factorial = (function f(num){
if(num <= 1){
return 1;
}else{
return num * f(num - 1);
}
});
console.log(factorial(5)); //"120"
•代码模块化
JavaScript中没有块级作用域，但我们可以使用函数表达式模块化JavaScript代码。模块化代码中可以封装不必让使用者知道的细节，只暴露给使用者相关接口，同时可以避免对全局环境的污染，例如：
var person = (function(){
var _name = "";
return{
getName:function(){
return _name;
},
setName:function(newname){
_name = newname;
}
};
}());
person.setName("John");
person.getName(); //"John"
这个例子中创建了一个匿名函数表达式，这个函数表达式中包含了模块自身的私有变量和函数；这个函数表达式的执行结果返回一个对象，对象中包含了模块暴露给使用者的公共接口。代码模块化的具体形式还有很多，例如在一些常用的JavaScript库中通常都会使用类似下面例子的立即执行函数：
(function(){
var _name = "";
var root = this;
var person = {
getName: function(){
return _name;
},
setName: function(newname){
_name = newname;
}
};
root.person = person;
}.call(this));
person.setName("John");
person.getName(); //"John"
这种方式直接将包含模块公共接口的对象作为全局对象的一个属性，这样在其它地方直接可以使用全局对象的这个属性来使用这个模块了。
以上这篇老生常谈JavaScript 函数表达式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
小程序可以通过微信官方提供的登录方法方便地获取微信提供的用户身份标识,进而开发者可以进行下一步操作,下面这篇文章主要给大家介绍了关于微信小程序开发之获取用户信息的两种方法,需要的朋友可以参考下2022-03-03
数组元素的增删是JavaScript的一个特点,因为其他很多编程语言的数组是不允许增加或者删除元素的,本文给大家介绍了JavaScript实现数组元素增减的方法示例,文中有相关的代码示例供大家参考,需要的朋友可以参考下2024-07-07
以下是用JS写的判断搜索引擎来路并屏蔽PC跳转的代码,需要的朋友可以参考下2023-12-12
这篇文章为大家详细主要介绍了js实现金山打字通小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
下面小编就为大家带来一篇网页前端登录js按Enter回车键实现登陆的两种方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
在日常开发中，后端主要提供数据以及处理业务逻辑，前端主要提供页面布局以及数据展示。本文主要介绍如何实现一个简单获取IP归属地的小程序，感兴趣的可以了解一下2022-09-09
这篇文章主要为大家详细介绍了js实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
今天小编就为大家分享一篇关于解决微信小程序中转换时间格式IOS不兼容的问题，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-02-02
这篇文章主要为大家详细介绍了微信小程序页面滑动屏幕加载数据效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
layui封装的左侧菜单是固定宽度的,且左侧菜单栏在css里改变宽度,效果并不是很好（还设计头部菜单栏）,如果写js来让菜单栏能够拉伸,也比较麻烦,那怎么最简单的,让用户看到菜单的文字呢,下面给大家分享layui左侧菜单栏鼠标悬停显示菜单文字功能实现,感兴趣的朋友一起看看吧2024-06-06
最新评论