apply()和call()和bind()用法

文章目录

1. 1. 共同作用:借用别人的方法来调用,就像调用自己一样.
2. 2. 区别:唯一的区别只有接受参数的方式不同.

共同作用:借用别人的方法来调用,就像调用自己一样.

在非严格模式下当我们第一个参数传递null或undefined是,函数体内的this会指向默认的宿主对象.

区别:唯一的区别只有接受参数的方式不同.

call()方法:
定义 : 调用一个对象的一个方法,一另一个对象替换当前对象.
语法 : Function.call(obj,arg1,arg2,…)

apply()方法:
定义 : 应用某一对象的一个方法,用另一个对象替换当前对象.
语法 : Function.apply(obj,args)
obj : 这个对象将代替Function类里面的this对象.
args : 这是是数组或类数组,apply方法把这个集合中的元素作为参数传递给调用的函数.


用一个简单的公式总结:

fn.call(obj,arg1,arg2) == fn.apply(obj,arguments) == fn.apply(obj,[arg1,arg2]) == this.fn(arg1,arg2)

举例

function Sister()  
{   
    this.age=18;  
    this.sayAge= function()   
    {  
        document.write("Age:"+this.age);  
    }  
    this.yaya=function()  
    {  
        document.write("yaya.....");  
    }  
}  
function Brother()  
{   
    this.age=25;  
    this.sayAge=function(){  
        document.write("Age:"+this.age);  
    }  
    this.hoho=function()  
    {  
        document.write("hoho.....")  
    }  
}  
var sis=new Sister();  
var bro=new Brother();  
sis.sayAge.call(bro);

它输出的是 Age:25,其实到这里我还很迷糊,下面这一个断点调试才让我明白,

我在第26行打了断点,然后单步了一步.
sis.sayAge.call(bro)调用的方法确实是Sister中的方法,但是其中的this(上下文)却变成了Brother.用文档中的解释就是:只有这个sayAge是sis对象的,其执行环境却是bro的.

简而言之:sis.sayAge.call(bro)意思就是,单单将sis的sayAge移动到bro对象中来执行.

ps:要是我设计的js,我就规定这么写:sis.sayAge.in(bro)

bind()方法:

call和apply都是对函数的直接调用,但是bind方法返回的仍然是一个函数.所以后面还需要()来进行调用.

传参:
可以像call方法那样传参.

sis.sayAge.bin(bro,'老子今年27');//注意这里不会调用执行函数

sis.sayAge.bin(bro,'老子今年27')();//这样才会调用

由于bind返回的仍然是一个函数,所以还可以在调用的时候传参数.

sis.sayAge.bin(bro)('老子今年27');