手寫系列：call、apply、bind、函數柯里化

• 2020 年 12 月 31 日
• 筆記
• javascript

少廢話，show my code

call

原理都在注釋里了

// 不覆蓋原生call方法，起個別名叫myCall，接收this上下文context和參數params
Function.prototype.myCall = function (context, ...params) {
  // context必須是個對象並且不能為null，默認為window
  const _this = typeof context === "object" ? context || window : window;
  // 為了避免和原有屬性衝突，定義一個Symbol類型的屬性
  const key = Symbol();
  // call方法的目的是改變函數的this指向，函數的this指向它的調用者，也就是說我們的目標是改變函數的調用者。
  // 下面的this就是函數本身，給context增加一個名為[key]的方法指向this，就能用context來調用this了
  context[key] = this;
  const result = _this[key](...params);
  // 獲取函數執行結果後，刪除以上添加的屬性
  delete context[key];
  return result;
};

apply

和call的區別在於第二個參數

Function.prototype.myApply = function (context, params) {
  return this.myCall(context, ...params);
};

bind

和call的區別在於不立即執行，返回一個函數即可

Function.prototype.myBind = function (context, ...params) {
  const _this = this;
  // 返回的函數也能接收參數，但是是放在params後面
  return function (...args) {
    return _this.myCall(context, ...[...params, ...args]);
  };
};

函數柯里化

函數柯里化，舉例，有如下函數

function test(a, b, c, d, e) {
  console.log(a + b + c + d + e);
}

有一個curry轉換函數對test函數進行一些轉換

function curry(){
  // todo
}
const transformTest = curry(test, ...args)

轉換之後，原本一次性傳過去的參數現在可以分步傳參

// 使得
test(1,2,3,4,5)
// 等同於
transformTest(1)(2)(3)(4)(5)
// 或者
transformTest(1, 2)(3)(4, 5)
// 又或者
transformTest(1, 2, 3, 4)(5)

curry函數應該怎麼寫？

function curry(fn, ...args) {
  // 判斷參數個數是不是等於原函數參數個數
  // 如果是，直接返回調用結果
  if ([...args].length === fn.length) {
    return fn(...args);
  } else {
    // 如果不是，則返回一個函數
    return (...params) => {
      // 將前面傳的全部參數傳給curry，回到第一步的if判斷，直到參數個數滿足要求
      return curry(fn, ...args, ...params);
    };
  }
}

本文GitHub鏈接：手寫系列：call、apply、bind、函數柯里化