JS手写apply,call,bind函数

本篇文章咱们来手写简易版的apply,call,bind函数。

实现思路

首先咱们需要思考下这三个函数放到哪里比较合适,因为这三个函数是被函数对象调用的,并且每个函数都可以调用,所以不难想到有一个位置非常合适,函数的显式原型对象上,这样就可以通过原型链被每个函数调用。

手写apply

apply函数可以传入两个参数,第一个参数是需要绑定的this对象,第二个参数是传递给函数的参数组成的数组,咱们可以从apply函数的用法倒推它的代码实现。

首先声明一个foo函数,作为测试函数,代码如下图:

之后在函数的显式原型对象上声明一个myapply函数,代码如下图:

第一个参数是执行apply函数后调用函数的对象,为了确保传入的内容是个对象,咱们需要对传入的第一个参数进行判断和处理,代码如下图:

之后咱们需要修改this指向,myapply本身也是个函数,调用者就是使用myapply的函数对象,也就是说此时的this就是调用myapply的函数对象,咱们就可以借助this来建立newObj与调用myapply的函数对象之间的调用关系,代码如下图:

上图可见,在newObj上添加一个fn属性值为调用myapply函数的函数对象,然后执行fn,调用fn后删除newObj上多余的fn属性。

第二个参数是参数构成的数组,可以通过解构的方式获取这些参数,代码如下图:

这样咱们就实现了自己的apply函数。

手写call

call和apply第一个参数接收的内容一致,call的后续参数通过参数列表的方式传入,实现思路与apply一样,只是接收参数的方式不同,区别如下图:

其他的代码与myapply函数一样。

手写bind

bind的函数的第一个参数接收的内容与apply和call一致,后续参数也是通过参数列表的方式传入,不过bind的内部实现不同之处在于,bind返回了一个具有所需this指向的新函数,代码如下图:

其他的代码与mycall函数一样。

完整代码

javascript 复制代码
function foo(name, age) {
    console.log(this, name, age);
}

Function.prototype.myapply = function(newObj, args) {
    newObj = (newObj === null || newObj === undefined) ? window : Object(newObj);

    newObj.fn = this;
    newObj.fn(...args);

    delete newObj.fn;
}

Function.prototype.mycall = function(newObj, ...args) {
    newObj = (newObj === null || newObj === undefined) || Object(newObj);

    newObj.fn = this;
    newObj.fn(...args);

    delete newObj.fn;
}

Function.prototype.mybind = function(newObj, ...args) {
    newObj = (newObj === null || newObj === undefined) ? window : newObj;
    newObj.fn = this;

    return () => {
        newObj.fn(...args);
    }
}

foo.myapply({ name:"guanju"}, ["test", 18])
foo.mycall({ name:"guanju"}, "test", 18);
const foo1 = foo.mybind({ name:"guanju"}, "test", 18);
foo1()
相关推荐
Cacciatore->32 分钟前
Electron 快速上手
javascript·arcgis·electron
vvilkim40 分钟前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
不想写bug呀2 小时前
多线程案例——单例模式
java·开发语言·单例模式
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
我不会写代码njdjnssj2 小时前
网络编程 TCP UDP
java·开发语言·jvm
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子3 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边3 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js