JavaScript函数表达式详解及实例


Posted in Javascript onMay 05, 2017

JavaScript函数表达式

一、序

      定义函数的方式有两种:一种是函数声明,另一种就是函数表达式;

      1.1 函数声明

function functionName(arg){
   //函数体
}

      关于函数声明,它有一个重要特征就是函数声明提升,意思就是在执行代码之前会先读取函数声明。这就意味着可以把函数放在调用它的语句后面。如下所示:

helloworld(); //在代码执行之前会先读取函数声明
function helloworld(){
  console.log("hello world");
}

     1.2 函数表达式

var functionName=function(arg){
   //函数体
}

      这种形式看起来好像是常规的变量赋值语句,即创建一个函数并将它赋值给变量functionName。这种情况下创建的函数叫做匿名函数。因为function关键字后面没有标识符。

函数表达式与其他表达式一样,在使用之前必须先赋值;如下面代码就会导致错误;

helloworld(); //错误,还未赋值,函数不存在

var helloworld=function(){
  console.log("hello world");
}

       有了函数表达式,我们就可以动态给函数表达式赋值了;如下面代码:

var helloworld; //声明
if(condition){ //条件
  helloworld=function(){ //赋值
    console.log("hello world"); 
  }
}
else{
  helloworld=function(){ //赋值
    console.log("你好,世界");
  }
}

二、递归函数

     递归函数是在一个函数通过名字调用自身的情况下构成的(和C#等语言一样,所以程序的核心思想是差不多,只是在语法上有些差异,学好一门语言的基础,学习其他就会轻松很多),举个经典的递归面试题,一列数的规则如下 : 1 、 1 、 2 、 3 、 5 、 8 、 13 、 21 、 34…… 求第 30 位数是多少,  用递归算法实现,代码如下所示:

function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return foo(n - 1) + foo(n - 2);
    }

虽然这个函数表明看来没有什么问题,但下面的代码却可能导致它出错:

var foo1 = foo;
    foo = null;
    console.log(foo1(34));

以上代码先把foo()函数保存在变量foo1中,然后将foo变量设为null,结果指向原始函数的引用只剩下一个。但在接下来调用foo1()时,由于必须执行foo(),而foo已经为null了,所以就会导致错误;在这种情况下,使用arguments.callee可以解决这个问题。arguments.callee是一个指向正在执行的函数的指针,因此可以用它来实现对函数的递归调用

function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return arguments.callee(n - 1) + arguments.callee(n - 2);
    }

也可以使用命名函数表达式来达成相同的结果。例如:

var foo = (function f(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return f(n - 1) + f(n - 2);
    });

三、闭包

      3.1 闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见方式,就是在一个函数内部创建另一个函数。要理解闭包,首先必须理解JavaScript特殊变量的作用域。变量的作用域无非就是两种,全局变量和局部变量;接下来写几个demo来直观表达;

函数内部直接读取全局变量:

var n = 100; //定义一个全局变量
    function fn() {
      console.log(n); //函数内部直接读取全局变量
    }

    fn();

函数外部不能直接读取局部变量:

function fn() {
      var n = 100;
    }

    console.log(n); //n is not defined

在这里有个地方需要注意的是,在函数内部声明变量的时候,一定要用var ,如果没用,则会变成全局变量:

function fn() {
       n = 100;
    }
    fn();
    console.log(n); //100

有时候我们需要得到函数内部声明的变量,所以可以使用上面提到创建闭包的常用方式,在函数内部创建另一个函数:

function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      fn1();
    }
    fn(); //100

在上面的代码中,函数fn1就被包括在函数fn内部,这时fm内部的所有局部变量,对fn1都是可见的。但是反过来就不行,fn1内部的局部变量,对fn就是不可见的。这就是Javascript语言特有的"链式作用域"结构,子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

竟然fn1可以读取fn内部变量,那么只要把fn1作为返回值,这要我们就可以在外部读取fn的变量了

function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      return fn1;
    }
    
    var result=fn();
    result(); //100

在这里fn1就是闭包,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

       3.2  闭包的用途

       它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。如下面代码所示:

function fn() {
      n = 100;

      nadd = function () {
        n += 1;
      }

      function fn1() {
        console.log(n);
      }

      return fn1;
    }

    var result = fn();
    result(); //100
    nadd();
    result(); //101

注意:由于闭包函数会携带包含它的函数的作用域,因此会比其他函数占用更多的内存,过度使用闭包可能会导致内存占用过多,所以在退出函数之前,将不使用的局部变量全部删除。

 四、块级作用域

       块级作用域(又称为私有作用域)的匿名函数的语法如下所示:

(function(){
   //块级作用域
})();

无论在什么地方,只要临时需要一些变量,就可以使用私有作用域,比如:

(function () {
      var now = new Date();
      if (now.getMonth() == 0 && now.getDate() == 1) {
        alert("新年快乐");
      }
    })();

把上面这段代码放到全局作用域中,如果到了1月1日就会弹出“新年快乐”的祝福;这种技术经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数。一般来说,我们都应该尽量少向全局作用域中添加变量和函数。在一个由很多开发人员共同参与的大型应用程序中,过多的全局变量和函数很容易导致命名冲突。而通过创建私用作用域,每个开发人员既可以使用自己的变量,又不必担心搞乱全局作用域。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
Node.js中的http请求客户端示例(request client)
May 04 #Javascript
Bootstrap布局之栅格系统学习笔记
May 04 #Javascript
vue.js开发环境搭建教程
May 04 #Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
详解webpack es6 to es5支持配置
May 04 #Javascript
angular 基于ng-messages的表单验证实例
May 04 #Javascript
JS实现标签页切换效果
May 04 #Javascript
You might like
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python生成数字图片代码分享
2017/10/31 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python logging模块的使用总结
2019/07/09 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
研究生自荐信
2013/10/09 职场文书
医学专业毕业生个人的求职信
2013/12/04 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年派出所工作总结
2015/04/24 职场文书
学习委员竞选稿
2015/11/20 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
OpenCV-Python实现油画效果的实例
2021/06/08 Python