箭头函数 vs 普通函数

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;  // 隐式返回

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    // 这里的 this 指向全局对象（或undefined）
    this.age++;  // 错误！this.age 为 undefined
  }, 1000);
}

function Person() {
  this.age = 0;

  setInterval(() => {
    // 箭头函数没有自己的 this，继承外层作用域的 this
    this.age++;  // 正确！this 指向 Person 实例
  }, 1000);
}

// 普通函数可以作为构造函数
function Person(name) {
  this.name = name;
}
const p = new Person('张三');  // 正确

// 箭头函数不能作为构造函数
const Person = (name) => {
  this.name = name;
};
const p = new Person('张三');  // 报错：Person is not a constructor

// 普通函数有 arguments 对象
function sum() {
  console.log(arguments);  // [1, 2, 3]
}
sum(1, 2, 3);

// 箭头函数没有自己的 arguments 对象
const sum = () => {
  console.log(arguments);  // 报错或指向外层 arguments
};

// 替代方案：使用剩余参数
const sum = (...args) => {
  console.log(args);  // [1, 2, 3]
};

function regularFunc() {}
console.log(regularFunc.prototype);  // {constructor: ƒ}

const arrowFunc = () => {};
console.log(arrowFunc.prototype);    // undefined

// 普通函数允许
function foo(a, a) {  // 严格模式下会报错
  console.log(a);
}

// 箭头函数不允许
const foo = (a, a) => {  // 语法错误
  console.log(a);
};

const obj = {
  // 普通函数作为方法
  regularMethod: function() {
    // this 指向 obj
  },

  // ES6 方法简写
  shorthandMethod() {
    // this 指向 obj
  },

  // 箭头函数作为方法（不推荐）
  arrowMethod: () => {
    // this 不指向 obj，而是外层作用域
  }
};

// 适合的场景
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

// 保持 this 一致
class Button {
  constructor() {
    this.clicked = false;
    this.element = document.createElement('button');

    // 使用箭头函数确保 this 指向 Button 实例
    this.element.addEventListener('click', () => {
      this.clicked = true;  // 正确访问实例属性
    });
  }
}

// 适合的场景
function MyClass() {
  // 构造函数
}

const obj = {
  name: '对象',
  greet() {
    // 作为对象方法
    console.log(`Hello from ${this.name}`);
  }
};