详解 JavaScript 中用 const 和 function 定义函数的区别

这是一个经典的问题，涉及到JavaScript中const声明函数和直接使用function声明函数之间的区别。在大多数情况下，这两种方式都可以正常工作，但它们确实有一些微妙的差异和各自的优缺点。

我们先来看看两者的基本形式：

1. const声明的函数：

const myFunction = function() {
  console.log('Hello World');
};

或者使用箭头函数：

const myFunction = () => {
  console.log('Hello World');
};

2. function声明的函数：

function myFunction() {
  console.log('Hello World');
}

主要区别
1. 作用域提升（Hoisting）
这是两者最主要的区别之一。
function声明： 函数声明是**会被提升（hoisted）**的。这意味着你可以在声明函数之前调用它，编译器会在执行代码之前把函数声明移动到作用域的顶部。
示例：

myFunction(); // 输出 'Hello World'
 
function myFunction() {
  console.log('Hello World');
}
// 在这个例子中，尽管myFunction()是在函数声明之前调用的，但由于提升，这段代码仍然能正常工作。

const声明： 使用const（或者let）声明的函数不会提升。实际上，这种函数声明会被视为变量声明，而变量声明只会被“声明”提升，但赋值部分并不会提升。因此，在赋值完成之前使用这个函数会导致ReferenceError。
示例：

myFunction(); // ReferenceError: Cannot access 'myFunction' before initialization
 
const myFunction = function() {
  console.log('Hello World');
};

2. 是否可以重新赋值
function声明： 使用function声明的函数可以在同一作用域内被重新定义。虽然这种做法并不常见，但在一些特定情况下可能发生。

function myFunction() {
  console.log('First function');
}
 
function myFunction() {
  console.log('Second function');
}
 
myFunction(); // 输出 'Second function'

//在这个例子中，第二个函数声明覆盖了第一个。
const声明： 使用const声明的函数是不可重新赋值的。你不能再次给它赋值，否则会引发TypeError。

const myFunction = function() {
  console.log('First function');
};
 
myFunction = function() {
  console.log('Second function');
}; // TypeError: Assignment to constant variable.

3. 箭头函数 vs 传统函数
在使用const时，你可以选择使用箭头函数（=>）来声明函数，而function声明只能使用传统的函数语法。

箭头函数的this绑定： 箭头函数中的this是词法绑定的，意思是this取决于函数定义时所在的上下文环境，而不是调用时。

const obj = {
  name: 'Object',
  traditionalFunction: function() {
    console.log(this.name); // 'Object'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined，箭头函数的 this 绑定到定义时的上下文
  }
};
 
obj.traditionalFunction(); // 输出 'Object'
obj.arrowFunction(); // 输出 undefined
// 这里，箭头函数的this指向的是其定义时的上下文，而不是调用时的obj。

4. 代码风格和意图
function声明： 函数声明通常用于定义独立的函数逻辑。它清晰地表明这是一个函数，而不是变量赋值的结果。
const声明： 使用const声明函数通常表明这是一个不能重新赋值的函数表达式，在某些情况下，这可以防止意外重写变量。此外，const还能更明确地告诉读者这个函数不会被重新赋值，从而提高代码的可读性和安全性。