深入理解JavaScript系列（15） 函数（Functions）

深入理解JavaScript系列（15） 函数（Functions）攻略

什么是函数？

函数是一段可复用的程序代码，用于执行特定的任务或计算。在JavaScript中，函数通常用于封装可重用的代码逻辑、数据处理或事件处理等。

函数的定义

在JavaScript中，函数有多种定义方式，下面是其中的三种常见方式：

函数声明

函数声明是一种直接定义函数的方式，它可以在任何位置进行定义并在任何位置进行调用，示例如下：

function add(a, b) {
    return a + b;
}

函数表达式

函数表达式是将函数定义为一个表达式，通常会将函数定义为一个变量，并在需要使用时调用它，示例如下：

var add = function(a, b) {
    return a + b;
};

Function构造函数

Function构造函数是使用内置的Function构造函数来定义函数的一种方法。该方法通过传递函数参数和函数体来创建一个新函数，示例如下：

var add = new Function('a', 'b', 'return a + b;');

函数的参数

函数的参数定义了函数在被调用时可以接受的输入数据。JavaScript中的函数参数可以分为两种类型：形式参数和实际参数。

形式参数

形式参数是用于声明函数参数的标识符，在函数定义中通过括号中的参数名称来声明。例如：

function add(a, b) {
    return a + b;
}

上述代码中，a和b就是形式参数。

实际参数

实际参数是在函数调用时传递给函数的参数值。实际参数可以是任何JavaScript表达式，并且可以通过函数调用操作符传递给函数。例如：

var result = add(1, 2);

上述代码中，1和2就是实际参数。

函数的返回值

函数的返回值是函数执行后返回给调用者的结果值。在JavaScript中，函数可以通过return语句返回不同的返回值。在函数中，可以使用return语句来返回一个值，示例如下：

function add(a, b) {
    return a + b;
}

函数的作用域

函数有变量作用域和函数作用域两个作用域。函数作用域是指函数体中声明的变量和函数在函数范围内有效，而变量作用域是指在定义变量的区域内有效。

变量作用域

在定义函数中可以使用的变量称为局部变量，而在函数之外使用的变量称为全局变量。在JavaScript中，使用var关键字来声明变量的作用域，示例如下：

var globalVar = 0;

function add(a, b) {
    var sum = a + b;
    globalVar++;
    console.log(globalVar);
    return sum;
}

函数作用域

在函数作用域内定义的变量，只能被函数体内的代码访问到。如果在函数调用结束后，函数作用域内声明的变量将被销毁，示例如下：

function add(a, b) {
    var sum = a + b;
    var diff = a - b;

    function multiply() {
        var product = a * b;
        console.log(product);
    }

    multiply();

    return sum + diff;
}

var result = add(2, 3); // 输出6

上述代码中，multiply函数是在add函数的作用域内定义的，只能被add函数内的代码访问。

函数的调用方式

在JavaScript中，函数调用可以使用四种方式：函数调用操作符、方法调用、apply()方法和call()方法。

函数调用操作符

函数调用操作符是一种用于调用函数的标准语法，示例如下：

function add(a, b) {
    return a + b;
}

var result = add(1, 2);

方法调用

方法调用是指使用对象方法来调用函数的方式。示例如下：

var obj = {
    add: function(a, b) {
        return a + b;
    }
};

var result = obj.add(1, 2);

apply()方法

apply()方法是一种可以用来改变函数执行上下文的方法，示例如下：

function add(a, b) {
    return a + b;
}

var result = add.apply(null, [1, 2]);

call()方法

call()方法也是一种可以用来改变函数执行上下文的方法，示例如下：

function add(a, b) {
    return a + b;
}

var result = add.call(null, 1, 2);

函数的示例

下面给出两种常用的函数示例。

立即执行函数表达式

立即执行函数表达式（IIFE）是一种常见的用于封装全局变量的方式。示例如下：

(function() {
    var count = 0;

    function increase() {
        count++;
        console.log(count);
    }

    increase();
})();

上述代码中，count变量是通过函数作用域封装的局部变量，将不会对全局变量产生影响。

高阶函数

高阶函数是指将函数作为参数或返回值的函数。示例如下：

var arr = [1, 2, 3, 4, 5];

function map(arr, callback) {
    var result = [];

    for (var i = 0; i < arr.length; i++) {
        result.push(callback(arr[i]));
    }

    return result;
}

var squares = map(arr, function(item) {
    return item * item;
}); // 输出[1, 4, 9, 16, 25]

上述代码中，map函数将一个数组和一个函数作为参数，并通过遍历数组并调用传递的回调函数来生成新的数组。