// 全局作用域示例
var globalVar = '我是全局變量';
let globalLet = '我也是全局變量，但不會(huì)掛到window上';
const globalConst = '我是全局常量';

function checkGlobal() {
    console.log(globalVar);  // "我是全局變量"
    console.log(globalLet);  // "我也是全局變量，但不會(huì)掛到window上"
    console.log(window.globalVar);  // "我是全局變量" (var特有)
    console.log(window.globalLet);  // undefined (let不會(huì)掛載)
}

checkGlobal();

function functionScopeDemo() {
    var funcVar = '函數(shù)內(nèi)的var變量';
    let funcLet = '函數(shù)內(nèi)的let變量';
    
    if (true) {
        var innerVar = 'if塊內(nèi)的var變量';  // 實(shí)際上屬于函數(shù)作用域
        let innerLet = 'if塊內(nèi)的let變量';  // 屬于塊級(jí)作用域
    }
    
    console.log(funcVar);    // "函數(shù)內(nèi)的var變量"
    console.log(funcLet);    // "函數(shù)內(nèi)的let變量"
    console.log(innerVar);   // "if塊內(nèi)的var變量" (可訪(fǎng)問(wèn))
    console.log(innerLet);   // ReferenceError: innerLet is not defined
}

functionScopeDemo();
console.log(funcVar);  // ReferenceError: funcVar is not defined

// 塊級(jí)作用域示例
if (true) {
    var blockVar = '塊內(nèi)的var變量';  // 實(shí)際上會(huì)提升到函數(shù)或全局作用域
    let blockLet = '塊內(nèi)的let變量';  // 真正的塊級(jí)作用域
    const blockConst = '塊內(nèi)的const常量';
    
    console.log(blockVar);   // "塊內(nèi)的var變量"
    console.log(blockLet);   // "塊內(nèi)的let變量"
    console.log(blockConst); // "塊內(nèi)的const常量"
}

console.log(blockVar);   // "塊內(nèi)的var變量" (可訪(fǎng)問(wèn))
console.log(blockLet);   // ReferenceError: blockLet is not defined
console.log(blockConst); // ReferenceError: blockConst is not defined

// for循環(huán)中的塊級(jí)作用域
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 輸出 0, 1, 2 (每個(gè)i有獨(dú)立作用域)
}

for (var j = 0; j < 3; j++) {
    setTimeout(() => console.log(j), 100); // 輸出 3, 3, 3 (共享同一個(gè)j)
}

// moduleA.js
const privateVar = '我是模塊私有變量'; // 模塊作用域，外部無(wú)法訪(fǎng)問(wèn)
export const publicVar = '我是模塊導(dǎo)出變量'; // 可以被其他模塊導(dǎo)入

// moduleB.js
import { publicVar } from './moduleA.js';

console.log(publicVar);  // "我是模塊導(dǎo)出變量"
console.log(privateVar); // ReferenceError: privateVar is not defined

function createCounter() {
    let count = 0; // 閉包作用域
    
    return {
        increment: function() {
            count++;
            return count;
        },
        current: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.current()); // 0
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
// count變量被閉包保護(hù)，外部無(wú)法直接訪(fǎng)問(wèn)

(function() {
    var iifeVar = 'IIFE內(nèi)的變量';
    console.log(iifeVar); // "IIFE內(nèi)的變量"
})();

console.log(iifeVar); // ReferenceError: iifeVar is not defined

const obj = {
    value: 42,
    getValue: function() {
        return this.value; // this的綁定在調(diào)用時(shí)確定
    }
};

console.log(obj.getValue()); // 42 (this指向obj)

const unboundGet = obj.getValue;
console.log(unboundGet()); // undefined (this指向全局或undefined)

function varExample() {
  if (true) {
    var x = 10; // 整個(gè)函數(shù)內(nèi)都可用
  }
  console.log(x); // 輸出 10
}

function letExample() {
  if (true) {
    let y = 20;
    console.log(y); // 輸出 20
  }
  console.log(y); // 報(bào)錯(cuò): y is not defined
}

const PI = 3.1415;
// PI = 3.14; // 報(bào)錯(cuò)

const arr = [1, 2];
arr.push(3); // 允許
// arr = [4,5]; // 報(bào)錯(cuò)

function outer() {
  inner(); // 可以調(diào)用，因?yàn)楹瘮?shù)提升
  
  function inner() {
    console.log("Inner function");
  }
}

const myFunc = function() {
  // 函數(shù)體作用域
  console.log("Function expression");
};

const obj = {
  value: 42,
  getValue: function() {
    setTimeout(() => {
      console.log(this.value); // 正確獲取42，因?yàn)槔^承父作用域this
    }, 100);
  }
};

if (true) {
  let blockScoped = "visible";
  var functionScoped = "visible";
}
console.log(functionScoped); // "visible"
console.log(blockScoped); // 報(bào)錯(cuò)

for (let i = 0; i < 3; i++) {
  // i只在循環(huán)體內(nèi)有效
}
console.log(i); // 報(bào)錯(cuò)

for (var j = 0; j < 3; j++) {
  // j在整個(gè)函數(shù)內(nèi)有效
}
console.log(j); // 3

switch (x) {
  case 1:
    let result = "one";
    break;
  case 2:
    // result = "two"; // 報(bào)錯(cuò)，因?yàn)閞esult已在同一作用域聲明
    break;
}

{
  let privateVar = "secret";
  const secretKey = "12345";
}
// privateVar 和 secretKey 在這里不可訪(fǎng)問(wèn)

// module.js
const privateData = "hidden";
export const publicData = "visible";

// app.js
import { publicData } from './module.js';
console.log(publicData); // "visible"
console.log(privateData); // 報(bào)錯(cuò)

// module.js
const localVar = "local";
module.exports = { publicVar: "public" };

// app.js
const { publicVar } = require('./module');
console.log(publicVar); // "public"
console.log(localVar); // 報(bào)錯(cuò)

class MyClass {
  constructor() {
    this.instanceVar = "instance";
  }
  
  method() {
    let localVar = "local";
  }
}

console.log(MyClass); // 類(lèi)可用
// console.log(localVar); // 報(bào)錯(cuò)

const MyClass = class {
  // 類(lèi)體作用域
};

{
  class PrivateClass {} // 只在塊內(nèi)可用
}

(function() {
  var private = "secret";
})();
console.log(private); // 報(bào)錯(cuò)

const obj = { a: 1 };
with (obj) {
  console.log(a); // 1
  // 創(chuàng)建了一個(gè)臨時(shí)作用域鏈
}

try {
  throw new Error("test");
} catch (err) { // err只在catch塊內(nèi)有效
  console.log(err.message);
}
console.log(err); // 報(bào)錯(cuò)

全局作用域 (window/global)
│
├── 函數(shù)A作用域
│   │
│   ├── 函數(shù)B作用域
│   │   │
│   │   └── 塊級(jí)作用域 (if/for等)
│   │
│   └── 塊級(jí)作用域
│
├── 函數(shù)C作用域
│
└── 塊級(jí)作用域

let printer = "總打印室"; // 全局

function department() {
  let printer = "部門(mén)打印機(jī)"; // 部門(mén)級(jí)
  
  function employee() {
    let printer = "工位打印機(jī)"; // 個(gè)人
    console.log(printer); // 先用"工位打印機(jī)"
  }
  
  employee();
}

var drink = "奶茶"; // 第一個(gè)顧客
var drink = "咖啡"; // 第二個(gè)顧客，替換了前面的
console.log(drink); // 最后買(mǎi)到的是"咖啡"

let food = "漢堡";
// let food = "薯?xiàng)l"; // 報(bào)錯(cuò)：不能插隊(duì)重復(fù)聲明

let companySecret = "今年盈利"; // 公司級(jí)

function departmentA() {
  let teamNote = "項(xiàng)目進(jìn)度"; // 部門(mén)A私有
  console.log(companySecret); // 可以看公司信息
}

// console.log(teamNote); // 報(bào)錯(cuò)：外部不能訪(fǎng)問(wèn)部門(mén)內(nèi)部信息

{
  let meetingTopic = "裁員計(jì)劃"; // 只在會(huì)議室有效
  var announcement = "明年上市"; // 全公司都能聽(tīng)到
}

// console.log(meetingTopic); // 報(bào)錯(cuò)：會(huì)議內(nèi)容不公開(kāi)
console.log(announcement); // 可以聽(tīng)到

function createEmployee() {
  let salary = 10000; // 公司內(nèi)部數(shù)據(jù)
  
  return {
    getSalary: () => salary // 離職員工帶走了訪(fǎng)問(wèn)權(quán)限
  };
}

const exStaff = createEmployee();
console.log(exStaff.getSalary()); // 還能查到工資！

// 子公司A.js
let budget = 100萬(wàn); // 自己知道
export let project = "新項(xiàng)目"; // 對(duì)外公開(kāi)

// 集團(tuán)公司.js
import { project } from '子公司A';
console.log(project); // 能看見(jiàn)公開(kāi)項(xiàng)目
// console.log(budget); // 報(bào)錯(cuò)：看不到別家內(nèi)部預(yù)算

// 好 ??
const MAX_SIZE = 100; // 不可變的值使用const
const user = { name: '張三' }; // 引用類(lèi)型也可以用const
user.name = '李四'; // 可以修改對(duì)象屬性

// 差 ??
var MAX_SIZE = 100; // var沒(méi)有塊級(jí)作用域
let user = { name: '張三' }; // 如果引用不會(huì)改變，不需要用let

// 好 ??
let count = 0;
count = 1; // 需要重新賦值時(shí)使用let

// 差 ??
var count = 0; // var容易造成變量提升問(wèn)題

// 問(wèn)題示例 ?
function problematic() {
    if (true) {
        var temp = '臨時(shí)值'; // var會(huì)提升到函數(shù)作用域
    }
    console.log(temp); // 可以訪(fǎng)問(wèn)，不符合預(yù)期
}

// 修復(fù)方案 ?
function fixed() {
    if (true) {
        let temp = '臨時(shí)值'; // 限制在塊級(jí)作用域
    }
    console.log(temp); // ReferenceError: 符合預(yù)期
}

// 好 ??
function processData(data) {
    if (data) {
        const result = transform(data); // 只在需要的地方聲明
        console.log(result);
    }
    // result在這里不可訪(fǎng)問(wèn)
}

// 差 ??
function processData(data) {
    let result; // 過(guò)早聲明
    if (data) {
        result = transform(data);
        console.log(result);
    }
    // result在這里仍然可訪(fǎng)問(wèn)
}

// 好 ??
for (let i = 0; i < 10; i++) { // 每次迭代都有獨(dú)立的i
    setTimeout(() => console.log(i), 100); // 輸出0-9
}

// 差 ??
for (var i = 0; i < 10; i++) { // 共享同一個(gè)i
    setTimeout(() => console.log(i), 100); // 輸出10個(gè)10
}

// 好 ??
(function() {
    const privateVar = '私有變量';
    window.myLib = { // 有選擇地暴露到全局
        publicMethod: function() {
            return privateVar;
        }
    };
})();

// 差 ??
var globalVar = '污染全局'; // 直接污染全局命名空間

// utils.js
const privateHelper = () => '私有方法';
export const publicUtil = () => privateHelper();

// app.js
import { publicUtil } from './utils.js';
console.log(publicUtil()); // 使用模塊化的公共方法

// 好 ??
function createCounter() {
    let count = 0; // 閉包保護(hù)的變量
    return {
        increment: () => ++count,
        get: () => count,
        reset: () => { count = 0; }
    };
}

const counter = createCounter();
counter.increment();
console.log(counter.get()); // 1

// 差 ??
let count = 0; // 直接暴露在全局
function increment() {
    return ++count;
}
// 任何人都可以修改count

// 問(wèn)題示例 ?
function setupElements() {
    const elements = document.querySelectorAll('.btn');
    for (var i = 0; i < elements.length; i++) {
        elements[i].onclick = function() {
            console.log(i); // 總是輸出elements.length
        };
    }
}

// 修復(fù)方案 ?
function setupElementsFixed() {
    const elements = document.querySelectorAll('.btn');
    for (let i = 0; i < elements.length; i++) { // 使用let
        elements[i].onclick = function() {
            console.log(i); // 正確輸出索引
        };
    }
}

// 問(wèn)題示例 ?
if (true) {
    function foo() { console.log('1'); }
} else {
    function foo() { console.log('2'); }
}
foo(); // 不同瀏覽器行為不一致

// 修復(fù)方案 ?
let foo;
if (true) {
    foo = () => console.log('1');
} else {
    foo = () => console.log('2');
}
foo(); // 行為一致

// 好 ??
const handler = function() { /* 處理邏輯 */ };

// 差 ??
function handler() { /* 處理邏輯 */ }
// 會(huì)被提升，可能影響代碼可讀性

// 好 ??
function calculateOrderTotal(order) {
    const taxRate = 0.1;
    return order.subtotal * (1 + taxRate);
}

// 差 ??
function calc(a) {
    const b = 0.1; // 無(wú)意義的命名
    return a * (1 + b);
}

// 好 ??
const MyApp = {};
MyApp.Utils = {
    formatDate: function(date) { /* ... */ },
    validateEmail: function(email) { /* ... */ }
};

// 差 ??
function formatDate(date) { /* ... */ } // 直接放在全局
function validateEmail(email) { /* ... */ }

// 好 ??
'use strict';
function strictFunc() {
    undeclaredVar = 'test'; // 會(huì)拋出ReferenceError
}

// 差 ??
function sloppyFunc() {
    undeclaredVar = 'test'; // 自動(dòng)創(chuàng)建全局變量
}