Bootstrap

【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();

;