前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手撸实现 call apply bind 原型函数

手撸实现 call apply bind 原型函数

作者头像
骤雨重山
发布2022-01-17 10:12:59
1990
发布2022-01-17 10:12:59
举报
文章被收录于专栏:骤雨重山

今天 Joe 老板又给我补课了,他问我call apply bind会用吗,我说会,他又说,把原型函数实现给我写一下,我一下懵逼了,原理,他是来羞辱我的,经过一下午的不懈努力,Joe 老板终于教会了我。

实现call

call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表。当第一个参数为null、undefined的时候,默认指向window。

call传参时,是传入1个或多个参数,所以,需要用...展开

代码语言:javascript
复制
/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */
const obj = { name: '我是需要被绑定改变this指向的对象' }
/* 需要改变this指向的函数,没有使用call时,this指向window */
function fn(a, b) {
    console.log(`This 现在指向  ${this}`);
    console.log(`传入的 a 是 ${a} -------  b 是 ${b}`);
}
/* 
 * 
 * 重写call方法
 * _this 需要把this改变到哪个目标
 * vvhan_com 传递进来的参数
 */
Function.prototype.call = function (_this, ...vvhan_com) {
    /* 创建一个 Symbol call */
    const call = Symbol();
    /* 给传入的对象 _this 添加call元素为 this(此处this为 fn 函数体) */
    _this[call] = this
    /* 执行 _this对象 中的 call 函数,并传入参数 vvhan_com */
    _this[call](...vvhan_com);
    /* 最后删除 _this对象 中的call元素 */
    delete _this[call];
}
fn.call(obj, 1,2);

实现apply

apply接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组。当第一个参数为null、undefined的时候,默认指向window。

apply传参时,是传入一个数组,数组里面是参数,所以,不需要用...展开

代码语言:javascript
复制
/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */
const obj = { name: '我是需要被绑定改变this指向的对象' }
/* 需要改变this指向的函数,没有使用apply时,this指向window */
function fn(a, b) {
    console.log(`This 现在指向  ${this}`);
    console.log(`传入的 a 是 ${a} -------  b 是 ${b}`);
}
/* 
 * 
 * 重写apply方法
 * _this 需要把this改变到哪个目标
 * vvhan_com 传递进来的参数
 */
Function.prototype.apply = function (_this, vvhan_com) {
    /* 创建一个 Symbol apply */
    const apply = Symbol();
    /* 给传入的对象 _this 添加apply元素为 this(此处this为 fn 函数体) */
    _this[apply] = this
    /* 执行 _this对象 中的 apply 函数,并传入参数 vvhan_com */
    _this[apply](...vvhan_com);
    /* 最后删除 _this对象 中的apply元素 */
    delete _this[apply];
}
fn.apply(obj, [1, 2]);

实现bind

和call很相似,第一个参数是this的指向,从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。 bind返回值是函数

因为bind的调用方式,是返回一个新函数,在调用一次,例如:fn.bind(null)(options),所以需要用到高阶函数

代码语言:javascript
复制
/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */
const obj = { name: '我是需要被绑定改变this指向的对象' }
/* 需要改变this指向的函数,没有使用bind时,this指向window */
function fn(a, b) {
    console.log(`This 现在指向  ${this}`);
    console.log(`传入的 a 是 ${a} -------  b 是 ${b}`);
}
/* 
 * 
 * 重写bind方法
 * _this 需要把this改变到哪个目标
 * vvhan_com 传递进来的参数
 */
Function.prototype.bind = function (_this, ...vvhan_com) {
    /* 创建一个 Symbol bind */
    const bind = Symbol();
    /* 给传入的对象 _this 添加bind元素为 this(此处this为 fn 函数体) */
    _this[bind] = this
    /* 返回函数 并传入参数 这里使用高阶函数接收参数 */
    return function (...vvhan_com_) {
        /* 判断参数传入点 并执行 */
        _this[bind](...vvhan_com_.length > 0 ? vvhan_com_ : vvhan_com);
        /* 最后删除 _this对象 中的bind元素 */
        delete _this[bind];
    }
}
fn.bind(obj, 1, 2);

fn.bind(obj)(1, 2);

最后总结

相同点

call、apply、bind的作用都是改变函数运行时this的指向,bind返回对应函数=>便于稍后调用; apply, call则是立即调用。

区别点

apply 和 call 的用法几乎相同, 唯一的差别在于:当函数需要传递多个变量时, apply 传入一个数组作为参数输入, call 则是接受一系列的单独变量。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-06-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现call
  • 实现apply
  • 实现bind
  • 最后总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档