手写call，apply，bind方法【前端面试系列】_手写一个call、apply、bind面试-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45487080/article/details/123236715

这篇博客介绍了如何使用JavaScript重写原生的call、apply和bind方法。通过创建一个唯一key并将其与函数绑定到指定上下文中，实现了函数调用的不同方式。同时，确保了当传入null或undefined时，this指向window，并在调用后清理上下文。这些方法在处理函数上下文和参数传递时非常有用。

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

我在这里就不讲解这三个API的用法了，有需要请自行查看MDN文档

call

Function.prototype.myCall = function(context, ...args) {
	if (typeof this !== 'function') {
      	throw new TypeError('Error')
    }
	context = context ?? window // 传进来的是null和undefined时将this指向为window
    context = Object(context) // 确保传进来的是Object
	// 生成一个唯一的key值，防止和传进来的对象的key重复
    const key = Symbol()
    context[key] = this
    const result = context[key](...args)
    delete context[key] // 删除手动添加的属性，使context回到最初的样子
    return result
}

apply

Function.prototype.myApply = function (context, arrs) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    context = context ?? window // 传进来的是null和undefined时将this指向为window
    context = Object(context) // 确保传进来的是Object
    // 生成一个唯一的key值，防止和传进来的对象的key重复
    const key = Symbol()
    context[key] = this
    const result = arrs ? context[key](...arrs) : context[key]()
    delete context[key] // 删除手动添加的属性，使context回到最初的样子
    return result
}

bind

Function.prototype.myBind = function(context, ...args1) {
	if (typeof this !== 'function') {
      	throw new TypeError('Error')
    }
    return (...args2) => {
		context = context ?? window // 传进来的是null和undefined时将this指向为window
	    context = Object(context) // 确保传进来的是Object
		// 生成一个唯一的key值，防止和传进来的对象的key重复
	    const key = Symbol()
	    context[key] = this
	    const result = context[key](...args1, ...args2)
	    delete context[key] // 删除手动添加的属性，使context回到最初的样子
	    return result
	}
}