const func = ()=> {}和function func(){}的区别, 它们哪个使用得多?_文章_web技术 - 浪九三 - const func = ()=> {}和function func(){}的区别, 它们哪个使用得多? - web技术

const func = () => {} 和 function func() {} 都是定义函数的方式，但它们有一些显著的区别，影响到它们的使用场景和频率。下面是它们的主要区别：

function func() {
  // 函数体
}

函数声明提升：函数声明会被提升（hoisted）到文件的顶部，因此可以在定义之前调用。

func(); // 这行代码是有效的，即使 `func` 函数声明出现在后面
function func() { console.log('Hello World'); }

this 绑定：在函数内部，this 关键字的指向是由调用者决定的，函数调用的上下文会影响 this 的值。
- 例如，如果在一个对象中调用函数，this 会指向该对象。
严格模式：函数声明默认处于非严格模式。
没有箭头函数的一些特性：function 声明会有一些不同的特性，比如 arguments 对象。

const func = () => {
  // 函数体
}

没有提升：箭头函数不会被提升。只有在赋值之后才能调用。

func(); // 会报错，因为函数未定义
const func = () => { console.log('Hello World'); };

this 绑定：箭头函数不会创建自己的 this，它会继承外部作用域的 this，因此在某些情况下，箭头函数能更方便地避免 this 指向的错误。
- 在事件处理、回调函数中，箭头函数尤其常见，它可以避免在回调中 this 指向问题。
简洁语法：箭头函数通常比传统函数更简洁，尤其是在单行表达式时。
```
const add = (a, b) => a + b; // 比 function add(a, b) { return a + b; } 更简洁
```
不能用作构造函数：箭头函数没有 prototype，因此不能用作构造函数。

箭头函数 (() => {}) 在现代 JavaScript（尤其是 Vue、React、Node.js 等框架/库中）中更常见，因为：
- 它提供了更简洁、易于理解的语法。
- 它解决了 this 绑定的问题，特别是在回调和事件处理函数中，避免了很多 this 指向错误。
- 箭头函数适合短小、简洁的函数，尤其是作为匿名函数传递。
例如：在 Vue 或 React 中，回调函数、事件监听器、map 或 filter 中的匿名函数通常使用箭头函数：
```
const items = [1, 2, 3];
items.map(item => item * 2);
```
函数声明 (function func() {}) 通常用于定义更为正式、具备函数名的函数，特别是在一些面向对象的 JavaScript 中、模块化代码中使用。
- 函数声明用于需要函数提升的场景，或当函数本身需要被调用和重用时。
例如：常见的面向对象编程中的方法，或者一些模块化的函数：
```
function greet(name) {
  console.log('Hello ' + name);
}
greet('Alice');
```

在现代 JavaScript 开发中，箭头函数的使用频率更高，但两者根据不同的需求和场景各有优劣，合理选择。

const func = ()=> {}和function func(){}的区别, 它们哪个使用得多?