【JS面试题】call - apply - bind

推荐哔站一个老师的视频讲解，非常详细易懂，5分钟学会！前端面试题：call、apply、bind的基本概念

这三个都是函数的方法，用来改变函数中的this指向！

关于call的使用：（3个方法类似，学习call，总结区别即可）

① 调用不需要传参数的函数（ fun.call(cat); ）

// 定义一个fun函数
function fun(){
    console.log(this.name);
}
// 定义一个cat对象
let cat = {
    name: '喵喵'
}
// call可以调用函数，call可以改变函数中的this指向
// 参数cat表示想要fun函数的this指向哪个对象，这里指向cat对象
fun.call(cat);  // 输出：喵喵

② 调用需要传递参数的函数 （ dog.eat.call(cat,'鱼','肉'); ）

// 定义一个dog对象
let dog = {
    name: '汪汪',
    eat(food1,food2){
        console.log('我喜欢吃'+food1+food2);
    }
}
// 定义一个cat对象
let cat = {
    name: '喵喵'
}

// 直接调用eat函数
dog.eat('骨头','汤');  // 输出：我喜欢吃骨头汤

// 使用call调用函数，改变this指向，指向cat
// 第一个参数cat表示：想要函数eat的this指向cat对象；
// 之后的参数表示：eat函数需要传递的参数
dog.eat.call(cat,'鱼','肉');  // 输出：我喜欢吃鱼肉

总结：

call 和 apply 和 bind，用来改变函数的this指向；

三者的区别：

① call

dog.eat.call(cat,'鱼','肉');

② apply

dog.eat.apply(cat,['鱼','肉']); // 参数传递的方式不一样，apply需要以数组的方式进行传递

③ bind

let fun = dog.eat.bind(cat,'鱼','肉'); //  bind不会自动调用eat函数，需要手动调用

fun();