JavaScript中的call、apply、bind的使用和手动实现

1、基本使用

call、apply、bind都是改变this的指向

• call

// fn.call(this,params1,params2)  第一个参数指定this ，第二个往后依次是参数传过来的参数
function fn(par1,par2){
  console.log(this.foo)  //bar
  console.log(par1)   //par1
  console.log(par2)   //par2
}
const obj = {
  foo:'bar'
}
fn.call(obj,'par1','par2') 

• apply

//apply的用法跟call一样，就是后面的参数格式不一样，多个参数用数据传递
function fn(pars){
  console.log(this.foo)  //bar
  console.log(pars)   // [ 'par1', 'par2' ]
}
const obj = {
  foo:'bar'
}
fn.call(obj,['par1','par2'])

• bind

//bind 函数不会变马上调用  而是返回this被改变的新函数
function fn(par1,par2){
    console.log(this.foo)  //bar
    console.log(par1)   // 'par1'
    console.log(par2)   // 'par2'
  }
  const obj = {
    foo:'bar'
  }
  let newArr = fn.bind(obj,'par1','par2') 
  newArr()

2、手动实现

• call

Function.prototype.cl = function(context, ...params) {
  if (typeof context === 'object') {
    // 绑定当前方法
    context.fn = this
  } else {
    context.fn = null
  }
  // 调用当前方法
  context.fn(...params)
  delete context.fn
}

const obj = { foo: 'bar' }

function fn(p1, p2) {
  console.log(this.foo)
  console.log(p1, p2)
}
fn.cl(obj, 'p1', 'p2')

• apply

Function.prototype.cl = function(context, ...params) {
  if (typeof context === 'object') {
    // 绑定当前方法
    context.fn = this
  } else {
    context.fn = null
  }
  // 调用当前方法
  context.fn(...params)
  delete context.fn
}

const obj = { foo: 'bar' }

function fn(p1, p2) {
  console.log(this.foo)
  console.log(p1, p2)
}
fn.cl(obj, 'p1', 'p2')

• bind

Function.prototype.cl = function(context, ...params) {
  if (typeof context == 'object') {
    // 绑定当前方法
    context.fn = this
  } else {
    context.fn = null
  }
  // 调用当前方法
  context.fn(...params)
  delete context.fn
}

const obj = { foo: 'bar' }

function fn(p1, p2) {
  console.log(this.foo)
  console.log(p1, p2)
}
Function.prototype.bd = function(context){
  return (...params)=>{
    this.cl(context,...params)
  }
}
fn.bd(obj)('p1','p2')