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

本文主要是介绍web前端必做笔记之一：call，apply，bind基本语法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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它会作为一个返回值返回一个函数然后
                     才能够调用。

这篇关于web前端必做笔记之一：call，apply，bind基本语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！