手撸call apply bind

韩小韩
2023-03-24 / 4 评论 / 2,820 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年04月19日,已超过379天没有更新,若内容或图片失效,请留言反馈。

实现call(其实只有2行代码)

/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */
const obj = { name: '我是需要被绑定改变this指向的对象' }
/* 需要改变this指向的函数,没有使用call时,this指向window */
function fn(arg) {
    console.log('fn---------', this);
    console.log('fn---------', arg);
}
/* 
 * 
 * 重写call方法
 * target 需要把this改变到哪个目标
 * args 传递进来的参数
 */
Function.prototype.call = function (target, ...args) {
    /* 这里的this就指向上面的fn函数 */
    console.log(this);
    /* 随便定义一个变量,用于在目标对象里存fn函数,这里使用symbol更好 */
    target['sb250'] = this
    /* 这样target目标上就有个sb250的属性,并且属性值就是fn函数 */
    console.log(target);
    /* 调用这个sb250,并把参数传入进去就实现this改变了 */
    target['sb250'](args)
    /* 防止给target上多出多余没用的参数,在将sb250删除掉 */
    delete target['sb250']
}
fn.call(obj, '我是傻逼')

实现bind

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

/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */
const obj = { name: '我是需要被绑定改变this指向的对象' }
/* 需要改变this指向的函数,没有使用call时,this指向window */
function fn(arg) {
    console.log('fn---------', this);
    console.log('fn---------', arg);
}
/* 
 * 
 * 重写call方法
 * target 需要把this改变到哪个目标
 * args 传递进来的参数
 */
Function.prototype.bind = function (target) {
    target['sb250'] = this
    /* 这里使用高阶函数接收参数 */
    return (...args) => {
        target['sb250'](args)
        delete target['sb250']
    }
}
fn.bind(obj)('我是大傻逼!!!')
0

评论 (4)

取消
  1. 头像
    shimmer
    Mac OS X 10.15.7 Mac OS X 10.15.7 / Google Chrome Google Chrome 中国北京市联通

    测试文章评论是否会同步到评论页

    回复
    1. 头像
      韩小韩 作者
      Windows 10 Windows 10 / Google Chrome Google Chrome 中国江苏省徐州市电信
      @ shimmer

      IP已拉黑

      回复
  2. 头像
    骑着蚂蚁追大象
    Windows 10 Windows 10 / Google Chrome Google Chrome 中国广东省佛山市联通

    作者好,想请教下你那个 每天60秒读懂世界 的头部图片是怎么获取或者生成的? 可以付费请教吗 加你qq了

    回复
    1. 头像
      韩小韩 作者
      Windows 10 Windows 10 / Google Chrome Google Chrome 中国江苏省徐州市电信
      @ 骑着蚂蚁追大象

      自己学一下PHP图片生成就好咯~

      回复