// 函數聲明：function 關鍵字 + 函數名 + 參數列表 + 函數體
function calculateSum(a, b) {
  // 函數體：實現求和邏輯
  return a + b;
}
// 關鍵特性：函數提升（聲明前調用仍可執(zhí)行）
console.log(calculateSum(3, 5)); // 輸出：8（正常執(zhí)行，無報錯）

// 1. 聲明變量 fn，賦值為一個匿名函數（函數表達式的核心語法）
// 右側 function(){} 是匿名函數，無函數名，作為值賦值給 fn
var fn = function(a, b) {
  // 函數內部邏輯：計算兩數之和
  // 內部可訪問參數 a、b，以及外部作用域的變量（后續(xù)詳解）
  var sum = a + b;
  console.log("匿名函數內部：a + b =", sum); // 輸出計算結果
  return sum; // 返回結果給外部調用者
};
// 2. 調用函數表達式：通過變量名 fn 調用，傳入實參
// 外部通過變量名觸發(fā)函數執(zhí)行，獲取返回值
var result = fn(3, 5);
console.log("外部訪問函數返回值：", result); // 輸出：外部訪問函數返回值：8
// 關鍵注意：匿名函數本身無名字，無法在內部通過函數名遞歸（需用 arguments.callee）
var factorial = function(n) {
  if (n === 1) return 1;
  // 匿名函數內部無法通過“函數名”遞歸，需用 arguments.callee 指向當前函數
  return n * arguments.callee(n - 1);
};
console.log("匿名函數遞歸（階乘）：", factorial(5)); // 輸出：120

// 1. 聲明變量 calculate，賦值為一個“帶名字的函數”（函數名：multiply）
// 右側 function multiply(a, b){} 是命名函數，函數名 multiply 僅內部可用
var calculate = function multiply(a, b) {
  // 函數內部可通過函數名 multiply 訪問自身（用于遞歸）
  console.log("命名函數內部：函數名 =", multiply.name); // 輸出：命名函數內部：函數名 = multiply
  return a * b;
};
// 2. 外部調用：只能通過變量名 calculate 調用，無法直接用 multiply
console.log("外部調用命名函數表達式：", calculate(4, 6)); // 輸出：24
// console.log(multiply(4, 6)); // 報錯：multiply is not defined（外部無法訪問函數內部的名字）
// 3. 命名函數表達式的核心優(yōu)勢：內部遞歸更清晰（無需依賴 arguments.callee）
var fibonacci = function fib(n) {
  if (n <= 2) return 1;
  // 內部通過函數名 fib 遞歸，語義更清晰，避免 arguments.callee 的歧義
  return fib(n - 1) + fib(n - 2);
};
console.log("命名函數遞歸（斐波那契）：", fibonacci(6)); // 輸出：8（1,1,2,3,5,8）

// 1. 匿名函數表達式：無函數名，賦值給變量
var calculateMultiply = function(a, b) {
  return a * b;
};
// 2. 命名函數表達式：函數名僅在內部可用（用于遞歸或調試）
var calculateDivide = function divide(a, b) {
  console.log(divide.name); // 輸出：divide（內部訪問函數名）
  if (b === 0) return "除數不能為0";
  return a / b;
};
// 關鍵特性：無函數提升（聲明前調用會報錯）
// console.log(calculateMultiply(4, 6)); // 報錯：calculateMultiply is not a function（若放在賦值前）
console.log(calculateMultiply(4, 6)); // 輸出：24（賦值后調用正常）
console.log(calculateDivide(10, 2)); // 輸出：5

// 實例1：處理不確定個數的參數（求和）
function sum() {
  var total = 0;
  // 遍歷 arguments（類數組，需用 for 循環(huán)，無 forEach 方法）
  for (var i = 0; i < arguments.length; i++) {
    // 過濾非數字參數（增強魯棒性）
    if (typeof arguments[i] === "number") {
      total += arguments[i];
    }
  }
  return total;
}
console.log(sum(1, 2, 3)); // 輸出：6
console.log(sum(10, 20, "a", 30)); // 輸出：60（忽略非數字參數）
// 實例2：arguments.callee 實現匿名函數遞歸（計算階乘）
var factorial = function(n) {
  if (n === 1) return 1;
  // callee 指向當前函數，避免依賴外部變量名
  return n * arguments.callee(n - 1);
};
console.log(factorial(5)); // 輸出：120（5! = 5*4*3*2*1）

// 場景1：全局調用 -> this 指向全局對象（瀏覽器：window，Node：global）
function getGlobalContext() {
  console.log(this === window); // 瀏覽器環(huán)境輸出：true
  console.log(this === global); // Node 環(huán)境輸出：true
}
getGlobalContext();
// 場景2：對象方法調用 -> this 指向調用對象
var user = {
  name: "張三",
  age: 25,
  introduce: function() {
    return `我是${this.name}，今年${this.age}歲`;
  }
};
console.log(user.introduce()); // 輸出：我是張三，今年25歲
// 場景3：call/apply 強制綁定 -> this 指向指定對象
var anotherUser = { name: "李四", age: 30 };
// call：參數列表傳遞（逗號分隔）
console.log(user.introduce.call(anotherUser)); // 輸出：我是李四，今年30歲
// apply：參數數組傳遞
console.log(user.introduce.apply(anotherUser)); // 輸出：我是李四，今年30歲
// 場景4：bind 延遲綁定 -> 返回 this 綁定后的新函數
var boundIntroduce = user.introduce.bind(anotherUser);
setTimeout(boundIntroduce, 1000); // 1秒后輸出：我是李四，今年30歲

// 形式1：外層括號包裹函數體 + 執(zhí)行括號（推薦，語義清晰）
(function(a, b) {
  console.log("IIFE 形式1：" + (a + b)); // 輸出：IIFE 形式1：15
})(10, 5);
// 形式2：函數體括號 + 執(zhí)行括號（省略外層括號，利用運算符優(yōu)先級）
(function(a, b) {
  console.log("IIFE 形式2：" + (a * b)); // 輸出：IIFE 形式2：50
}(25, 2));
// 簡化形式（利用一元運算符，如 !、+、-，省略外層括號）
!function(a) {
  console.log("IIFE 簡化形式：" + a); // 輸出：IIFE 簡化形式：8
}(8);

// 問題：循環(huán)中 var 聲明的變量共享，導致定時器輸出異常
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log("未用 IIFE：" + i); // 輸出：3 3 3（循環(huán)結束后 i 已變?yōu)?3）
  }, 100);
}

// 方案：通過 IIFE 將每次迭代的 i 傳入獨立作用域
for (var i = 0; i < 3; i++) {
  (function(j) {
    // j 是 IIFE 的參數，每次迭代獨立保存 i 的當前值
    setTimeout(function() {
      console.log("用 IIFE：" + j); // 輸出：0 1 2（正常輸出每次迭代的 i）
    }, 100);
  })(i); // 將當前 i 作為實參傳入
}

// 外層函數：定義局部變量 count
function createCounter() {
  var count = 0; // 被閉包引用的外層變量，不會被垃圾回收
  var step = 1; // 額外參數，演示多變量保存
  // 內層函數：引用 count 和 step，形成閉包
  return {
    increment: function() {
      count += step;
      return count;
    },
    setStep: function(newStep) {
      step = newStep; // 可通過閉包修改外層變量
    }
  };
}
// 調用外層函數，獲取閉包對象（保存 count 和 step 的狀態(tài)）
var counter1 = createCounter();
var counter2 = createCounter(); // 獨立閉包，狀態(tài)不共享
// 操作 counter1
console.log(counter1.increment()); // 輸出：1（count=1，step=1）
counter1.setStep(2); // 修改 step 為 2
console.log(counter1.increment()); // 輸出：3（count=1+2=3）
// 操作 counter2（與 counter1 狀態(tài)獨立）
console.log(counter2.increment()); // 輸出：1（count=1，step=1）

// 模塊：通過閉包隱藏內部變量，僅暴露指定方法
var userModule = (function() {
  // 私有變量：僅內部可訪問，外部無法直接修改
  var privateName = "張三";
  var privateAge = 25;
  // 暴露的公共方法（閉包，引用私有變量）
  return {
    getName: function() {
      return privateName;
    },
    setAge: function(newAge) {
      // 可在方法中添加校驗邏輯，保證數據安全
      if (typeof newAge === "number" && newAge > 0) {
        privateAge = newAge;
      }
      return privateAge;
    },
    getInfo: function() {
      return `姓名：${privateName}，年齡：${privateAge}`;
    }
  };
})();
// 外部訪問：只能通過暴露的方法操作，無法直接修改私有變量
console.log(userModule.getName()); // 輸出：張三
console.log(userModule.setAge(28)); // 輸出：28
console.log(userModule.getInfo()); // 輸出：姓名：張三，年齡：28
console.log(userModule.privateName); // 輸出：undefined（私有變量不可直接訪問）

// 場景：異步請求中保留請求參數（如 AJAX 回調）
function fetchData(url) {
  // 模擬 AJAX 異步請求
  setTimeout(function() {
    // 閉包引用外層變量 url，即使 fetchData 執(zhí)行完，url 仍被保留
    console.log(`請求地址：${url}，模擬返回數據成功`);
  }, 1000);
}
fetchData("https://api.example.com/user"); // 1秒后輸出：請求地址：https://api.example.com/user，模擬返回數據成功
fetchData("https://api.example.com/order"); // 1秒后輸出：請求地址：https://api.example.com/order，模擬返回數據成功

// 1. 同步回調（立即執(zhí)行，如數組遍歷）
var numbers = [1, 2, 3, 4];
// forEach 的參數是同步回調，遍歷完成后立即執(zhí)行
numbers.forEach(function(item, index) {
  console.log(`索引${index}：${item * 2}`); // 輸出：索引0：2 索引1：4 索引2：6 索引3：8
});
// 2. 異步回調（延遲執(zhí)行，如定時器）
function loadData(callback) {
  console.log("開始加載數據...");
  // 模擬異步操作（如 AJAX 請求）
  setTimeout(function() {
    var data = { name: "李四", age: 30 };
    callback(data); // 異步完成后調用回調，傳遞數據
  }, 1500);
}
// 調用函數并傳入回調
loadData(function(result) {
  console.log("加載完成，數據：", result); // 1.5秒后輸出：加載完成，數據：{ name: '李四', age: 30 }
});
console.log("加載請求已發(fā)送（不阻塞后續(xù)代碼）"); // 先輸出：加載請求已發(fā)送（不阻塞后續(xù)代碼）

function add(a, b) {
  return a + b;
}
function multiply(a, b, c) {
  return a * b * c;
}
console.log(add.length); // 輸出：2（形參個數為 2）
console.log(multiply.length); // 輸出：3（形參個數為 3）

function greet(name) {
  return `Hello, ${name}`;
}
console.log(greet instanceof Function); // 輸出：true（函數是 Function 實例）
console.log(greet.name); // 輸出：greet（函數名屬性）
console.log(greet.toString()); // 輸出函數的源代碼：function greet(name) { return `Hello, ${name}`; }