进阶篇题目列表

// 示例代码
console.log(typeof null); // "object"
console.log(Array.isArray([])); // true
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"

function Person(name) {
  this.name = name;
}
const p = new Person('Alice');
console.log(p.name); // Alice

function greet() {
  console.log(`Hello, ${this.name}`);
}
greet.call({ name: 'Bob' }); // Hello, Bob

const obj = {
  name: 'Charlie',
  greet() {
    console.log(this.name);
  }
};
obj.greet(); // Charlie

function fn() { console.log(this); }
fn(); // 非严格模式：window，严格模式：undefined

const obj = {
  name: 'Outer',
  regularFn() {
    setTimeout(() => {
      console.log(this.name); // Outer，继承外层 this
    }, 100);
  }
};
obj.regularFn();

// call 实现
Function.prototype.myCall = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('not a function');
  }
  context = context || globalThis;
  const key = Symbol('temp');
  context[key] = this;
  const result = context[key](...args);
  delete context[key];
  return result;
};

// apply 实现
Function.prototype.myApply = function(context, args = []) {
  if (typeof this !== 'function') {
    throw new TypeError('not a function');
  }
  context = context || globalThis;
  const key = Symbol('temp');
  context[key] = this;
  const result = context[key](...args);
  delete context[key];
  return result;
};

// bind 实现（支持 new 调用）
Function.prototype.myBind = function(context, ...boundArgs) {
  if (typeof this !== 'function') {
    throw new TypeError('not a function');
  }
  const fn = this;
  const boundFn = function(...args) {
    if (new.target) {
      return new fn(...boundArgs, ...args);
    }
    return fn.apply(context, [...boundArgs, ...args]);
  };
  boundFn.prototype = Object.create(fn.prototype);
  return boundFn;
};

// var 提升
console.log(a); // undefined
var a = 1;

// function 提升
foo(); // "Hello"
function foo() {
  console.log("Hello");
}

// let/const TDZ
console.log(b); // ReferenceError!
let b = 2;

// class TDZ
const instance = new MyClass(); // ReferenceError!
class MyClass {}

console.log(foo); // [Function: foo]
var foo = 1;
function foo() {}
console.log(foo); // 1

ExecutionContext = {
  LexicalEnvironment: { /* 用于存储 let/const 声明 */ },
  VariableEnvironment: { /* 用于存储 var 声明 */ },
  ThisBinding: /* this 的值 */
}

let x = 1;
function outer() {
  let y = 2;
  function inner() {
    let z = 3;
    console.log(x + y + z);
  }
  inner();
}
outer();

/*
调用 inner 时的执行上下文：
LexicalEnvironment: { z: 3 }
Outer: 指向 outer 的 LexicalEnvironment
VariableEnvironment: 同 LexicalEnvironment（此处无 var）
ThisBinding: 取决于调用方式
*/

let global = 'global';

function outer() {
  let outerVar = 'outer';
  function inner() {
    let innerVar = 'inner';
    console.log(global);    // ✅ 找到
    console.log(outerVar);  // ✅ 找到
    console.log(innerVar);  // ✅ 找到
  }
  inner();
}
outer();

let x = 'global';
function foo() {
  console.log(x); // 词法作用域：'global'
}
function bar() {
  let x = 'local';
  foo(); // 即使在 bar 中调用，foo 仍访问全局 x
}
bar(); // 输出 'global'

// var 的问题
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出 3, 3, 3
}

// let 的解决方案
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出 0, 1, 2
}

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2
// count 变量被保留在内存中，未被垃圾回收

const Counter = (function() {
  let privateCount = 0;
  return {
    increment() { privateCount++; },
    getCount() { return privateCount; }
  };
})();

function add(a) {
  return function(b) {
    return a + b;
  };
}
const add5 = add(5);
add5(3); // 8

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = (function(index) {
    return function() {
      console.log('Button', index, 'clicked');
    };
  })(i);
}

function myNew(Constructor, ...args) {
  // 1. 创建新对象
  const obj = Object.create(Constructor.prototype);

  // 2. 绑定 this 并执行构造函数
  const result = Constructor.apply(obj, args);

  // 3. 返回结果
  if (result && (typeof result === 'object' || typeof result === 'function')) {
    return result;
  }
  return obj;
}

// 使用示例
function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function() {
  console.log(this.name);
};

const p = myNew(Person, 'Alice');
p.sayName(); // Alice

function Test() {
  this.value = 1;
  return { custom: true }; // 返回对象
}
const t = new Test();
console.log(t); // { custom: true }

function Test2() {
  this.value = 1;
  return 'string'; // 返回原始值
}
const t2 = new Test2();
console.log(t2); // Test2 { value: 1 }

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function() {
  console.log(this.name);
};

const p = new Person('Alice');

// 关系验证
console.log(p.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

p.sayName(); 
// 1. 查找 p 自身是否有 sayName -> 无
// 2. 查找 p.__proto__ (即 Person.prototype) -> 有，执行

p instanceof Person; 
// 检查 Person.prototype 是否在 p 的原型链上

class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
// 等价于上面的构造函数+原型方式

function Parent() {
  this.colors = ['red'];
}
Parent.prototype.getName = function() { return 'parent'; };

function Child() {}
Child.prototype = new Parent(); // 核心

const c1 = new Child();
c1.colors.push('blue');
const c2 = new Child();
console.log(c2.colors); // ['red', 'blue'] —— 引用类型共享问题

function Child(name) {
  Parent.call(this); // 核心
  this.name = name;
}
// 无法继承 Parent.prototype 上的方法

function Child(name) {
  Parent.call(this); // 第一次调用 Parent
  this.name = name;
}
Child.prototype = new Parent(); // 第二次调用 Parent
Child.prototype.constructor = Child;
// 存在两次调用问题

function inherit(Child, Parent) {
  // 创建父类原型的副本，避免第二次调用构造函数
  const prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}

function Child(name) {
  Parent.call(this); // 只在此处调用
  this.name = name;
}
inherit(Child, Parent);

class Parent {
  constructor(name) {
    this.name = name;
  }
  getName() { return this.name; }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
  getAge() { return this.age; }
}

// 闭包方式
function createCounter() {
  let count = 0; // 私有变量
  return {
    increment() { count++; },
    getCount() { return count; }
  };
}

// ES2022 私有字段
class Counter {
  #count = 0; // 私有字段
  increment() { this.#count++; }
  getCount() { return this.#count; }
}

class Animal {
  speak() {
    throw new Error('Must override speak');
  }
}

class Dog extends Animal {
  speak() { return 'Woof!'; }
}

class Cat extends Animal {
  speak() { return 'Meow!'; }
}

function makeAnimalSpeak(animal) {
  console.log(animal.speak()); // 多态调用
}
makeAnimalSpeak(new Dog()); // Woof!
makeAnimalSpeak(new Cat()); // Meow!

// 抽象类模拟
class AbstractCollection {
  add(item) {
    throw new Error('Abstract method not implemented');
  }
  remove(item) {
    throw new Error('Abstract method not implemented');
  }
}

class ArrayCollection extends AbstractCollection {
  constructor() {
    super();
    this.items = [];
  }
  add(item) { this.items.push(item); }
  remove(item) { this.items = this.items.filter(i => i !== item); }
}

function createUser(type, name) {
  switch(type) {
    case 'admin':
      return new AdminUser(name);
    case 'guest':
      return new GuestUser(name);
    default:
      throw new Error('Unknown type');
  }
}

document.getElementById('outer').addEventListener('click', () => {
  console.log('outer captured');
}, true); // true 表示捕获阶段

document.getElementById('inner').addEventListener('click', () => {
  console.log('inner target');
});

document.getElementById('outer').addEventListener('click', () => {
  console.log('outer bubbled');
}); // 默认冒泡阶段

// 传统方式（不推荐）
element.onclick = function(e) {};

// 现代方式
element.addEventListener('click', handler, options);

// 优点：动态元素自动生效，减少内存占用
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('Item clicked:', e.target.textContent);
  }
});

// 创建
const event = new CustomEvent('myevent', {
  detail: { message: 'Hello' },
  bubbles: true
});

// 分发
element.dispatchEvent(event);

// 监听
element.addEventListener('myevent', function(e) {
  console.log(e.detail.message);
});

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }

// main.js
import multiply, { PI, add } from './math.js';
import * as math from './math.js';

const myIterable = {
  data: [1, 2, 3],
  index: 0,
  next() {
    if (this.index < this.data.length) {
      return { done: false, value: this.data[this.index++] };
    } else {
      return { done: true, value: undefined };
    }
  }
};

// 使用
while (true) {
  const result = myIterable.next();
  if (result.done) break;
  console.log(result.value);
}

const myIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { done: false, value: this.data[index++] };
        } else {
          return { done: true, value: undefined };
        }
      }
    };
  }
};

// 现在可以用 for...of 遍历
for (const item of myIterable) {
  console.log(item);
}

const arr = [1, 2, 3];
console.log([...arr]); // [1, 2, 3]
const [a, b] = arr; // 解构

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    return {
      next() {
        if (current < end) {
          return { done: false, value: current++ };
        } else {
          return { done: true, value: undefined };
        }
      }
    };
  }
}

for (const n of new Range(1, 5)) {
  console.log(n); // 1,2,3,4
}

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = Math.random() > 0.5;
    if (success) {
      resolve('Success!');
    } else {
      reject(new Error('Failed!'));
    }
  }, 1000);
});

promise
  .then(value => {
    console.log(value); // Success!
    return value.toUpperCase();
  })
  .then(value => console.log(value)) // SUCCESS!
  .catch(error => console.error(error))
  .finally(() => console.log('Cleanup'));

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = new Promise((resolve) => setTimeout(resolve, 100, 3));

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // [1, 2, 3]
});

promise
  .then(successHandler)
  .catch(errorHandler)
  .then(nextStep); // 无论成功失败都会执行

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    // 处理穿透
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };

    return new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      }
      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      }
      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          });
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          });
        });
      }
    });
  }
}

function* generator() {
  yield 'first';
  yield 'second';
  return 'result';
}

const gen = generator();
console.log(gen.next()); // { value: 'first', done: false }
console.log(gen.next()); // { value: 'second', done: false }
console.log(gen.next()); // { value: 'result', done: true }

function* echo() {
  const input = yield 'ready';
  yield `You said: ${input}`;
}

const gen = echo();
console.log(gen.next().value); // 'ready'
console.log(gen.next('hello').value); // 'You said: hello'

function* numbers() {
  yield 1;
  yield 2;
}

const gen = numbers();
// gen 是迭代器
gen.next(); // { value: 1, done: false }

// gen 也是可迭代对象
for (const n of gen) {
  console.log(n); // 2 (因为上次已消耗 1)
}

function* g1() {
  yield 1;
  yield 2;
}

function* g2() {
  yield* g1();
  yield 3;
}

[...g2()]; // [1, 2, 3]

function request(url) {
  return new Promise((resolve, reject) => {
    // 模拟请求
    setTimeout(() => resolve(`Data from ${url}`), 1000);
  });
}

function* main() {
  const data1 = yield request('/api/user');
  const data2 = yield request('/api/posts');
  console.log(data1, data2);
}

// 需要一个 runner 函数来驱动
function run(generator) {
  const it = generator();
  function go(result) {
    if (result.done) return;
    result.value.then(
      value => go(it.next(value)),
      error => go(it.throw(error))
    );
  }
  go(it.next());
}

run(main);

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error;
  }
}

// 使用
fetchData().then(data => console.log(data));

// 串行（等待前一个完成）
const user = await fetchUser();
const posts = await fetchPosts(user.id);

// 并行（同时发起）
const [user, posts] = await Promise.all([
  fetchUser(),
  fetchPosts(1)
]);

// 动态并行
async function fetchMultiple(urls) {
  const promises = urls.map(url => fetch(url));
  const responses = await Promise.all(promises);
  return Promise.all(responses.map(r => r.json()));
}

async function riskyOperation() {
  try {
    const result = await mightFail();
    return process(result);
  } catch (error) {
    // 处理错误，函数仍可返回正常值
    return fallbackValue;
  }
}

// Promise 链
function fetchUser() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => data.name);
}

// async/await
async function fetchUser() {
  const response = await fetch('/api/user');
  const data = await response.json();
  return data.name;
}

// 反模式：串行请求
for (const url of urls) {
  const data = await fetch(url); // 等待每一个
}

// 正确：并行请求
const promises = urls.map(url => fetch(url));
const responses = await Promise.all(promises);

console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise1');
}).then(() => {
  console.log('promise2');
});

console.log('script end');

// 输出顺序：
// script start
// script end
// promise1
// promise2
// setTimeout

queueMicrotask(() => {
  console.log('microtask via queueMicrotask');
});

// 1. Object.assign()
const shallow1 = Object.assign({}, original);

// 2. 展开运算符
const shallow2 = { ...original };

// 3. Array.prototype.slice() / concat()
const shallowArr = arr.slice();

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 使用
const debouncedResize = debounce(handleResize, 300);
window.addEventListener('resize', debouncedResize);

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

const proxy = new Proxy(target, handler);