ES6+ 語法與設計模式

ES5 vs ES6+

var / let / const 比較

為什麼不要用 var？

1. 沒有區塊作用域（block scope）

使用 var 宣告的變數不會限制在區塊範圍內，容易造成變數污染：

if (true) {
  var name = "Lan";
}
console.log(name); // "Lan"

2. 存在「變數提升」（Hoisting）

變數會被提升至作用域頂端，但不包含賦值，容易誤會為可用：

console.log(score); // undefined
var score = 100;

改用 let  /  const 的好處

if (true) {
  let username = "Lan";
  const age = 25;
}

console.log(username); // ReferenceError

補充：那為什麼有時還是看到 var？

• 出現在舊教學或歷史專案中
• 舊瀏覽器或不支援 ES6 的執行環境
• 開發者個人習慣（不建議）

實戰建議

常見設計模式範例

 單例模式（Singleton Pattern）

class Singleton {
  static instance: Singleton
  private constructor() {}

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton()
    }
    return Singleton.instance
  }
}

const a = Singleton.getInstance()
const b = Singleton.getInstance()
console.log(a === b) // true

 工廠模式（Factory Pattern）

function createUser(type: string) {
  if (type === 'admin') return { role: 'admin', permission: 'all' }
  return { role: 'user', permission: 'read' }
}

const admin = createUser('admin')
const user = createUser('user')

 觀察者模式（Observer Pattern）

class Subject {
  observers: Function[] = []

  subscribe(fn: Function) {
    this.observers.push(fn)
  }

  notify(data: any) {
    this.observers.forEach(fn => fn(data))
  }
}

const subject = new Subject()
subject.subscribe(data => console.log('Received:', data))
subject.notify('Hello')