apply，call,bind方法

timg.jpg

apply和call的使用

作用:可以改变this的指向

/*
* apply的使用语法
* 函数名字.apply(对象,[参数1,参数2,...]);
* 方法名字.apply(对象,[参数1,参数2,...]);
* call的使用语法
* 函数名字.call(对象,参数1,参数2,...);
* 方法名字.call(对象,参数1,参数2,...);
*
* 作用:改变this的指向
* 不同的地方:参数传递的方式是不一样的
*
* 只要是想使用别的对象的方法,并且希望这个方法是当前对象的,那么就可以使用apply或者是call的方法改变this的指向
*
* */

• 函数的调用,改变this的指向

//函数的调用,改变this的指向
          function f1(x,y) {
            console.log((x+y)+":===>"+this);
            return "这是函数的返回值";
          }
          //apply和call调用
          var r1=f1.apply(null,[1,2]);//此时f1中的this是window
          console.log(r1);
          var r2=f1.call(null,1,2);//此时f1中的this是window
          console.log(r2);
          console.log("=============>");
          //改变this的指向
          var obj={
            sex:"男"
          };
          //本来f1函数是window对象的,但是传入obj之后,f1函数此时就是obj对象的
          var r3=f1.apply(obj,[1,2]);//此时f1中的this是obj
          console.log(r3);
          var r4=f1.call(obj,1,2);//此时f1中的this是obj
          console.log(r4);

• 方法改变this的指向

//方法改变this的指向

      function Person(age) {
        this.age = age;
      }
      Person.prototype.sayHi = function (x, y) {
        console.log((x + y) + ":====>" + this.age);//是实例对象
      };

      function Student(age) {
        this.age = age;
      }
      var per = new Person(10);//实例对象
      var stu = new Student(100);//实例对象
      //sayHi方法是per实例对象的
      per.sayHi.apply(stu, [10, 20]);
      per.sayHi.call(stu, 10, 20);

    function f1() {
      console.log(this+":====>调用了");
    }
    //f1是函数,f1也是对象
    console.dir(f1);
    //对象调用方法,说明,该对象中有这个方法
    f1.apply();
    f1.call();
    console.log(f1.__proto__==Function.prototype);
    //所有的函数都是Function的实例对象
    console.log(Function.prototype);//ƒ () { [native code] }
    console.dir(Function);
    //apply和call方法实际上并不在函数这个实例对象中,而是在Function的prototype中


    function Person() {
      this.sayHi=function () {
        console.log("您好");
      };
    }
    Person.prototype.eat=function () {
      console.log("吃");
    };

    var per=new Person();
    per.sayHi();
    per.eat();
    console.dir(per);
    //实例对象调用方法,方法要么在实例对象中存在,要么在原型对象中存在

bind方法

//bind是用来复制一份
//使用的语法:
/*
* 函数名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个函数
* 方法名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个方法
*
* */

//bind方法 
    
    function ff (x,y) {
        console.log((x + y) + "======>" + this);
    }
    
    //复制了一份时候，把参数传入到ff函数中，x===>10，y===>20,null就是this，默认就是window
     var f1 =  ff.bind(null,10,20);
     f1();
    

注意：1. bind方法是复制的意思,参数可以在复制的时候传进去,也可以在复制之后调用的时候传入进去
2.apply和call是调用的时候改变this指向
3.bind方法,是赋值一份的时候,改变了this的指向

   function Person(age) {
      this.age=age;
    }
    Person.prototype.play=function () {
      console.log(this+"====>"+this.age);
    };

    function Student(age) {
      this.age=age;
    }
    var per=new Person(10);
    var stu=new Student(20);
    //复制了一份
    var ff=per.play.bind(stu);
    ff()