function.call(thisArg, arg1, arg2, ...);

const person = {
  name: 'Alice',
  sayHello: function(greeting) {
    console.log(`${greeting}, I'm ${this.name}`);
  }
};
const anotherPerson = { name: 'Bob' };
// 調(diào)用 person 的 sayHello 方法，但 this 指向 anotherPerson
person.sayHello.call(anotherPerson, 'Hi'); // 輸出：Hi, I'm Bob

function.apply(thisArg, [argsArray]);

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 利用 apply 傳遞數(shù)組參數(shù)，等價(jià)于 arr1.push(4, 5, 6)
arr1.push.apply(arr1, arr2); 
console.log(arr1); // 輸出：[1, 2, 3, 4, 5, 6]

const boundFunction = function.bind(thisArg, arg1, arg2, ...);

const dataProcessor = {
  prefix: 'Result:',
  process: function(value) {
    console.log(`${this.prefix} ${value}`);
  }
};
// 模擬異步操作
function fetchData(callback) {
  setTimeout(() => {
    callback(100); // 回調(diào)函數(shù)執(zhí)行時(shí)，this 可能指向全局對象
  }, 1000);
}
// 綁定 process 方法的 this 為 dataProcessor
fetchData(dataProcessor.process.bind(dataProcessor)); 
// 1秒后輸出：Result: 100

Function.prototype.myCall = function(context, ...args) {
  // 1. 處理 context，如果為 null/undefined，則指向 window
  context = context || window;
  // 2. 創(chuàng)建一個(gè)唯一的 key，防止與 context 上的屬性沖突
  const uniqueKey = Symbol('fn');
  // 3. 將當(dāng)前函數(shù)（this）作為 context 的一個(gè)方法
  // this 在這里指向調(diào)用 myCall 的函數(shù)
  context[uniqueKey] = this;
  // 4. 通過 context 調(diào)用該方法，此時(shí) this 就指向了 context
  const result = context[uniqueKey](...args);
  // 5. 清理掉這個(gè)臨時(shí)方法，保持對象干凈
  delete context[uniqueKey];
  // 6. 返回函數(shù)的執(zhí)行結(jié)果
  return result;
}

const obj = { name: 'Test' };
function testCall(greeting) {
  console.log(`${greeting}, ${this.name}`);
}
testCall.myCall(obj, 'Hello'); // 輸出：Hello, Test

Function.prototype.myApply = function(thisArg, argsArray) {
  thisArg = thisArg || window;
  const fnSymbol = Symbol('fn');
  thisArg[fnSymbol] = this;
  // 處理參數(shù)：若 argsArray 不存在，傳入空數(shù)組
  const result = thisArg[fnSymbol](...(argsArray || []));
  delete thisArg[fnSymbol];
  return result;
};

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.myApply(null, numbers)); // 輸出：6

Function.prototype.myBind = function (context, ...bindArgs) {
  // this 指向調(diào)用 myBind 的原始函數(shù)
  const originalFunc = this;
  // 返回一個(gè)新的函數(shù)
  const fBound = function (...callArgs) {
    // 合并 bind 時(shí)傳入的參數(shù)和調(diào)用時(shí)傳入的參數(shù)
    const allArgs = [...bindArgs, ...callArgs];
    // 關(guān)鍵點(diǎn)：判斷是否是通過 new 關(guān)鍵字調(diào)用的
    if (this instanceof fBound) {
      // 箭頭函數(shù)不能作為構(gòu)造函數(shù)，原生 bind 返回 undefined
      if (!originalFunc.prototype) {
        return undefined;
      }
      // 是 new 關(guān)鍵字調(diào)用的，this 應(yīng)該指向新實(shí)例
      return new originalFunc(...allArgs);
    }
    // 如果是普通調(diào)用，就使用 call/apply 將 this 指向綁定的 context
    return originalFunc.apply(context, allArgs);
  };
  // 處理原型鏈：讓返回的函數(shù)的原型指向原始函數(shù)的原型
  // 這樣，由 bind 后的函數(shù) new 出來的實(shí)例，也能繼承原始函數(shù)的原型方法
  if (originalFunc.prototype) {
    fBound.prototype = Object.create(originalFunc.prototype);
    fBound.prototype.constructor = fBound;// 確保 constructor 指向正確
  }
  return fBound;
}

const obj = { x: 10 };
function add(y, z) {
  return this.x + y + z;
}
const boundAdd = add.myBind(obj, 5);
console.log(boundAdd(3)); // 輸出：18（10 + 5 + 3）

function Person(name) {
  this.name = name;
}
const BoundPerson = Person.myBind({});
const person = new BoundPerson('Alice');
console.log(person.name); // 輸出：Alice（this 指向?qū)嵗?，而非綁定?{}）
console.log(person instanceof Person); // 輸出：true（原型鏈正確）

function convertToArray() {
  // arguments 是類數(shù)組，借用數(shù)組的 slice 方法
  return Array.prototype.slice.call(arguments);
}
console.log(convertToArray(1, 2, 3)); // 輸出：[1, 2, 3]

class Timer {
  constructor() {
    this.seconds = 0;
    // 綁定 tick 方法的 this 為當(dāng)前實(shí)例
    setInterval(this.tick.bind(this), 1000);
  }
  tick() {
    this.seconds++;
    console.log(this.seconds);
  }
}
new Timer(); // 每秒輸出：1, 2, 3, ...

class Timer {
  constructor() {
    this.seconds = 0;
    // 使用箭頭函數(shù)，tick 方法中的 this 會(huì)自動(dòng)指向 Timer 實(shí)例
    setInterval(() => this.tick(), 1000);
  }
  tick() {
    this.seconds++;
    console.log(this.seconds);
  }
}
// 或者更推薦的方式，將方法本身定義為箭頭函數(shù)（作為類字段）
class ModernTimer {
    constructor() {
        this.seconds = 0;
        setInterval(this.tick, 1000); // 無需 bind 或箭頭函數(shù)包裹
    }
    tick = () => {
        this.seconds++;
        console.log(this.seconds);
    }
}
new ModernTimer();

function multiply(a, b, c) {
  return a * b * c;
}
// 預(yù)設(shè)第一個(gè)參數(shù)為 2
const multiplyBy2 = multiply.bind(null, 2);
// 再預(yù)設(shè)第二個(gè)參數(shù)為 3
const multiplyBy2And3 = multiplyBy2.bind(null, 3);
console.log(multiplyBy2And3(4)); // 輸出：24（2 * 3 * 4）