详解JS中 call 方法的实现

更新日期: 2022-09-26阅读: 994标签: 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'); // 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. 细节解析

  1. this 指向的就是调用 binCall() 的那个函数(隐式绑定);
  2. 传入的 context 参数表示:将 this 的指向改为这个参数;
  3. 改变 this 指向其实就是在 context 上添加一个临时的方法,值为 this;
  4. 调用 context.fn() 时,就已经改变了 this 的指向,同时得使用展开运算符传入参数
  5. delete context.fn 删除那个临时方法是因为已经不需要用了

7. 核心原理

通过在传入的对象上,临时新增一个方法,这个方法的值是当前 binCall 的调用者。然后 context.fn(...argArray) 调用这个函数,通过隐式绑定的方式改变了 this 的指向,最后得到结果并返回。

本文分享自华为云社区《关于 JavaScript 中 call 方法的实现,附带详细解析!》,作者:CoderBin。

链接: https://www.fly63.com/article/detial/12176

js的call() ,apply() 两种方法的区别和用法,最白话文的解释

call和apply可以用来重新定义函数的执行环境,也就是this的指向; call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的 换句话说,就是为了改变函数体内部 this 的指向。

js中apply,call,bind区别

js中有三个改变this指针的方法,分别是 apply,call,bind。很多人只知道能改变的this,但是具体的适用场景不是太清楚。我也是遇到坑后不断的实践发现了区别。call ,apply方法:

理解fn1.call.call(fn2);

call 方法是Function.prototype原型上天生自带的方法,所有的函数都可以调用的。它改变了call方法(Function.prototype原型上的call)的this指向。

Javascript之模拟实现call,apply

首先介绍下call和apply两个方法,这两个方法都是挂载在函数的原型上的,所以所有的函数都可以调用这两个方法。call()方法的作用和 apply() 方法类似,区别就是call()方法接受的是参数列表

call、apply、bind

call定义:调用一个对象的一个方法,以另一个对象替换当前对象,传递多个参数,apply定义:应用某一对象的一个方法,用另一个对象替换当前对象,apply传递多个参数的时候第二个参数需要传递一个数组

apply 和 call 的用法、区别

ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已。

深入解析如何实现 call、apply 和 bind

这是 JS 原生方法原理探究系列的第一篇文章。本文会介绍如何实现 call、apply 和 bind 方法。关于这几个方法的具体用法,MDN 以及网上的文章已经描述得很清楚,这里不再赘述。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!