如何改变 this 指向?bind 和 apply 和 call 的区别?手写apply bind call函数

手写js功能实现 专栏收录该内容
6 篇文章 0 订阅

参考:改变this指针的apply,call,bind的区别
2019前端面试系列——JS高频手写代码题

总结:

  1. apply、call、bind三者都是用来改变函数的this对象的指向的;
  2. apply、call、bind三者第一个参数都是this要指向的对象,也就是想指定的上下文
  3. apply、call、bind三者都可以利用后续参数传参
  4. bind是返回对应函数,便于稍后调用;apply、call则是立即调用
  5. apply和call完全一样,只是接收参数的方式不太一样,call是把参数按顺序传进去,而apply则是把参数放在数组里

1、手写apply()

Function.prototype.myappply = function(context) {
  if (typeof this != 'function') {
    throw new TypeError('not function');
  }
  context = context || window;
  context.fn = this;
  let result;
  if (arguments[1]) {
    result = context.fn(...arguments[1]);
  } else {
    result = context.fn();
  }
  delete context.fn;
  return result;
}

2、手写call()

Function.prototype.mycall = function(context) {
  if (typeof this != 'function') {
    throw new TypeError('not function');
  }
  context = context || window;
  context.fn = this;
  let arg = [...arguments].slice(1);
  let result = context.fn(...arg);
  return result;
}

3、手写bind

参考:手写bind()函数,理解MDN上的标准Polyfill
Javascript中bind()方法的使用与实现
对于bind的解释:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入bind()方法的第一个参数作为this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

涉及到柯里化,等下来补充

Function.prototype.mybind = function(context) {
  if (typeof this != 'function') {
    throw new TypeError('Error');
  }
  let _this = this;
  let arg = [...arguments].slice(1);
  return function F() {
    // 处理函数使用new的情况 
    if (this instanceof F) {
      return new _this(...arg, ... arguments);
    } else {
      return _this.apply(context, arg.concat(...arguments))
    }
  }
}
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值