JavaScript学习_基础_10_函数补充知识（匿名函数自调用、函数实参伪数组Arguments、回调函数）

最新推荐文章于 2022-07-06 15:24:12 发布

学迁

最新推荐文章于 2022-07-06 15:24:12 发布

阅读量268

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/jiang1126/article/details/120606559

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、IIFE / 匿名函数自调用 / 立即执行函数表达式

匿名函数

function(){};

如上述代码所示，这就是一个匿名函数，本质是一个没有名字的函数表达式。

如果我们这么定义一个函数，那么这个匿名函数是没办法调用的，也就是说语法虽然正确，但是没什么用。

匿名函数自调用

(function(形参)
{

})(实参);

像现在这种写法，就是我们的匿名函数自调用。

它的特点是： 定义的时候就顺便调用了，不会发生预解析。而且匿名函数自调用只能执行一次。

我们通常使用匿名函数自调用做这些事：

封装代码实现，不把代码暴露出去。
可以防止外部的命名空间被污染而造成的函数功能偏差。
通常用来做一些项目的初始化。

小例子：

(function(a)
{
    if(a==5)
    {
        console.log('a是：'+a)
    }
})(5);

//a是：5

二、Arguments-函数实参伪数组

引例一：

var a = 10;
var b = 5;
function add()
{
      console.log(arguments);
}
add(a,b);

结果为 10 , 5。 (以数组形式展现，见下图)

在上述代码中，我们看到最终结果是以数组形式返回了函数add的实参。（传给add函数的两个变量的值）

引例二：

var a = 10;
var b = 5;
function add(a,b)
{
    console.log(arguments); // 10 , 5（以数组形式展现）
    return a + b;
}
console.log(add(a,b)); // 15

引例三：

var a = 10;
var b = 5;
function add()
{
    //console.log(arguments);
    return arguments[0] + arguments[1];
}
console.log(add(a,b));
// 15

不难发现，引例二与引例三都完成了对a、b两个变量的相加操作，唯一不同的是，引例三中的add函数没有形参。

所以我们就引出了函数实参伪数组(Arguments)的概念：

在每个函数当中，都会有一个实参的伪数组，这个东西是专门用来存储函数调用传过来的实参，即使你的函数定义当中没有形参，这个arguments当中也会存储你的实参。因此在JS当中可以这么说——形参可有可无，没有形参和实参必须相同数量对应的规则。

var a = 10;
var b = 5;
function add(a,b,c,d,e)
{
    console.log(arguments);
}
console.log(add(a,b));

我们可以看到，实参数量是2个，形参数量是5个，实参与形参数量并不相等，但程序也依旧可以运行，并不报错。

通常情况下我们可以根据这个arguments伪数组的长度去让一个函数表现出不同的功能，函数定义当中肯定是一个if else判断。

小例子：根据实参长度，让函数有不同的功能

如果传入了2个参数，则函数用来求差。
如果传入了3个参数，则函数用来求参数的和。

var a = 10;
var b = 11;
var c = 12;

function addOrBad(a,b,c)
{
	if(arguments.length == 2)
	{
		return a - b;
	}
	else if(arguments.length == 3)
	{
		return a + b + c;
	}
}

console.log(addOrBad(a,b,c)); // 33
console.log(addOrBad(a,b));   // -1

三、回调函数

如果一个函数被当作参数传给另外一个函数，那么这个函数就被称作回调函数。虽然概念是这么定义的，但是真正的回调函数还要符合下面三个特点。如果不符合，我们不能称作是真正回调。

三个特点：

函数是我程序员定义的 ~
我程序员没有调用 ~
最终却执行了 ~

举个例子：

function callback(num1,num2)
{
    console.log(num1+num2);
}

function f1(num1,num2,callback)
{
    //callback在这里其实就是回调函数
    callback(num1,num2);
}


f1(1,2,callback)  // 3