改变 this 指向的方法 call()、apply()、 bind()的区别 ?

call()第一个参数是this的新指向;第二个参数是要传入函数的参数

    let cat = {
      name: "喵喵"
    }
    let dog = {
      name: "旺财",
      eat(food) {
        console.log(this.name, "喜欢吃", food)
      },
      eatMore(food1, food2) {
        console.log(this.name, "喜欢吃", food1, food2)
      }
    }
    dog.eat("骨头"); //旺财喜欢吃骨头
    dog.eat.call(cat); // 喵喵 喜欢吃 undefined
    dog.eat.call(cat, "鱼"); // 喵喵 喜欢吃 鱼
    dog.eatMore.call(cat, "鱼", "肉"); //喵喵 喜欢吃 鱼 肉

apply和call的区别是传参不同,apply的参数通过数组形式传递

    let cat = {
      name: "喵喵"
    }
    let dog = {
      name: "旺财",
      eat(food) {
        console.log(this.name, "喜欢吃", food)
      },
      eatMore(food1, food2) {
        console.log(this.name, "喜欢吃", food1, food2)
      }
    }
    dog.eatMore.call(cat, "鱼", "肉"); //喵喵 喜欢吃 鱼 肉
    dog.eatMore.apply(cat, ["鱼", "肉"]);//喵喵 喜欢吃 鱼 肉

bind的传参和call一样

bind和call,apply的区别在于,bind将函数作为返回值(即bind不会立即执行而是在下次调用的时候执行,且bind只在第一次改变this指向有效,后续再次使用不在改变this指向)

var name = "佩奇"
    function fun() {
      console.log(this.name);
    }
    let cat = {
      name: "喵喵"
    }
    let dog = {
      name: "旺财",
    }
    fun()//佩奇
    var f1 = fun.bind(cat);
    f1(); // 喵喵

    // 第二次使用bind绑定无效
    var f2 = f1.bind(dog);
    f2(); // 喵喵

    // 使用call绑定也无效
    f1.call(dog); // 喵喵
    //使用apply无效
    f1.apply(dog); //喵喵

 

posted @ 2022-09-02 09:48  天青色等烟雨灬  阅读(42)  评论(0)    收藏  举报