1、基本使用

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

• call

// fn.call(this,params1,params2)  第一個(gè)參數(shù)指定this ，第二個(gè)往后依次是參數(shù)傳過(guò)來(lái)的參數(shù)
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一樣，就是后面的參數(shù)格式不一樣，多個(gè)參數(shù)用數(shù)據(jù)傳遞
function fn(pars){
  console.log(this.foo)  //bar
  console.log(pars)   // [ 'par1', 'par2' ]
}
const obj = {
  foo:'bar'
}
fn.call(obj,['par1','par2'])

• bind

//bind 函數(shù)不會(huì)變馬上調(diào)用  而是返回this被改變的新函數(shù)
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、手動(dòng)實(shí)現(xiàn)

• call

Function.prototype.cl = function(context, ...params) {
  if (typeof context === 'object') {
    // 綁定當(dāng)前方法
    context.fn = this
  } else {
    context.fn = null
  }
  // 調(diào)用當(dāng)前方法
  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') {
    // 綁定當(dāng)前方法
    context.fn = this
  } else {
    context.fn = null
  }
  // 調(diào)用當(dāng)前方法
  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') {
    // 綁定當(dāng)前方法
    context.fn = this
  } else {
    context.fn = null
  }
  // 調(diào)用當(dāng)前方法
  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')