JS中的call()、apply()和bind()小結

函数的三种调用方式 : 全局函数 对象方法 构造函数
*共同点,this的执行时确定的无法修改

a.全局函数：this指向window
b.对象方法：this指向对象
c.构造函数：this指向new创建的对象

上下文调用模式：可以动态修改this的指向
三种语法异同点：
相同点： 作用都是动态修改this
不同点：传参方式不一样

call(): 函数名.call(修改后的this,arg1,arg2,arg3………………)
apply(): 函数名.apply(修改后的this,[arg1,arg2,arg3…………])
bind(): 函数名.bind(修改后的this)

                * 不会立即执行函数，而是返回修改this之后的新函数
                * 一般用于回掉函数（定时器）

1.call()

语法： 函数名.call(修改的this指向，arg1,arg2,arg3,………………)

 function f1(a,b){
             console.log(this);
             console.log(a+b);
         };
         f1();//this.window
         f1.call({name:'张三',age:18},10,20);

打印结果:

2.apply()

语法 : 函数名.apply(修改的this指向,[数组或伪数组])

function f2(a,b){
            console.log(this);
            console.log(a+b);
         };
         f2(10,20);//this.window
         f2.apply({age:88},[20,30]);//自动遍历数组或伪数组的每一个元素给函数的形参赋值

打印结果:

3.bind()

(1)语法 : 函数名.bind(修改的this指向,arg1,arg2,arg3,…)
bind() : 不会执行这个函数,而是会返回一个修改了this之后的新函数

 function f3(a,b){
             console.log(this);
             console.log(a+b);
         }
         var newF3 = f3.bind([1,2,3])
         newF3(10,10);//newF3是bind方法返回函数,所以this变成了bind方法修改后的this指向

打印结果:

(2)结合定时器使用
a. 具名函数

var test = function(){
             console.log(this);  
         };

        //  var newTest = test.bind([1,2,3]);
        // setTimeout(newTest,2000);
        setTimeout(test.bind([1,2,3]),2000);

打印结果:

b. 匿名函数

setTimeout(function(){
            console.log(this);
            
        }.bind([10,20,30]),3000);