[JS 语法] 关于call()、apply()、bind()

48 阅读1分钟

作用都是在原对象调用自己的方法时,将原有的this指针改为传入对象的this指针

image.png

一.当调用方法没有参数时

call()apply()使用方式和效果完全一致,而bind()不是调用函数,而是将函数作为返回值,所以要添加()

   function fun() {
     console.log(this);
   }

   let cat = {
     name: "cat",
   };
   //call(obj) 将函数内部的 this 指向传入的 obj
   fun();             //windows 对象
   fun.call(cat);     //{name : cat}
   fun.apply(cat);    //{name : cat}
   fun.bind(cat)();   //{name : cat}

二.当调用方法有参数时

   let cow = {
     name: "mermer",
   };
   
   let dog = {
     name: "wangwang",
     sayName(food1, food2) {
       console.log(`我是${this.name},我吃${food1}${food2}`);
     },
   };
   
   dog.sayName("肉", "骨头"); //我是wangwang,我吃肉和骨头
   
   //call() 传参,通过 参数列表 的方式
   dog.sayName.call(cow, "草", "树皮"); //我是mermer,我吃草和树皮
   
   //apply()传参,通过 数组 的方式
   dog.sayName.apply(cow, ["草", "树皮"]); //我是mermer,我吃草和树皮
   
   //bind()传参,和call()一样通过 参数列表 的方式.返回一个 函数
   dog.sayName.bind(cow, "草", "树皮")(); //我是mermer,我吃草和树皮

三.实现多重继承,即同时继承多个父类

    //父类 1
   function User() {
     this.curdContent = function () {
       console.log("User curdContent");
     };
   }
   
   //父类 2
   function Person() {
     this.login = function () {
       console.log("Person login");
     };
   }
   
   //子类
   function Admin() {
     //继承了 User (三种任选其一)
     User.call(this);
     User.apply(this);
     User.bind(this)();

     //继承了 Person (三种任选其一)
     Person.call(this);
     Person.apply(this);
     Person.bind(this)();
   }
   let ad = new Admin();
   ad.curdContent(); //"User curdContent"
   ad.login(); //"Person login"