js中的call,apply与bind

call,apply,bind都是一种方法。

一，call()

①：call() 是可以 调用函数的。

function fn() {
  console.log(12)
}

fn.call()   // 12

 

②：通过给call() 内部传参，可以改变 this指向。

let Dog = {
  name: '旺财',
  sayName() {
    console.log(this.name)
  },
}

let Cat = {
  name: '喵喵',
}

Dog.sayName.call(Cat)   //喵喵

③：如果给 call() 内部传递多个参数，那么第一个默认为 改变 this 的参数，后面为传给函数的参数。

let Dog = {
  name: '旺财',
  sayName() {
    console.log(this.name)
  },
  eat(food1, food2) {
    console.log(this.name + '吃的食物是：' + food1 + ',' + food2)
  },
}

let Cat = {
  name: '喵喵',
}
Dog.eat.call(Cat, '鱼', '骨头')
//喵喵吃的食物是：鱼,骨头

第十四行中call()的第一个参数，改变 this 指向，所以 this.name 为‘喵喵’，后面的连个参数为传递给 Dog中eat方法的参数。

二：apply()

apply() 与call() 类似，唯一的区别便是，在十四行传递参数时，后面的传递的参数写到了数组里面。

//call() 方法 传参数
Dog.eat.call(Cat, '鱼', '骨头')

//apply()方法传参数
Dog.eat.apply(Cat, ['鱼', '骨头'])

三：bind()

bind()传递参数和call()方法一样，只是不会立即执行函数，而是会返回一个函数。

let Dog = {
  name: '旺财',
  sayName() {
    console.log(this.name)
  },
  eat(food1, food2) {
    console.log(this.name + '吃的食物是：' + food1 + ',' + food2)
  },
}

let Cat = {
  name: '喵喵',
}
let fn1 = Dog.eat.bind(Cat, '鱼', '骨头')
 fn1()
//喵喵吃的食物是：鱼,骨头

 

大家只要牢记记住 call()方法怎么使用，然后小推一下就能明白 apply() 与bind()的用法了。

 

实际应用场景： 

可以通过 this 的指向，进行函数方法的继承 .可以进行单个或者多个继承。

function Animal() {
  this.say = function () {
    console.log('我能说话')
  }
}
function Fly() {
  this.fly = function () {
    console.log('我能飞')
  }
}

function Cat() {
  // Cat 的this指向为cat
  Animal.call(this)
  //Animal 中的 this 指向也为 cat
  Fly.call(this)
//同理 Fly中的 this 也指向了 cat
}
let cat = new Cat()
cat.say()
cat.fly()

 

感谢观看！如果错误，还望指出。