摘要：本文將全面的，詳細決議call方法的實作原理
本文分享自華為云社區《關于 JavaScript 中 call 方法的實作，附帶詳細決議！》，作者：CoderBin，
本文將全面的，詳細決議call方法的實作原理，并手寫出自己的call方法，相信看完本文的小伙伴都能從中有所識訓，
call 方法的實作
1.函式作用
呼叫函式，可傳入引數，改變this指向
2.總體步驟
- 邊界判斷（this,context）
- 將呼叫的函式設定為物件（傳入的context）的方法（改變this指向）
- 呼叫函式，得到回傳值，并回傳
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'); // 1 context = (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. 細節決議
- this 指向的就是呼叫 binCall() 的那個函式（隱式系結）；
- 傳入的 context 引數表示：將 this 的指向改為這個引數；
- 改變 this 指向其實就是在 context 上添加一個臨時的方法，值為 this；
- 呼叫 context.fn() 時，就已經改變了 this 的指向，同時得使用展開運算子傳入引數
- delete context.fn 洗掉那個臨時方法是因為已經不需要用了
7. 核心原理
通過在傳入的物件上，臨時新增一個方法，這個方法的值是當前 binCall 的呼叫者，然后 context.fn(...argArray) 呼叫這個函式，通過隱式系結的方式改變了 this 的指向，最后得到結果并回傳，
點擊關注，第一時間了解華為云新鮮技術~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509634.html
標籤：其他