普通函數(shù)
├── 有獨(dú)立的this
├── 可作為構(gòu)造函數(shù)
├── 有arguments對(duì)象
└── 有prototype屬性
箭頭函數(shù)
├── 繼承外層this
├── 不能作為構(gòu)造函數(shù)
├── 沒(méi)有arguments
└── 更簡(jiǎn)潔的語(yǔ)法

const employee = {
  name: 'Alice',
  regularFunction: function() {
    console.log(this.name); // this取決于調(diào)用方式
  }
};
employee.regularFunction(); // 'Alice' (this指向employee)
const standaloneFunc = employee.regularFunction;
standaloneFunc(); // undefined (嚴(yán)格模式)或window (非嚴(yán)格模式)

const company = {
  name: 'TechCorp',
  employees: ['Alice', 'Bob'],
  showEmployees: function() {
    // 箭頭函數(shù)繼承外圍showEmployees的this
    this.employees.forEach(employee => {
      console.log(`${employee} works at ${this.name}`);
      // this正確指向company對(duì)象
    });
    // 對(duì)比普通函數(shù)
    this.employees.forEach(function(employee) {
      console.log(`${employee} works at ${this.name}`); 
      // this指向全局或undefined
    });
  }
};
company.showEmployees();

// 場(chǎng)景1: DOM事件處理
button.addEventListener('click', function() {
  console.log(this); // 指向button元素
});
button.addEventListener('click', () => {
  console.log(this); // 指向外圍的this（通常不是我們想要的）
});
// 場(chǎng)景2: 定時(shí)器回調(diào)
const timer = {
  seconds: 0,
  start: function() {
    setInterval(function() {
      this.seconds++; // 錯(cuò)誤！this指向全局
    }, 1000);
    setInterval(() => {
      this.seconds++; // 正確！this指向timer對(duì)象
    }, 1000);
  }
};

// 普通函數(shù)
const add = function(a, b) {
  return a + b;
};
// 箭頭函數(shù)完整形式
const add = (a, b) => {
  return a + b;
};
// 箭頭函數(shù)簡(jiǎn)寫(xiě)形式（單行返回可省略大括號(hào)和return）
const add = (a, b) => a + b;
// 單個(gè)參數(shù)可省略括號(hào)
const square = x => x * x;
// 無(wú)參數(shù)需要空括號(hào)
const sayHi = () => console.log('Hello');

// 返回對(duì)象字面量需要加括號(hào)
const createUser = (name, age) => ({ name, age });
// 等價(jià)于
const createUser = (name, age) => {
  return { name, age };
};
// 多行語(yǔ)句需要大括號(hào)
const complexCalc = (x, y) => {
  const sum = x + y;
  const product = x * y;
  return sum * product;
};

// 普通函數(shù)可作為構(gòu)造函數(shù)
function Person(name) {
  this.name = name;
}
const alice = new Person('Alice'); // 有效
// 箭頭函數(shù)不能作為構(gòu)造函數(shù)
const Animal = (name) => {
  this.name = name; // 報(bào)錯(cuò)：箭頭函數(shù)沒(méi)有this
};
const dog = new Animal('Rex'); // TypeError: Animal is not a constructor

// 普通函數(shù)有arguments對(duì)象
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
sum(1, 2, 3); // 6
// 箭頭函數(shù)沒(méi)有arguments對(duì)象
const sumArrow = () => {
  console.log(arguments); // 報(bào)錯(cuò)：arguments未定義
};
// 替代方案：使用剩余參數(shù)
const sumArrow = (...args) => {
  return args.reduce((acc, num) => acc + num, 0);
};
sumArrow(1, 2, 3); // 6

// 普通函數(shù)有prototype屬性
function Car() {}
console.log(Car.prototype); // 存在（用于構(gòu)造函數(shù)）
// 箭頭函數(shù)沒(méi)有prototype屬性
const Bike = () => {};
console.log(Bike.prototype); // undefined

普通函數(shù)調(diào)用時(shí):
[函數(shù)執(zhí)行] → 創(chuàng)建執(zhí)行上下文 → 確定this值（動(dòng)態(tài)）
箭頭函數(shù)定義時(shí):
[定義箭頭函數(shù)] → 捕獲外層詞法環(huán)境的this → 固定不變

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Bob' };
function regularFunc() {
  console.log(this.name);
}
const arrowFunc = () => {
  console.log(this.name);
};
// 普通函數(shù)可以改變this
regularFunc.call(obj1); // Alice
regularFunc.call(obj2); // Bob
// 箭頭函數(shù)的this始終不變（繼承定義時(shí)的this）
arrowFunc.call(obj1); // 取決于定義環(huán)境
arrowFunc.call(obj2); // 同上

class Counter {
  constructor() {
    this.count = 0;
    // 箭頭函數(shù)作為類(lèi)字段（固定this）
    this.increment = () => {
      this.count++;
    };
  }
  // 普通方法（原型方法）
  decrement() {
    this.count--;
  }
  // 使用箭頭函數(shù)作為回調(diào)
  startAutoIncrement() {
    setInterval(() => {
      this.increment();
      console.log(this.count);
    }, 1000);
  }
}
const counter = new Counter();
counter.startAutoIncrement();

// 陷阱1: 作為對(duì)象方法
const calculator = {
  value: 0,
  add: (x) => { this.value += x; } // 錯(cuò)誤！this不會(huì)指向calculator
};
// 陷阱2: 在需要?jiǎng)討B(tài)this的場(chǎng)景
document.querySelector('button').addEventListener('click', () => {
  console.log(this); // 不是指向button元素！
});
// 陷阱3: 過(guò)度簡(jiǎn)化的箭頭函數(shù)
const complexLogic = x => x > 0 ? doSomething(x) : doSomethingElse(x); // 可讀性差

// 類(lèi)字段提案（Stage 3）
class Timer {
  seconds = 0; // 類(lèi)字段
  // 使用箭頭函數(shù)作為類(lèi)字段方法（自動(dòng)綁定this）
  start = () => {
    setInterval(() => {
      this.seconds++;
    }, 1000);
  };
}
// 對(duì)象方法簡(jiǎn)寫(xiě)
const obj = {
  // 普通方法（推薦）
  method1() { ... },
  // 箭頭函數(shù)屬性（不推薦）
  method2: () => { ... }
};

需要?jiǎng)討B(tài)this嗎？ → 是 → 使用普通函數(shù)
   ↓ 否
需要作為構(gòu)造函數(shù)嗎？ → 是 → 使用普通函數(shù)
   ↓ 否
需要arguments對(duì)象嗎？ → 是 → 使用普通函數(shù)
   ↓ 否
使用箭頭函數(shù) ??