手动实现前端的call函数

64 阅读1分钟

手动实现call函数

先分析一波,call函数的特征

1、能改变this的指向

2、传递的参数是fn.call(this,arg1,arg2...)

3、会返回函数运行结果

核心代码

Function.prototype.myCall = function (context) {
    //call函数的第一个参数
    context = context || window;
    
    //将要运行的函数,添加到context上,有一个属性
    context.fn = this;
    
    //arguments是一个类数组,可以获取函数所有的参数,
    let args = [...arguments].slice(1);
    
    //调用需要运行的函数,得到最新的结果
    //这里this的指向已经改变了,因为this指向它的调用者
    let result = context.fn(...args);
    
    //删除我们刚才添加的属性
    delete context.fn;
    return result;
    
  }

测试代码

<script>

  

  var person = {
    firstName: "z",
    lastName: "3",
    fullName: function (txt) {
      console.log(txt + this.firstName + " " + this.lastName);
    }
  }
  var person1 = {
    firstName: "John",
    lastName: "Doe"
  }
  person.fullName("Hello, ") // Hello, z 3
  person.fullName.myCall(person1, "Hello, ") // Hello, John Doe

</script>