js中call和apply的实现原理

时间:2023-02-10 14:49:08

js中call和apply的实现原理           

实现call的思路:

/*
  还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法
   (我门可以查看自己的方法的原型链上的也就是
    方法名.__proto__==Function.prototype 自己定义的构造函数通过原型链可以找到原型 Function.prototype中就有call方法 )
   那我门就在Function.prototype中定义一个自己的方法实现call的功能
*/
   Function.prototype.myCall = function() {
 
    /* 先接受参数把对象和参数区分开 center:对象 arg:参数 */
    let [center, ...arg] = [...arguments]
 
    /* 重点 用传递过来的对象 添加一个属性赋值为this(这是我感觉最神奇的地方 后面通过隐式绑定) */
    center.that = this;
 
     /* 然后执行调用call这个方法的对象 */
     /* js中有谁调用的this 就指向谁->this的隐式绑定 然后接收执行的结果 */
    let result = center.that(...arg)
 
    /* 这句话 就是隐式绑定 center.that(...arg) <==>this.(...arg) 这两句话等同
    在这个函数中this指向的是调用call的这个方法 就是应为Person.call 导致this指向了 Person
    同样的方法通过 center.that让this指向了center
    这个that属性是自己为了储存调用call的对象的 在原来的对象中是没有这个属性的所有要删除这个属性
    不删除的话可以看到that中的结构式Person对象  影响继承的结构
    */
    delete center.that return result;
  }
 

实现apply的思路:

apply和call的区别是参数的传递方式不一样apply的第二个参数式一个数组

实际应用

Function.prototype.myCall = function() {
    let [center, ...arg] = [...arguments]
    center.that = this;
    let result = center.that(...arg)
    delete center.that
    return result;
}
 
  function Person() {
    this.firstname = 'Join'
    this.say = function() {
      console.log(`my name is: ${this.firstname} ~${this.listname}`)
    }
   }
 
  function Baby(name) {
    this.listname = name Person.myCall(this, this.name)
  }
 
  let a = new Baby('inter')