JavaScript中call,apply,bind方法的总结

文章目录

var a = {
    user:"bing",
    fn:function(){
        console.log(this.user); //bing
    }
}
a.fn()    //返回"bing"

var b = a.fn;
b();      //返回undefined  (this指向调用它的方法b，即window对象)

如果对以上代码的返回值有疑惑的，请看 彻底理解JavaScript中this指向

虽然a.fn()方法可以正常返回，但是有时候我们不得不将这个对象保存到另外的一个变量中，那么就可以通过以下方法。

call()

通过在call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象。

var a = {
    user:"bing",
    fn:function(){
        console.log(this.user); 
    }
}
var b = a.fn;
b.call(a);   //bing    (将b的this指针由window指向a)

call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
    user:"bing",
    fn:function(i,j){
        console.log(this.user); //bing
        console.log(i+j); //3
    }
}
var b = a.fn;
b.call(a,1,2);

apply()

apply方法和call方法有些相似，它也可以改变this的指向

var a = {
    user:"bing",
    fn:function(){
        console.log(this.user); //bing
    }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
    user:"bing",
    fn:function(i,j){
        console.log(this.user); //bing
        console.log(i+j); //33
    }
}
var b = a.fn;
b.apply(a,[11,22]);

注:如果call和apply的第一个参数写的是null，那么this指向的是window对象，如下：

var a = {
    user:"bing",
    fn:function(){
        console.log(this); //返回Window对象
    }
}
var b = a.fn;
b.apply(null);

tips: apply小应用

// 因为
Math.max(5,7,9,3,1,6)); // 9 

// 所以获取数组中最大的值可以这么写
var arr=[5,7,9,3,1,6]; 
alert(Math.max.apply(null,arr)); // 9

bind()

bind方法和call、apply方法有些不同，但它们都可以用来改变this的指向。

与call、apply方法不同，bind方法返回的是一个修改过后的函数。

var a = {
    user:"bing",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);     //ƒ(){console.log(this.user);}

b.bind(a)();   //再执行一次  正常返回'bing'

同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
    user:"bing",
    fn:function(e,d,f){
        console.log(this.user); //bing
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

call()、apply()、bind()的区别

call()、apply()、bind() 都是用来重定义 this 这个对象的（改变this指针）！

区别：

  1. bind 返回的是一个新的函数，必须调用它才会被执行。call、apply则是立即执行
  2. apply参数是数组，call、bind参数是arguments对象

1. bind 返回的是一个新的函数，必须调用它才会被执行

var name = 'xx',
    age = 20;
var obj = {
    name: 'bing',
    objAge: this.age,
    myFun: function () {
        console.log(this.name, this.age)
    }
}
var my = {
    name: 'bb',
    age: 100
}

console.log(obj.objAge); // 20       obj的this指向window
obj.myFun(); // 'bing' undefined     myFun的this指向obj

// 通过call、apply、bind，将myFun的this指向由obj改成my
obj.myFun.call(my); // 'bb' 100
obj.myFun.apply(my); // 'bb' 100
obj.myFun.bind(my)(); // 'bb' 100

2. apply参数是数组，call、bind参数是arguments对象

var name = 'xx',
    age = 20;
var obj = {
    name: 'bing',
    objAge: this.age,
    myFun: function (from, to) {
        console.log(this.name, this.age, from, to)
    }
}
var my = {
    name: 'bb',
    age: 100
}

obj.myFun.call(my, '成都', '上海'); // 'bb' 100 '成都' '上海'
obj.myFun.apply(my, ['成都', '上海']); // 'bb' 100 '成都' '上海'
obj.myFun.bind(my, '成都', '上海')(); // 'bb' 100 '成都' '上海'
obj.myFun.bind(my, ['成都', '上海'])(); // 'bb' 100 ['成都', '上海'] undefined

总结

  • 三者都可以改变函数的 this 对象指向。

  • 三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window。

  • 三者都可以传参，但是 apply 是数组，而 call 是参数列表，且 apply 和 call 是一次性传入参数，而 bind 可以分为多次传入。

  • bind 是返回绑定 this 之后的函数，便于稍后调用；apply 、call 则是立即执行 。

  • bind()会返回一个新的函数，如果这个返回的新的函数作为构造函数创建一个新的对象，那么此时 this 不再指向传入给 bind 的第一个参数，而是指向用 new 创建的实例

posted @ 2022-07-20 18:16  猫老板的豆  阅读(33)  评论(0)  编辑  收藏  举报