js中改变this的指向,有apply、call和bind这三种方法

617 阅读1分钟

这三个方法的主要目的都是改变this指针的指向。

apply和call都是在调用函数本身的同时把要付给this指针的对象传递进去,不过他两的语法不同。

  • apply的使用语法
    • 函数名字.apply(对象,[参数1,参数2,...]);
    • 方法名字.apply(对象,[参数1,参数2,...]);
  • call的使用语法
    • 函数名字.call(对象,参数1,参数2,...);
    • 方法名字.call(对象,参数1,参数2,...);
//函数的调用,改变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的指向

    //    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);

而bind则是复制函数并改变this指向

  • bin的使用语法
    • 函数名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个函数
    • 方法名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个方法
 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();