浅析JavaScript中的特殊函数及用法小结

 更新时间:2022年6月29日 13:39  点击:604 作者:一碗周

写在前面

JavaScript中的函数本质上是一个对象,我们可以将这个对象赋值给一个变量,这就使JavaScript中的函数变得非常的灵活,现在就来浅看一下JavaScript中函数的一些用法。

 匿名函数

JavaScript 可以将函数作为数据使用。作为函数本体,它与普通的数据一样,不一定有名字。没有名字的函数被称之为匿名函数。

示例代码如下:

//匿名函数
 function(){               //匿名函数,会报错
     return '一碗周'; 
}

但是在 JavaScript 并不支持匿名函数的语法,不过匿名函数有两个应用,如下所示:

  • 回调函数:将一个函数作为另一个函数的参数使用,作为参数的函数

  • 自调函数:函数调用自身(定义即调用的函数)

回调函数

然函数与任何可以被赋值给变量的数据是相同的,那么它当然可以像其他数据那样被定义、删除、拷贝,以及当成参数传递给其他函数。

当一个函数作为参数传递给另一个函数时,作为参数的函数被称之为回调函数。作为使用回调函数的函数称为目标函数(外层函数)

示例代码如下所示

// 定义一个函数,这个函数有两个函数类型的参数,然后分别执行那两个函数,并返回它们的和。
function sum(a, b) { // -> 目标函数
  return a() + b()
}
function one() { // -> 回调函数
  return 1;
}
function two() { // -> 回调函数
  return 2;
}
console.log(sum(one, two)); // 3

执行流程如下:

当执行 sum 函数时,传入两个实参,在 sum 函数中,会将两个实参作为函数执行,并将返回值计算并返回。

匿名回调函数

所谓匿名回调函数,就是目标函数中的参数是没有名称的函数,将上一段代码修改为使用匿名回调函数

// 定义一个函数,这个函数有两个函数类型的参数,然后分别执行那两个函数,并返回它们的和。
function sum(a, b) { // -> 目标函数
  return a() + b()
}
console.log(sum(
  function () { // -> 匿名回调函数
    return 1
  },
  function () { // -> 匿名回调函数
    return 2
  })); // 3

带参数的回调函数

function multiplyByTwo(a, b, c, callbakc) {
  var i, ar = []
  for (i = 0; i < 3; i++) {
    // 通过 arguments 对象将传入的参数 * 2,然后传入回调函数进行操作
    ar[i] = callbakc(arguments[i] * 2);
  }
  return ar;
}
console.log(multiplyByTwo(1, 2, 3,
  function (a) { // 匿名回调函数
    return a + 2
  }));

回调函数的优点:

  • 匿名回调函数节省了全局命名空间

  • 将私有的数据内容开放给指定位置使用

  • 保证封装性 - 虽然可以使用私有数据,但是并不知道来源

  • 有助于提升性能

但是回调函数也是有缺点的,当目标函数的参数是一个回调函数时,回调函数的参数又是另一个回调函数,另一个回调函数的参数还是一个回调函数…也就是套娃,也就形成了回调陷阱或称回调地狱

自调函数

目前我们已经讨论了匿名函数在回调方面的应用。接下来我们讨论另外一种情况,即自调函数,这种函数可以在定义后立即调用。示例代码如下所示

(
  function () {
    console.log("自调函数");
  }
)()

这种语法看上去有点唬人,其实没有什么,我们只需将匿名函数的定义放进一对括号中,然后外面再紧跟一对括号即可。

语法结构如下图所示

值得注意的是,自调函数可以命名,但是还是会自调用,如果用函数名调用的话会抛出异常

自调函数除了以上两种方式外,还有以下几种不常用的方式

+ function (v) { // 形参
  var w = 100; // 局部变量
  console.log("自调函数" + v);
}(1);// 实参

! function (v) {
  var w = 100; // 局部变量
  console.log("自调函数" + v);
}(2);

~ function (v) {
  var w = 100; // 局部变量
  console.log("自调函数" + v);
}(3);

使用即时自调匿名函数的好处是不会产生任何全局变量。

缺点在于这样的函数是无法重复执行的(除非将它放在某个循环或其他函数中)。这也使得即时函数非常适合于执行一些一次性的或初始化的任务。

作为值的函数

将一个函数作为另一个函数的结果并返回,作为结果返回的函数称之为作为值的函数

示例代码如下:

function outer() {
  var v = 100;
  // 在函数的函数体中定义另一个函数 -> 内部(私有)函数
  return function () { // 使用匿名函数
    return v * 2
  }
}
var result = outer();
console.log(result); // [Function]
// 或者下面这种方式与上面那种方式相同
function outer1() {
  var v = 100;
  // 在函数的函数体中定义另一个函数 -> 内部(私有)函数
  function inner() {
    return v * 2
  }
  return inner
}
var result1 = outer1();
console.log(result1); // [Function: inner]

这样做的好处是:

  • 有助于我们确保全局名字空间的纯净性(这意味着命名冲突的机会很小)。

  • 确保私有性 — 这使我们可以选择只将一些必要的函数暴露给“外部世界”,而保留属于自己的函数,使它们不为该应用程序的其他部分所用。

到此这篇关于JavaScript中的特殊函数的文章就介绍到这了,更多相关js特殊函数内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

原文出处:https://juejin.cn/post/7114310739346587661

[!--infotagslink--]

相关文章

  • php正确禁用eval函数与误区介绍

    eval函数在php中是一个函数并不是系统组件函数,我们在php.ini中的disable_functions是无法禁止它的,因这他不是一个php_function哦。 eval()针对php安全来说具有很...2016-11-25
  • php中eval()函数操作数组的方法

    在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
  • Python astype(np.float)函数使用方法解析

    这篇文章主要介绍了Python astype(np.float)函数使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-08
  • Python中的imread()函数用法说明

    这篇文章主要介绍了Python中的imread()函数用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-16
  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
  • C# 中如何取绝对值函数

    本文主要介绍了C# 中取绝对值的函数。具有很好的参考价值。下面跟着小编一起来看下吧...2020-06-25
  • C#学习笔记- 随机函数Random()的用法详解

    下面小编就为大家带来一篇C#学习笔记- 随机函数Random()的用法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
  • C#中using的三种用法

    using 指令有两个用途: 允许在命名空间中使用类型,以便您不必限定在该命名空间中使用的类型。 为命名空间创建别名。 using 关键字还用来创建 using 语句 定义一个范围,将在此...2020-06-25
  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
  • 金额阿拉伯数字转换为中文的自定义函数

    CREATE FUNCTION ChangeBigSmall (@ChangeMoney money) RETURNS VarChar(100) AS BEGIN Declare @String1 char(20) Declare @String2 char...2016-11-25
  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
  • 详解前端安全之JavaScript防http劫持与XSS

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
  • Android开发中findViewById()函数用法与简化

    findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20
  • C++中 Sort函数详细解析

    这篇文章主要介绍了C++中Sort函数详细解析,sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变...2022-08-18
  • PHP用strstr()函数阻止垃圾评论(通过判断a标记)

    strstr() 函数搜索一个字符串在另一个字符串中的第一次出现。该函数返回字符串的其余部分(从匹配点)。如果未找到所搜索的字符串,则返回 false。语法:strstr(string,search)参数string,必需。规定被搜索的字符串。 参数sea...2013-10-04
  • js+css实现回到顶部按钮(back to top)

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
  • JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
  • PHP函数分享之curl方式取得数据、模拟登陆、POST数据

    废话不多说直接上代码复制代码 代码如下:/********************** curl 系列 ***********************///直接通过curl方式取得数据(包含POST、HEADER等)/* * $url: 如果非数组,则为http;如是数组,则为https * $header:...2014-06-07
  • php中的foreach函数的2种用法

    Foreach 函数(PHP4/PHP5)foreach 语法结构提供了遍历数组的简单方式。foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信息。...2013-09-28