JavaScript 中 call()、apply()、bind() 的用法

call 、 apply 、bind 这三个函数的第一个参数都是 this 的指向对象

函数中的this指向
    定时器中的this-------window
    普通函数的this-------window
    对象.方法中的this----当前实例对象
    构造函数中的this-----当前实例对象
    原型对象中的this-----当前实例对象
    事件处理函数中的this-当前事件源

如:

    function f1() {
        console.log(this);
    }
    f1();//console输出window

但是我们可以用call  apply 、bind 这三个函数改变this指向

调用call方法
    f1.call();
    f1.call(null);
    call()没有传入参数,或者传入了一个参数null,那么这个函数中的this也是指向默认.

    call用法:
    函数名.call(对象,参数1,参数2,...);
    对象.方法名.call(对象,参数1,参数2,...);

调用apply方法
    apply()和call()和没,有传入参数,或者传入了一个参数null,那么这个函数中的this也是指向默认.

    但是用法不一样    
    函数名.apply(对象,[参数1,参数2,...]);    
    对象.方法名.apply(对象,[参数1,参数2,...]);

    function f1(x, y) {
         console.log('结果是' + (x + y) + "====" + this);
     }
    //创建一个对象
     var obj = {
         age: 12,
         name: '小明'

     }
    //call方法
    f1.call(obj);//结果是NaN====[object Object]
    f1.call(obj,10,20);//结果是30====[object Object]
    
    //apply方法
    f1.apply(obj);//结果是NaN====[object Object]
    f1.apply(obj,[10,20]);//结果是30====[object Object]
    



    // 创建一个构造函数
    function Person(age, sex) {
        //this实例对象
        this.age = age;
        this.sex = sex;
    }

    Person.prototype.eat = function (x) {
        console.log('吃饭' + "=====" + x +"========="+ this.age);
    }

    //学生的构造函数
    function Student(name,age) {
        this.name = name;
        this.age = age;

    }

    //实例化
    var per = new Person(12, '男');
    var stu = new Student('小白',100);

    per.eat();//吃饭=====undefined=========男
    per.eat.apply(stu, [44]);//吃饭=====44=========100
    per.eat.call(stu, 144);//吃饭=====144=========100

 

调用bind方法

在函数中使用
    1. 函数名.bind(对象,参数1,参数2,....)--函数没用调用
    2.将上一步返回结果用变量保存,调用

在方法中使用
    1. var ff=当前实例对象.方法名.bind(对象,参数1,参数2,..);
    2.ff();
    bind()的参数
    第一个参数:修改this的指向 重新指向的对象
    第二个参数:方法需要的实参

如:

    function Person(age) {
        this.age = age;
    }

    Person.prototype.eat = function (x) {
        console.log('吃饭' + "=====" + x +"========="+ this.age);
    }

    function Student(age) {
        this.age = age;
    }

    //实例化
    var stu=new Student(100);

    var per=new Person(200);
    per.eat();//吃饭=====undefined=========200
    var bb=per.eat.bind(stu,[200]);
    bb();//吃饭=====200=========100