call，apply，bind区别及使用场景？call继承

总结

call（）： 第一个参数是要改变的this的指向，第二个参数是调用这个函数时所传的参数

fn.call(obj,1,2)

apply（）：第一个参数是要改变的this的指向，第二个参数是一个数组

fn.apply(obj,[1,2])

bind（）：只有一个参数，为改变this的指向，返回一个新函数需要重新调用

let f = fn.bind(obj，1，2)

f()

常用于：全局函数调用call、对象方法调用call、基于call的继承、多重继承、call的引用，防抖

 使用场景

1.call是一个函数的方法，call可以可以改变函数中this的指向(重要概念)

function fun() {
  console.log("hello world");
}
//call可以调用函数,
fun.call()//调用后输出hello world

function fun() {
  console.log(this.name);//指向window
}
let cat = {
  name: "喵喵"
}
//call可以可以改变函数中this的指向
fun.call(cat)

2.call希望实现喵喵

let dog = {
  name: "阿旺",
  sayName() {
    console.log("我是" + this.name);
  }
}

let cat = {
  name: "喵喵"
}
//call可以可以改变函数中this的指向
dog.sayName()//输出我是阿旺
// 希望实现喵喵
dog.sayName.call(cat)//输出我是喵喵

 3.加参数

// 再加点参数
let dog = {
  name: "阿旺",
  sayName() {
    console.log("我是" + this.name);
  },
  eat(food1, food2) {
    console.log("我喜欢吃" + food1 + food2);

  }
}

let cat = {
  name: "喵喵"
}
//call可以可以改变函数中this的指向
dog.eat("骨头") //毫无疑问输出 我喜欢吃骨头
dog.eat.call(cat) //输出 我喜欢吃undefined，因为没有传参
dog.eat.call(cat, "鱼", "肉") //输出 我喜欢吃鱼肉
//call第一个参数就是改变this的对象，第二个是要传递的参数

// 传两个参数在eat里面写food2，call继续往后面传参数"肉"

4.apply，bing用法

// 会了call,那么apply就简单了，用法完全一样
//唯一区别传参不一样apply传的的参数是数组
dog.eat.apply(cat, ["鱼", "肉"])//输出 我喜欢吃鱼肉
//bind用法传参方式和call一模一样，
dog.eat.bind(cat, "鱼", "肉")//返回空
//区别bind不会调用函数，而call会调用函数,bind会作为一个函数返回值，返回出来
let fun = dog.eat.bind(cat, "鱼", "肉")//赋值给fun
fun() //调用后 输出我喜欢吃鱼肉 ,可以多次调用

用call实现继承以及多重继承

基础模板

function Animal() {
  this.eat = function () {
    console.log("吃美食");

  }
}
let animal = new Animal()
animal.eat()//输出吃美食

实现Cat继承Animal， Bird方法

function Animal() {
  //this指向小cat1
  this.eat = function () {
    console.log("吃美食");

  }
}
//call好处可以实现多重继承
function Bird() {
  this.fly = function () {
    console.log("飘扬");
  }
}

function Cat() {
  //this指向小cat1
  Animal.call(this);
  Bird.call(this);//想调用Brid上的飘扬也要定于一下
  this.sayName = function () {
    console.log("自己的名字");

  }
}

let cat1 = new Cat()
cat1.eat()//输出吃美食
cat1.sayName()//输出自己的名字
cat1.fly()//输出飘扬