封装call,apply,bind方法

封装call方法

 /*
    call方法的作用:
        1.修改内部this指向
        2.可以接收数据
        3.让函数立马执行

*/
function test(){
    console.log(this,arguments)
}

var obj1 = {
    name:'haohua'
}
var obj2 = {
    name:'豪华'
}
       
Function.prototype.myCall = function(){
    let [context,...args] = arguments
    // console.log(this,context,args) 
    context = context||window  //防止不传参时报错
    //this-->test   context-->obj args-->除obj之外的实参
    context.__proto__.xxx = this    //如果是原始值 2.__proto__
    context.xxx(...args)//传参
    delete context.__proto__.xxx; //删除这个属性
}
// test.call(obj1,12,23)
test.myCall(obj2,12,23)

call和apply的区别是一个可以传多个参数,一个只能传一个参数,并且只能传数组;

封装apply方法

/*
         apply方法的作用:
             1.修改内部this指向
             2.可以接收数据
             3.让函数立马执行
             4.无返回值
     
     */
     function test(){
         console.log(this,arguments)
     }

     var obj1 = {
         name:'haohua'
     }
     var obj2 = {
         name:'豪华'
     }
    
     Function.prototype.myApply = function(){
         let [context,args] = arguments
         // console.log(this,context,args) 
         context = context||window //不传对象默认指向window
         args = args||[] //防止不传报错
         //this-->test   context-->obj2 args-->除obj之外的实参
         context.__proto__.xxx = this    //如果是原始值 2.__proto__
         context.xxx(...args)
         delete context.__proto__.xxx    //删除xxx函数  避免对象的隐式原型被污染
     }
     test.apply(obj1,[1,2,3])
     test.myApply(obj2,[4,5,6])

…age 扩展运算符返回的是一个数组

封装bind方法

/*
          bind方法的作用:
              1.不会自动执行函数  
              2.会返回一个新函数
              3.可以修改函数this指向 并且还可以传递参数
            
      
      */
      function test(){
          console.log(this,arguments)
      }

      var obj1 = {
          name:'haohua'
      }
      var obj2 = {
          name:'豪华'
      }

      Function.prototype.myBind = function(){
          let [context,...outerArgs] = arguments  //outerArgs --> [12,23]
    //参数的指向
          // context --> obj2  this --> test
          // console.log(context,outerArgs)/
          return (...innerArgs)=>{  //innerArgs--> [1,2,3]
              // console.log(innerArgs)
              
              //合并两次传过来的参数
              // this.call(context,...outerArgs,...innerArgs)
              this.apply(context,outerArgs.concat(innerArgs))
          }
      }
      
      var result1 = test.bind(obj1,10,20)   //bind函数返回的是一个函数
      result1(1,2,3)
      var result2 = test.myBind(obj2,30,40)
      result2(5,6,7)