1. 首頁 > 生活百科 > >

詳解JS中 call 方法的實現

生活百科

摘要：本文將全面的，詳細解析call方法的實現原理
【詳解JS中 call 方法的實現】本文分享自華為云社區《關于 JavaScript 中 call 方法的實現，附帶詳細解析！》，作者：CoderBin 。
本文將全面的，詳細解析call方法的實現原理，并手寫出自己的call方法，相信看完本文的小伙伴都能從中有所收獲 。
call 方法的實現1.函數作用調用函數，可傳入參數，改變this指向
2.總體步驟
  1. 邊界判斷（this,context）
  2. 將調用的函數設置為對象（傳入的context）的方法（改變this指向）
  3. 調用函數，得到返回值，并返回
3. 詳細步驟1. 邊界判斷
  • 判斷當前 this 是否為一個函數 ， 否則返回錯誤消息
  • 判斷傳入的 context 參數是否存在 ， 存在則使用 Object() 轉換為對象賦給 context，否則將 window 賦值給 context
2. 將調用的函數設置為對象（傳入的context）的方法（改變this指向）3. 調用函數，得到返回值，并返回
  • 調用函數 ， 得到結果
  • 刪除 context 身上的 fn 函數
  • 返回結果
4. 代碼實現/** * !實現 binCall() 方法 * @param {*} context 綁定的對象 * @param{...any} args 剩余參數 * @returns */Function.prototype.binCall = function(context, ...args) { if (typeof this !== 'function') console.error('type Error'); // 1context = (context!==null && context!==undefined) ? Object(context) : window context.fn = this // 2 const result = context.fn(...args) // 3 delete context.fn; return result}5. 測試代碼// 測試function sum(num1, num2) {console.log('sum 被執行', this); return num1 + num2}// 原生的 call() 方法console.log(sum.call({name: 'bin'},1,2));// 自定義的 binCall() 方法console.log(sum.binCall({name: 'bin'},1,2));經過原生的call方法和手寫的binCall方法測試，我們手動實現的binCall方法也能實現原生call方法的功能
6. 細節解析
  1. this 指向的就是調用 binCall() 的那個函數（隱式綁定）；
  2. 傳入的 context 參數表示：將 this 的指向改為這個參數；
  3. 改變 this 指向其實就是在 context 上添加一個臨時的方法，值為 this；
  4. 調用 context.fn() 時 ， 就已經改變了 this 的指向，同時得使用展開運算符傳入參數
  5. delete context.fn 刪除那個臨時方法是因為已經不需要用了
7. 核心原理通過在傳入的對象上，臨時新增一個方法 ， 這個方法的值是當前 binCall 的調用者 。然后 context.fn(...argArray) 調用這個函數，通過隱式綁定的方式改變了 this 的指向，最后得到結果并返回 。
點擊關注，第一時間了解華為云新鮮技術~

    推薦閱讀