js箭头函数 vs 普通函数

1.语法

• 普通函数

  function() {
    // code
  }

• 箭头函数

  () => {
    // code
  }

2.this 绑定

• 普通函数：this 的值由调用位置决定。
• 箭头函数：this 由定义位置决定，继承自外层作用域。

this 绑定的区别

普通函数

在普通函数中，this 的值取决于函数的调用方式。比如在事件监听器中：

this.map.on('moveend', function() {
    console.log(this); // `this` 在这里指向触发事件的对象，而不是外部的 `this`
});

在上面的例子中，this 可能指向的是事件触发对象，而不是我们期望的外部上下文（例如组件实例）。

箭头函数

箭头函数没有自己的 this，它会继承外层作用域的 this 值：

this.map.on('moveend', () => {
    console.log(this); // `this` 在这里指向外部的 `this`
});

在这个例子中，箭头函数中的 this 是从外部作用域继承的。因此，它指向的是外部的 this（例如组件实例），而不是事件触发对象。

总结

• 普通函数 (function() { ... }): this 的值由调用位置决定，适合不需要访问外部 this 的情况。
• 箭头函数 (() => { ... }): this 由定义位置决定，继承自外层作用域，适合需要访问外部 this 的情况。