深度解析JavaScript箭头函数与普通函数两种工作方式

普通函数
├── 有独立的this
├── 可作为构造函数
├── 有arguments对象
└── 有prototype属性
箭头函数
├── 继承外层this
├── 不能作为构造函数
├── 没有arguments
└── 更简洁的语法

const employee = {
  name: 'Alice',
  regularFunction: function() {
    console.log(this.name); // this取决于调用方式
  }
};
employee.regularFunction(); // 'Alice' (this指向employee)
const standaloneFunc = employee.regularFunction;
standaloneFunc(); // undefined (严格模式)或window (非严格模式)

const company = {
  name: 'TechCorp',
  employees: ['Alice', 'Bob'],
  showEmployees: function() {
    // 箭头函数继承外围showEmployees的this
    this.employees.forEach(employee => {
      console.log(`${employee} works at ${this.name}`);
      // this正确指向company对象
    });
    // 对比普通函数
    this.employees.forEach(function(employee) {
      console.log(`${employee} works at ${this.name}`); 
      // this指向全局或undefined
    });
  }
};
company.showEmployees();

// 场景1: DOM事件处理
button.addEventListener('click', function() {
  console.log(this); // 指向button元素
});
button.addEventListener('click', () => {
  console.log(this); // 指向外围的this（通常不是我们想要的）
});
// 场景2: 定时器回调
const timer = {
  seconds: 0,
  start: function() {
    setInterval(function() {
      this.seconds++; // 错误！this指向全局
    }, 1000);
    setInterval(() => {
      this.seconds++; // 正确！this指向timer对象
    }, 1000);
  }
};

// 普通函数
const add = function(a, b) {
  return a + b;
};
// 箭头函数完整形式
const add = (a, b) => {
  return a + b;
};
// 箭头函数简写形式（单行返回可省略大括号和return）
const add = (a, b) => a + b;
// 单个参数可省略括号
const square = x => x * x;
// 无参数需要空括号
const sayHi = () => console.log('Hello');

// 返回对象字面量需要加括号
const createUser = (name, age) => ({ name, age });
// 等价于
const createUser = (name, age) => {
  return { name, age };
};
// 多行语句需要大括号
const complexCalc = (x, y) => {
  const sum = x + y;
  const product = x * y;
  return sum * product;
};

// 普通函数可作为构造函数
function Person(name) {
  this.name = name;
}
const alice = new Person('Alice'); // 有效
// 箭头函数不能作为构造函数
const Animal = (name) => {
  this.name = name; // 报错：箭头函数没有this
};
const dog = new Animal('Rex'); // TypeError: Animal is not a constructor

// 普通函数有arguments对象
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
sum(1, 2, 3); // 6
// 箭头函数没有arguments对象
const sumArrow = () => {
  console.log(arguments); // 报错：arguments未定义
};
// 替代方案：使用剩余参数
const sumArrow = (...args) => {
  return args.reduce((acc, num) => acc + num, 0);
};
sumArrow(1, 2, 3); // 6

// 普通函数有prototype属性
function Car() {}
console.log(Car.prototype); // 存在（用于构造函数）
// 箭头函数没有prototype属性
const Bike = () => {};
console.log(Bike.prototype); // undefined

普通函数调用时:
[函数执行] → 创建执行上下文 → 确定this值（动态）
箭头函数定义时:
[定义箭头函数] → 捕获外层词法环境的this → 固定不变

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Bob' };
function regularFunc() {
  console.log(this.name);
}
const arrowFunc = () => {
  console.log(this.name);
};
// 普通函数可以改变this
regularFunc.call(obj1); // Alice
regularFunc.call(obj2); // Bob
// 箭头函数的this始终不变（继承定义时的this）
arrowFunc.call(obj1); // 取决于定义环境
arrowFunc.call(obj2); // 同上

class Counter {
  constructor() {
    this.count = 0;
    // 箭头函数作为类字段（固定this）
    this.increment = () => {
      this.count++;
    };
  }
  // 普通方法（原型方法）
  decrement() {
    this.count--;
  }
  // 使用箭头函数作为回调
  startAutoIncrement() {
    setInterval(() => {
      this.increment();
      console.log(this.count);
    }, 1000);
  }
}
const counter = new Counter();
counter.startAutoIncrement();

// 陷阱1: 作为对象方法
const calculator = {
  value: 0,
  add: (x) => { this.value += x; } // 错误！this不会指向calculator
};
// 陷阱2: 在需要动态this的场景
document.querySelector('button').addEventListener('click', () => {
  console.log(this); // 不是指向button元素！
});
// 陷阱3: 过度简化的箭头函数
const complexLogic = x => x > 0 ? doSomething(x) : doSomethingElse(x); // 可读性差

// 类字段提案（Stage 3）
class Timer {
  seconds = 0; // 类字段
  // 使用箭头函数作为类字段方法（自动绑定this）
  start = () => {
    setInterval(() => {
      this.seconds++;
    }, 1000);
  };
}
// 对象方法简写
const obj = {
  // 普通方法（推荐）
  method1() { ... },
  // 箭头函数属性（不推荐）
  method2: () => { ... }
};

需要动态this吗？ → 是 → 使用普通函数
   ↓ 否
需要作为构造函数吗？ → 是 → 使用普通函数
   ↓ 否
需要arguments对象吗？ → 是 → 使用普通函数
   ↓ 否
使用箭头函数 🏹