web前端必做笔记之一:call,apply,bind基本语法
call可以调用函数,call可以改变函数中this指向
<script>
function fun(){
console.log("hello world");
};
// call可以调用函数,call可以改变函数中this指向
fun.call() // hello world;
</script>
<script>
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,所以输出"我是喵喵"
</script>
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,"鱼","肉"); //这时会输出“我喜欢吃鱼肉”;
</script>
<script>
//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(); //"我喜欢吃鱼肉"
</script>
call,apply,bind基本语法总结:
1.call和apply会调用函数,可以改变函数中this指向
区别在于:传参的方式不同
2.call和bind,传参的方式完全一样
区别在于:call会直接调用,而bind它会作为一个返回值返回一个函数然后
才能够调用。