详解JS中 call 方法的实现 _生活百科

摘要：本文将全面的，详细解析call方法的实现原理

本文分享自华为云社区《关于 JavaScript 中 call 方法的实现，附带详细解析！》，作者：CoderBin 。
本文将全面的，详细解析call方法的实现原理，并手写出自己的call方法，相信看完本文的小伙伴都能从中有所收获。
call 方法的实现1.函数作用【详解JS中 call 方法的实现】调用函数，可传入参数，改变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'); // 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. 细节解析