老生常谈JavaScript 函数表达式


Posted in Javascript onSeptember 01, 2016

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 函数表达式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 序列化对象实现代码
Dec 18 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 #Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 #Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 #Javascript
深入理解jQuery3.0的domManip函数
Sep 01 #Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 #Javascript
ES6记录异步函数的执行时间详解
Aug 31 #Javascript
基于angularjs实现图片放大镜效果
Aug 31 #Javascript
You might like
php打开文件fopen函数的使用说明
2013/07/05 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JS高级运动实例分析
2016/12/20 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python感知机实现代码
2019/01/18 Python
python实现的生成word文档功能示例
2019/08/23 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
pytorch中的inference使用实例
2020/02/20 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python 中Operator模块的使用
2021/01/30 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
给客户的道歉信
2014/01/13 职场文书
关于打架的检讨书
2014/01/17 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
宣传活动总结范文
2014/07/01 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
消费者投诉书范文
2015/07/02 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server