call，apply，bind的区别以及应用

call，apply，bind的区别以及应用

一、call和apply,bind可以修改this的指向

• 但是bind比较特殊 详解在下面第二条

let obj1 = {
  name: "彭于晏",
  sayHello: function () {
    console.log('Hello '+this.name);
  }
}
let obj2 = {
  name:'胡歌'
}
obj1.sayHello()
// 结果为 Hello 彭于晏
// 使用call改变this指向
obj1.sayHello.call(obj2)
obj1.sayHello.apply(obj2)
// 结果为 Hello 胡歌

二、call，apply，bind的区别

1.参数的区别

• call,apply,bind传参
  • call(this,参数1,参数2,参数3…)
  • apply(this,[参数1,参数2,参数3…])
  • bind(this,参数1,参数2,参数3…)

很明显，bind和call传参数是一样的按照顺序依次传参，apply的传参则是以数组形式按照顺序依次传参

2.用法的区别

• call和apply使用会改变函数的this指向并执行函数
• bind也可以改变this指向但是返回的是一个方法，需要使用()调用

let obj1 = {
  name: "彭于晏",
  sayHello: function (Russian,Pakistan) {
    console.log('Hello '+this.name,Russian+' '+this.name,Pakistan+' '+this.name);
  }
}
let obj2 = {
  name:'胡歌'
}
obj1.sayHello()
// 结果为 Hello 彭于晏
// 使用call改变this指向
obj1.sayHello.call(obj2,'乌拉','萨拉姆')
obj1.sayHello.apply(obj2,['乌拉','萨拉姆'])
// 结果为 Hello 胡歌 乌拉 胡歌 萨拉姆 胡歌
let bind1 = obj1.sayHello.bind(obj2, '乌拉', '萨拉姆')
bind1()
// 结果为 Hello 胡歌 乌拉 胡歌 萨拉姆 胡歌

三、call、apply、bind1的实际应用

子类可以继承父类的方法

• 以call方法为例

function Animal() {
  this.eat = function () {
    console.log('吃东西');
  }
}
function Cat() {
  // 使用call修改this指向实现继承
  Animal.call(this)
}
let cat = new Cat()
cat.eat()
// 结果为 吃东西

实现多重继承

function Animal() {
  this.eat = function () {
    console.log('吃东西');
  }
}
function Fly() {
  this.fly = function () {
    console.log('飞翔');
  }
}
function Cat() {
  // 使用call修改this指向实现继承
  Animal.call(this)
  Fly.call(this)
}
let cat = new Cat()
cat.eat()
// 结果为 吃东西
cat.fly()
// 飞翔