广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript中函数表达式的示例分析
  • 797
分享到

JavaScript中函数表达式的示例分析

2024-04-02 19:04:59 797人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关javascript中函数表达式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript函数表达式一、序 &nb

这篇文章将为大家详细讲解有关javascript中函数表达式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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中函数表达式的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript中函数表达式的示例分析

本文链接: https://www.lsjlt.com/news/78073.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中函数表达式的示例分析
    这篇文章将为大家详细讲解有关JavaScript中函数表达式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript函数表达式一、序 &nb...
    99+
    2022-10-19
  • javascript立即执行函数表达式IIFE的示例分析
    这篇文章主要为大家展示了“javascript立即执行函数表达式IIFE的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript立即执行函数...
    99+
    2022-10-19
  • JavaScript正则表达式的示例分析
    这篇文章主要为大家展示了“JavaScript正则表达式的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript正则表达式的示例分析”这篇文...
    99+
    2022-10-19
  • Java8中Lambda表达式与函数式接口的示例分析
    这篇文章将为大家详细讲解有关Java8中Lambda表达式与函数式接口的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Java8被称作Java史上变化最大的一个版本。其中包含很多重要的新特性,最核...
    99+
    2023-05-30
    java lambda
  • Javascript常用正则表达式的示例分析
    小编给大家分享一下Javascript常用正则表达式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!模式修饰符的可选参数...
    99+
    2022-10-19
  • CSS中数学表达式calc()的示例分析
    这篇文章将为大家详细讲解有关CSS中数学表达式calc()的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。数学表达式calc()是CSS中的函数,主要用于数学运算...
    99+
    2022-10-19
  • javascript中正则表达式分组、断言的示例分析
    这篇文章主要为大家展示了“javascript中正则表达式分组、断言的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript中正则表达式分组...
    99+
    2022-10-19
  • JavaScript中Generator函数yield表达式示例详解
    以上就是JavaScript中Generator函数yield表达式示例详解的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-22
    javascript
  • Linq lambda表达式的示例分析
    小编给大家分享一下Linq lambda表达式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Linq lambda表达式了解过C# 3.0的新特性的话应...
    99+
    2023-06-17
  • shell中正则表达式的示例分析
    这篇文章给大家分享的是有关shell中正则表达式的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。正则表达式匹配中文字符的正则表达式:[u4e00-u9fa5]评注:匹配中...
    99+
    2022-10-19
  • C#中正则表达式的示例分析
    这篇文章将为大家详细讲解有关C#中正则表达式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。(1)“@”符号符下两ows表研究室的火热,当晨在“@”虽然并非C#正则表达式的“成员”,但是它经常与C...
    99+
    2023-06-18
  • Java中正则表达式的示例分析
    这篇文章主要介绍了Java中正则表达式的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现...
    99+
    2023-06-15
  • JavaScript函数式编程的示例分析
    这篇文章给大家分享的是有关JavaScript函数式编程的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。看过许多关于函数式编程的讲解,但是其中大部分是停留在理论层面,还有...
    99+
    2022-10-19
  • JavaScript函数式编程示例分析
    目录函数式编程函数柯理化(Curring)Compose场景案例总结函数式编程 1.函数式编程指的是函数的映射关系 2.vue3、react16.8的函数组件推动了前端函数编程 3....
    99+
    2022-11-13
    JavaScript函数式编程 JS函数式编程
  • JavaScript正则表达式校验与递归函数实际应用的示例分析
    小编给大家分享一下JavaScript正则表达式校验与递归函数实际应用的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • VB.NET正则表达式的示例分析
    小编给大家分享一下VB.NET正则表达式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.选择符 VB.NET正则表达式中“ &brvbar;”...
    99+
    2023-06-17
  • PHP8.0之Match表达式的示例分析
    小编给大家分享一下PHP8.0之Match表达式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!本文我们要说另一个新引入...
    99+
    2022-10-19
  • jmeter正则表达式的示例分析
    小编给大家分享一下jmeter正则表达式的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!使用jmeter时经常有这样的情况:一个完整的操作流程,需先完成某个操作,获得某个值或数据信息,然后才能进行下一步的操作(也就...
    99+
    2023-06-14
  • 正则表达式组的示例分析
    这篇文章主要为大家展示了“正则表达式组的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“正则表达式组的示例分析”这篇文章吧。正则表达式组的理解把正则表达式的一部分放在圆括号内,你可以将它们...
    99+
    2023-06-17
  • JavaScript函数的示例分析
    这篇文章给大家分享的是有关JavaScript函数的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。什么是函数函数是完成某一功能的代码段函数是可重复执行的代码段函数方便管理...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作