let a = 10;
// 并没有直接修改原来的值，而是让变量 a 指向一个新值
a = 100;

let str = "hello, world";
// 在严格模式下，以下操作会直接报错
str[1] = "b";
// TypeError: Cannot assign to read only property '1' of string 'hello, world'

// TypeError: Cannot assign to read only property 'undefined' of object '#<Window>'
globalThis.undefined = "aaa";

const sym1 = Symbol("description");
const sym2 = Symbol("description");
console.log(sym1 === sym2); // false，即使描述相同，也是不同的值

// 给自定义对象实现 Symbol.iterator，相当于实现了 Java 的 Iterable 接口
const range = {
  start: 1,
  end: 5,
  [Symbol.iterator]() {
    let current = this.start;
    const last = this.end;
    return {
      next() {
        if (current <= last) {
          return { value: current++, done: false };
        }
        return { done: true };
      },
    };
  },
};

for (const num of range) {
  console.log(num); // 1, 2, 3, 4, 5
}

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Hi, I am ${this.name}!`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }

  catchFish() {
    console.log("I am catching fish!");
  }
}

console.log(typeof Animal === "function"); // true

// Animal 构造函数
function Animal(name) {
  this.name = name;
}

// 在 prototype 上定义方法，new 出来的所有实例共享这份方法
Animal.prototype.sayHi = function () {
  console.log(`Hi, I am ${this.name}!`);
};

// Cat 构造函数
function Cat(name) {
  Animal.call(this, name); // 等价于 super(name)
}

// 建立原型链：让 Cat.prototype 继承自 Animal.prototype
Cat.prototype = Object.create(Animal.prototype);
// 修复 constructor 指向（Object.create 后 constructor 指向了 Animal）
Cat.prototype.constructor = Cat;

// Cat 特有的原型方法
Cat.prototype.catchFish = function () {
  console.log("I am catching fish!");
};

const sillyCat = new Cat("Silly");

console.log(Animal.__proto__ === Function.prototype); // true，Animal 是 Function 的实例
console.log(sillyCat.__proto__ === Cat.prototype); // true
console.log(sillyCat.__proto__.__proto__ === Animal.prototype); // true
console.log(sillyCat.__proto__.__proto__.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true，链到此终止

sillyCat.sayHi(); // Hi, I am Silly!

const sillyCat = new Cat("Silly");
sillyCat.sayHi(); // 隐式绑定：this = sillyCat，正常

const funcSayHi = sillyCat.sayHi;
funcSayHi(); // 默认绑定：严格模式下 this = undefined，报错
// TypeError: Cannot read properties of undefined (reading 'name')

funcSayHi.call(sillyCat); // 立即执行，逐个传参
funcSayHi.apply(sillyCat, []); // 立即执行，数组传参
const bound = funcSayHi.bind(sillyCat); // 返回绑定后的新函数，不立即执行
bound();

function myNew(constructor, ...args) {
  // 步骤 1 + 2：创建空对象，原型指向构造函数的 prototype
  const obj = Object.create(constructor.prototype);

  // 步骤 3：绑定 this 并执行构造函数
  const result = constructor.apply(obj, args);

  // 如果构造函数显式返回了一个对象或函数，以其为准；否则返回新对象
  return (typeof result === "object" && result !== null) || typeof result === "function" ? result : obj;
}

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    // 箭头函数捕获了 Timer 构造调用时的 this（即实例本身）
    // 如果这里用普通函数，this 会变成 globalThis 或 undefined
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

let obj = { name: "Alice" };

// 精确控制数据属性
// 描述符：[[Value]] [[Writable]] [[Enumerable]] [[Configurable]]
Object.defineProperty(obj, "id", {
  value: 1001,
  writable: false, // 不可修改
  enumerable: true, // 可枚举（for...in 可见）
  configurable: false, // 不可删除、不可再重新配置
});

// 精确控制访问器属性
Object.defineProperty(obj, "age", {
  // _age 是真正的存储字段，约定以下划线开头表示"不应直接访问"
  get() {
    return this._age;
  },
  set(val) {
    if (val < 0) throw new Error("年龄不能为负");
    this._age = val;
  },
  enumerable: true,
  configurable: true,
});

class BankAccount {
  // ES2022: 顶层公有字段
  owner = "Unknown";
  // ES2022: 顶层私有字段声明
  #accountNumber;
  // ES2020: 私有字段
  #balance;
  // ES2020: 静态私有字段
  static #bankName;

  // ES2022: 静态初始化块（比静态字段赋值更灵活，可写条件逻辑）
  static {
    BankAccount.#bankName = "Global Bank";
  }

  constructor(owner, accountNumber, initialBalance) {
    this.owner = owner;
    this.#accountNumber = accountNumber;
    this.#balance = initialBalance;
  }

  // ES2020: 私有方法
  #logTransaction(type, amount) {
    console.log(`${type}: ${amount}，账号：${this.#accountNumber}`);
  }

  deposit(amount) {
    this.#balance += amount;
    this.#logTransaction("存款", amount);
  }

  withdraw(amount) {
    if (amount <= this.#balance) {
      this.#balance -= amount;
      this.#logTransaction("取款", amount);
    }
  }

  get balance() {
    return this.#balance;
  }

  static getBankName() {
    return BankAccount.#bankName;
  }

  // ES2022: 品牌检查——比 instanceof 更可靠，可抵御跨 realm 的误判
  static isBankAccount(obj) {
    return #balance in obj;
  }
}

const applyTheme = () => {
  document.documentElement.classList.toggle(
    "dark",
    localStorage.theme === "dark" ||
      (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
  );
};

const toggleTheme = () => {
  const isDark = document.documentElement.classList.toggle("dark");
  localStorage.theme = isDark ? "dark" : "light";
};

const getTheme = () => {
  const isDark =
    document.documentElement.classList.contains("dark") ||
    window.matchMedia("(prefers-color-scheme: dark)").matches;
  return isDark ? "dark" : "light";
};

(() => {
  var a = 10;
  console.log("Hi.");
})();
// a 无法从外部访问

// 先调用
sayHello();

// 后声明——解析阶段已将其提升
function sayHello() {
  console.log("Hello, Hoisting!");
}

console.log(a); // undefined（声明已提升，但赋值尚未执行到）
var a = 10;
console.log(a); // 10

greet(); // TypeError: greet is not a function（greet 此时是 undefined）

var greet = function () {
  console.log("Hi");
};

// 引擎实际执行的等价逻辑：
var greet; // 提升声明，初始化为 undefined
greet(); // 调用 undefined，报错
greet = function () {
  console.log("Hi");
};

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;
// 当执行到这一行时，y 才脱离 TDZ，被初始化为 20

{
  let block = "inside block";
  const PI = 3.14;
  var escape = "I am var"; // var 穿透块，逃到外层
}

console.log(block); // ReferenceError
console.log(PI); // ReferenceError
console.log(escape); // "I am var"

// 经典的 var 循环陷阱
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 输出：3, 3, 3
// 原因：var i 属于外层函数/全局作用域，三个箭头函数共享同一个 i
// 当 setTimeout 的回调执行时，循环早已结束，i 已经是 3

// let 正确行为
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}
// 输出：0, 1, 2
// 原因：每次迭代 let j 创建一个独立的块级绑定，每个回调捕获的是不同的 j

function square(a) {
  return a * a;
}

// 箭头函数：更简洁，且没有自己的 this、arguments、prototype
const squareArrow = (a) => a * a;

function sum() {
  // arguments 是类数组对象，有索引和 length，但没有 map、filter 等数组方法
  console.log(arguments); // Arguments [1, 2, 3, ...]
  let total = 0;
  for (let val of arguments) total += val;
  return total;
}

const arrowSum = (...args) => {
  // args 是真正的数组，可以直接使用所有数组方法
  console.log(args); // [1, 2, 3]
  return args.reduce((a, b) => a + b, 0);
};

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((n) => n * 2); // 匿名函数（Lambda）
const doubleIt = (n) => n * 2;
const doubled2 = numbers.map(doubleIt); // 函数作为参数（高阶函数）

// 防抖：连续触发时只执行最后一次，常用于搜索输入
function debounce(fn, delay) {
  let timer = null; // 这个 timer 活在堆上，被返回的函数持有
  return function (...args) {
    if (timer) clearTimeout(timer); // 每次触发都取消上一个计时器
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

// 节流：固定时间间隔内最多执行一次，常用于滚动事件
function throttle(fn, delay) {
  let timer = null;
  return function (...args) {
    if (timer) return; // 计时器存在说明还在冷却中，直接跳过
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

const add = (a, b) => a + b;

// 柯里化：一次只接受一个参数
const curriedAdd = (a) => (b) => a + b;

const add5 = curriedAdd(5); // 固定 a = 5，返回一个新函数
console.log(add5(3)); // 8
console.log(add5(10)); // 15

console.log("1 - 同步");

setTimeout(() => console.log("2 - 宏任务"), 0);

Promise.resolve()
  .then(() => {
    console.log("3 - 微任务 A");
    // 在微任务执行过程中再产生一个微任务
    return Promise.resolve();
  })
  .then(() => console.log("4 - 微任务 B"));

console.log("5 - 同步");

// 输出顺序：
// 1 - 同步
// 5 - 同步
// 3 - 微任务 A   ← 当前宏任务（script）结束，开始清空微任务队列
// 4 - 微任务 B   ← 微任务 A 产生的新微任务，也在这一轮被清空
// 2 - 宏任务     ← 微任务队列清空后，才轮到下一个宏任务

// 回调地狱：嵌套层数随依赖深度线性增长
fetchUser(userId, (user) => {
  fetchOrders(user.id, (orders) => {
    fetchOrderDetail(orders[0].id, (detail) => {
      render(detail, (result) => {
        console.log(result);
        // 每多一层依赖，就多一层缩进
      });
    });
  });
});

const promise = new Promise((resolve, reject) => {
  // executor 函数在 new Promise 时同步执行
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("操作成功"); // 将 Promise 推向 fulfilled
    } else {
      reject(new Error("操作失败")); // 将 Promise 推向 rejected
    }
  }, 1000);
});

promise
  .then((result) => console.log(result)) // "操作成功"
  .catch((err) => console.error(err));

fetchUser(userId)
  .then((user) => fetchOrders(user.id)) // 返回 Promise，链继续
  .then((orders) => fetchOrderDetail(orders[0].id))
  .then((detail) => {
    render(detail);
    return detail; // 返回普通值，下一个 .then 收到它
  })
  .then((detail) => console.log("完成：", detail))
  .catch((err) => {
    // 链中任意一步 reject 或抛出异常，都会跳到这里
    console.error("出错了：", err);
  });

// 全部成功才 resolve，任一失败则立即 reject（适合"必须都成功"的场景）
Promise.all([fetch("/api/a"), fetch("/api/b")]).then(([resA, resB]) => {
  /* 两个都成功 */
});

// 任一率先 settle（无论成功还是失败）就返回（适合取最快响应）
Promise.race([fetchFromServerA(), fetchFromServerB()]).then((result) => console.log("最快的结果：", result));

// 等全部 settle 后返回所有结果（无论成败），适合"需要知道每个结果"的场景
Promise.allSettled([fetch("/api/a"), fetch("/api/b")]).then((results) => {
  results.forEach((r) => {
    if (r.status === "fulfilled") console.log("成功：", r.value);
    else console.log("失败：", r.reason);
  });
});

async function loadDetail(userId) {
  try {
    const user = await fetchUser(userId);
    const orders = await fetchOrders(user.id);
    const detail = await fetchOrderDetail(orders[0].id);
    return detail; // 返回值自动包装为 Promise.resolve(detail)
  } catch (err) {
    // 任意一个 await 的 Promise rejected，都会跳到这里
    console.error("出错了：", err);
  }
}

async function foo() {
  return 42;
}
// 等价于
function foo() {
  return Promise.resolve(42);
}

async function bar() {
  throw new Error("oops");
}
// 等价于
function bar() {
  return Promise.reject(new Error("oops"));
}

console.log("script start");

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}

Promise.resolve().then(() => {
  console.log("promise then1");
  setTimeout(() => {
    console.log("promise then1 setTimeout");
  });
});

setTimeout(() => {
  console.log("settimeout");
});

async1();
console.log("script end");

script start
async1 start
async2
script end
promise then1
async1 end
settimeout
promise then1 setTimeout