重构内置类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;
})();

希望给你们带来帮助,有更好的方法也希望发出来呦,期待你们的指点

你可能感兴趣的:(重构,javascript,前端)