手写call 、apply、bind 详细版

莫道开发

已于 2023-02-02 17:37:28 修改

阅读量337

点赞数

分类专栏：前端文章标签： javascript 前端

于 2023-02-02 16:22:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43856422/article/details/128852127

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何手动实现JavaScript中Function.prototype上的call、apply和bind方法。这三个方法都用于改变函数调用时的this上下文。call和apply的区别在于传递参数的方式，call接受逗号分隔的参数列表，apply接受一个参数数组。bind则返回一个新的函数，保留指定的上下文和部分参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手写 bind、apply

Object() 构造函数

Object 构造函数将给定的值包装为一个新对象。

如果给定的值是 null 或 undefined, 它会创建并返回一个空对象。
否则，它将返回一个和给定的值相对应的类型的对象。
如果给定值是一个已经存在的对象，则会返回这个已经存在的值（相同地址）。
在非构造函数上下文中调用时， Object 和 new Object()表现一致。

手写call

在写代码前，一定要分析这个api或者关键字实现了什么，拥有什么功能，如果对其原理认识不到时，也不能达到一比一还原

先将我们传进来的被指向的目标转换为对象
将要执行的函数赋到对象上
执行对向上的函数并把传入的参数传进去
下面我们看代码：

Function.prototype.mycall = function(test,...arr){
    if(test ===undefined || test === null){
        test = window 
    }else{
        test = Object(test)
    }
    const func = Symbol('call')
    test.func = this
    let result = test.func(...arr)
    console.log(this);
    delete test.func
    return result
}

手写apply

apply与call用法一样，都是执行并改变this指向，为一不同的时传参时apply传的是一个数组，call传入的多个实参要用逗号隔开，下面我们看代码

Function.prototype.myapply = function(fn,...args){
     console.log(typeof fn);
     if(fn == undefined || fn == null){
         fn = window
     }else{
         fn = Object(fn)
     }
     const func= Symbol('apply')
     fn[func] = this
     let res = fn[func](...args)
     delete fn.func   
     return res
 }

手写bind

Function.prototype.bind = function (context, ...args) {
	if(context == undefined || context == null){
	   context = window
	}else{
	   context = Object(context )
	}
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;

  return function (..._args) {
    args = args.concat(_args);

    context[fnSymbol](...args);
    delete context[fnSymbol];   
  }
}