var functionName = function() {} vs function functionName() {}

技术背景

在 JavaScript 中，有两种常见的定义函数的方式：函数表达式（var functionName = function() {}）和函数声明（function functionName() {}）。虽然它们都能创建函数，但在行为和使用场景上存在一些差异。了解这些差异对于编写高质量、可维护的 JavaScript 代码至关重要。

实现步骤

函数声明

函数声明使用 function 关键字直接定义函数，其语法如下：

function functionName() {
    // 函数体
}

函数声明的特点是会被提升（hoisted），即可以在函数声明之前调用该函数。例如：

// 可以在函数声明之前调用
functionName(); 

function functionName() {
    console.log('Hello from function declaration!');
}

函数表达式

函数表达式是将一个函数赋值给一个变量，其语法如下：

var functionName = function() {
    // 函数体
};

函数表达式不会被提升，必须在赋值之后才能调用。例如：

// 这里调用会报错，因为函数还未赋值
// functionName(); 

var functionName = function() {
    console.log('Hello from function expression!');
};

// 可以在赋值之后调用
functionName(); 

核心代码

函数声明示例

// 可以在声明前调用
sayHello(); 

function sayHello() {
    console.log('Hello!');
}

函数表达式示例

// 这里调用会报错
// greet(); 

var greet = function() {
    console.log('Greetings!');
};

// 可以在赋值后调用
greet(); 

最佳实践

使用函数声明

• 当需要在函数定义之前调用函数时，使用函数声明。
• 对于公共函数或全局函数，函数声明可以提高代码的可读性和可维护性。

使用函数表达式

• 当需要将函数作为参数传递给其他函数时，函数表达式更合适。

function doSomething(callback) {
    callback();
}

var myFunction = function() {
    console.log('Function passed as callback');
};

doSomething(myFunction);

• 用于创建私有函数，避免全局命名冲突。

(function() {
    var privateFunction = function() {
        console.log('This is a private function');
    };

    privateFunction();
})();

常见问题

函数提升问题

函数声明会被提升到当前作用域的顶部，可以在声明之前调用；而函数表达式不会被提升，在赋值之前调用会报错。

命名问题

函数声明的函数名是固定的，而函数表达式可以是匿名的，也可以有一个可选的名称。匿名函数在调试时可能会比较困难，因为在调用栈中看不到函数名。

作用域问题

函数声明的作用域是整个函数或全局作用域，而函数表达式的作用域取决于变量的作用域。在块级作用域中，函数声明和函数表达式的行为可能会有所不同，尤其是在严格模式下。例如：

'use strict';
if (true) {
    // 严格模式下，函数声明在块级作用域内
    function blockFunction() {
        console.log('Inside block function');
    }
    blockFunction();
}
// 这里调用会报错，因为 blockFunction 只在块级作用域内有效
// blockFunction(); 

var blockExpression = function() {
    console.log('Inside block expression');
};
blockExpression();