web前端必做笔记之一：call，apply，bind基本语法

欢迎大家来到IT世界,在知识的湖畔探索吧!

web前端必做笔记之一：call，apply，bind基本语法

call可以调用函数，call可以改变函数中this指向

javascript

function fun(){

console.log(“hello world”);

};

// call可以调用函数，call可以改变函数中this指向

fun.call() // hello world;

javascript

function fun(){

console.log(this.name);

};

let cat = {

name:”喵喵”

}

fun.call(cat) ////让函数中的this指向cat,所以输出”喵喵”

let dog = {

name:”旺财”,

sayName(){

console.log(“我是” + this.name);

}

}

dog.sayName(); //这样输出就是”我是旺财” 如果要实现输出”我是喵喵”？

dog.sayName.call(cat); //这样就可以让猫去用狗的sayName,所以输出”我是喵喵”

javascript

let dog = {

name:”旺财”,

sayName(){

console.log(“我是” + this.name);

},

eat(food){

console.log(“我喜欢吃” + food)

}

}

dog.eat(“骨头”); // 这个肯定输出我喜欢吃骨头，让猫来调

dog.eat.call(cat); // 这里会会输出我喜欢吃undefined,因为这里我没有传参,那怎么传参呢？

dog.eat.call(cat,”鱼”); //会输出我喜欢吃鱼， call的第一个参数是你要改变this的对象，往后的参数就是你要传的参数，call的参数就是你要给eat传的参数;

//当我们要传两个参数呢？

let dog = {

name:”旺财”,

sayName(){

console.log(“我是” + this.name);

},

eat(food1,food2){

console.log(“我喜欢吃” + food1 + food2)

}

}

dog.eat.call(cat,”鱼”,”肉”); //这时会输出“我喜欢吃鱼肉”;

javascript

//apply用法, 与call相比传参的方式不同

dog.eat.apply(cat,[“鱼”,”肉”]); //这时会输出“我喜欢吃鱼肉”;

//bind用法

dog.eat.bind(cat,”鱼”,”肉”); //什么都没输出,为啥什么都没输出？

//这就是bind和call的区别，bind不会调用这个函数，而call会调用这个函数

//bind作用:它会把一个函数作为返回值返回出来，与call传参方式一样

let fun = dog.eat.bind(cat,”鱼”,”肉”); //赋值给fun

fun(); //”我喜欢吃鱼肉”

call，apply，bind基本语法总结：

1.call和apply会调用函数，可以改变函数中this指向

区别在于:传参的方式不同

2.call和bind,传参的方式完全一样

区别在于:call会直接调用，而bind它会作为一个返回值返回一个函数然后

才能够调用。