重构内置类Function原型上的call方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了重构内置类Function原型上的call方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

重构内置类Function原型上的call方法

// => 重构内置类Function原型上的call方法
~(function () {
  /**
   * call: 改变函数中的this指向
   *  @params
   * 	 context 可以不传递，传递必须是引用类型的值，因为后面要给它加 fn 属性
   **/
  function myCall(context) {
    // => context: call方法中的第一个参数 => 执行上下文/执行主体，即this的指向
    // => this: fn
    context = context || window;
    let args = [],
      ret = null; // => args要存方法执行时传入的除第一个参数后的所有参数，ret用来接收函数执行返回的结果
    for (var i = 1; i < arguments.length; i++) {
      args.push(arguments[i]);
    }
    context.foo = this; // => 为对象添加 foo 方法, this指向调用myCall的函数
    ret = context.foo(...args); // => 函数执行, ...扩展运算符把数组中的每一项展开
    delete context.foo; // => 删除添加的方法(到这一步foo已经没用了)
    return ret;
  }
  Function.prototype.call = myCall; // => 扩展到内置类的原型上
})();

// => 验证
let obj = {
  name: "obj name",
};
function fn(n, m) {
  console.log(this);
  return n + m;
}
fn(); // => this: window
fn.call(obj, 100, 200); // this: obj

代码优化：

~(function () {
  function myCall(context = window) {
    context.foo = this;
    let args = [...arguments].slice(1),
      ret = context.foo(...args);
    delete context.foo;
    return ret;
  }
  Function.prototype.call = myCall;
})();

希望给你们带来帮助，有更好的方法也希望发出来呦，期待你们的指点文章来源地址https://www.toymoban.com/news/detail-636884.html

到了这里，关于重构内置类Function原型上的call方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！