JS call()、apply()、bind()讲解

JS call()、apply()、bind()讲解

1.JS函数 call

调用一个对象的一个方法，用另外一个对象替换当前对象

示例:

var obj = {
    name: "aaa",
    age: "111",
    print: function (){
        //输出当前对象的属性值
        console.log("name:"+this.name+" age:"+this.age);
    }
}
obj.print();//输出结果 name:aaa age:111
​
//使用call函数
var obj2 = {
    name: "bbb",
    age: "222"
}
//调用obj print方法，使用obj2替换obj,也可以理解为obj2 copy了obj的print方法
obj.print.call(obj2);//输出结果 name:bbbage:222

2. Apply 函数

apply() 和 call()方法类似,应用某一对象的方法，用另外一个对象替换当前对象

示例：

var obj = {
    name: "aaa",
    age: "111",
    print: function (){
        //输出当前对象的属性值
        console.log("name:"+this.name+" age:"+this.age);
    },
     print2: function (name,age){
         //输出传入的参数
        console.log("name:"+name+" age:"+age);
    },
}
obj.print();//输出结果 name:aaa age:111
​
//使用call函数
var obj2 = {
    name: "bbb",
    age: "222"
}
obj.print.apply(obj2);//输出结果 name:bbbage:222
obj.print2.apply(obj2,['ccc','333']);//输出结果 name:ccc age:333

3.bind 函数

绑定一个对象的方法，用另一个对象替换当前对象，并返回一个新的方法

var obj = {
    name: "aaa",
    age: "111",
    print: function (){
        //输出当前对象的属性值
        console.log("name:"+this.name+" age:"+this.age);
    },
     print2: function (name,age){
         //输出传入的参数
        console.log("name:"+name+" age:"+age);
    },
}
obj.print();//输出结果 name:aaa age:111
​
//使用call函数
var obj2 = {
    name: "bbb",
    age: "222"
}
obj.print.bind(obj2)();//输出结果 name:bbbage:222
obj.print2.bind(obj2,'ccc','333')();//输出结果 name:ccc age:333

4.区别总结

call、apply、bind三个函数都是来重定义this对象的

call 只能单个参数单个参数接受,apply 必须将参数放到数组中，bind参数接受方式和call 一致,但是多了一个(),表示返回一个新的函数，调用执行。三者的数据类型不限定string类型，也可以是各种类型，函数，对象等