apply、call和bind的区别

时间:2023-01-30 22:08:19

  apply的call的区别

  其实很简单,两者的区别就在于调用时的参数不一样。看一下代码:

 1        var i = 40;
 2             
 3             var a = {
 4                 i : 20,
 5                 foo : function () {
 6                     var i = 10;
 7                     return this.i;
 8                 },
 9                 foo1 : function (param1, param2) {
10                     return param1 + param2 + i;
11                 }
12             }
13             
14             var b = {
15                 i : 5
16             }
17             
18             console.log(a.foo()); //20
19             console.log((a.foo)()); //20
20             console.log((a.foo,a.foo)()); //40
21             console.log(a.foo.apply(window)); //40
22             console.log(a.foo.apply(a)); //20
23             console.log(a.foo.apply(a.foo)); //undefinded
24             console.log(a.foo1.apply(b, [2, 1])); //43
25             console.log(a.foo1.call(b, 2, 1)); //43

  很显然,两者都是替换方法中this指向的对象,在参数上第一个参数就是替换后的对象,在第一个之后的参数就是调用方法所引用的参数。但是两者的区别就在于,apply方法的参数只有两个,第一个是替换后的对象,而第一个参数是一个数组,用于存放调用方式所引用的若干个参数而call方法的参数按照顺序是:替换后的对象,调用方法的参数1,以及如果有的话还有参数2……也就是将所要传的参数排列在第一个参数之后,总的参数的数目是不一定的

  如果还不清楚的话,直接看定义:

  call方法: 
  语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
  定义:调用一个对象的一个方法,以另一个对象替换当前对象。 
  说明: 
  call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
  如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 

  apply方法: 
  语法:apply([thisObj[,argArray]]) 
  定义:应用某一对象的一个方法,用另一个对象替换当前对象。 
  说明: 
  如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 
  如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

  bind的用法

  bind方法同样是将方法中this指定的对象替换为特定的对象,但是不同的是调用bind方法时返回的是一个函数,调用这个函数时,this所指定的对象就是bind方法中的参数,等于是固定了该方法所绑定(bind)的对象了。所以这个时候可以用一个变量来存放这个返回的方法,请看代码:

var i = 40;

var a = {
  i :  20,
  foo : function () {
    var i = 10;
    return this.i;
  },
  foo1 : function (param1, param2) {
    return param1 + param2 + this.i;
  }
}

var b = {
  i : 5
}

console.log(a.foo()); //20
console.log(a.foo1.call(b, 2, 1)); //8

var c = a.foo.bind(b);

console.log(c); //function bound () { [native code] }
console.log(c()); //8

  可以看到在输出 c 时,输出的是一个function,说明 c 是一个函数,输出 c() 才是运算之后的结果。

 

参考资料:http://blog.csdn.net/shenzhennba/article/details/17716957

    http://uule.iteye.com/blog/1158829