JS中创建函数的三种方式及区别

下面为您详细讲解JS中创建函数的三种方式及区别的完整攻略。

一、函数定义方式

函数定义是最常见的创建函数的方式，语法如下：

function functionName(param1, param2, ...) {
    // 函数体
    return value;
}

该方式创建的函数可以被整个作用域访问到，包括其内部的变量和函数。下面是一个示例：

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

console.log(add(1, 2)); // 输出 3

二、函数表达式方式

函数表达式是指把函数赋值给变量或属性的值，语法如下：

let functionName = function(param1, param2, ...) {
    // 函数体
    return value;
};

该方式创建的函数只能在其定义之后使用到，其内部的变量和函数只能在函数内部访问到。下面是一个示例：

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

console.log(add(1, 2)); // 输出 3

三、Function构造函数方式

Function构造函数是指使用JavaScript内置的Function()构造函数创建函数，语法如下：

let functionName = new Function(param1, param2, ..., functionBody);

该方式创建的函数也只能在其定义之后使用到，其内部的变量和函数只能在函数内部访问到。下面是一个示例：

let add = new Function("a", "b", "return a + b");

console.log(add(1, 2)); // 输出 3

区别

这三种方式创建函数的区别如下：

• 函数定义和函数表达式是创建函数最常见的方式，它们都是直接定义函数体并给出一个名称。它们之间的区别在于函数定义支持函数提升，即函数在整个作用域都可用，而函数表达式必须等表达式定义完成后才能调用；

• Function构造函数是使用内置的Function构造函数来创建函数对象，它的创建方式和其他对象的创建方式类似。由于Function构造函数创建的是一个全新的函数对象，因此每次调用它都会在内存中创建一个新的对象。由于这种方式是使用字符串形式传递函数体的，因此在JavaScript编译的时候会将传递的字符串编译成优化后的代码，从而可以提高代码的性能。但使用字符串形式传递函数体也使得代码的可读性变得较差，因此通常不建议使用它来创建函数。

上面的示例中，我们使用了三种方式分别创建了一个名为add的函数并调用它。其中，函数定义方式和函数表达式方式都创建了一个普通的函数对象，而Function构造函数方式创建的是一个新的Function对象。