phpstudy集成环境

 首页 > Javascript中call与apply区别是什么，用在什么地方，在angularjs、reactjs中有没有应用？

Javascript中call与apply区别是什么，用在什么地方，在angularjs、reactjs中有没有应用？

定义

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

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

这些特性主要用在什么地方，在jquery类库中、最近流行的angularjs、reactjs 等框架中有没有应用

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

注：该函数的语法与 call() 方法的语法几乎完全相同，唯一的区别在于，call()方法接受的是一个参数列表，而 apply()方法接受的是一个包含多个参数的数组（或类数组对象）。

var demo = function(name, callback) {
    var returnName = 'Hello ' + name;
    
    if( typeof callback === 'function' ) {
        callback.call(this, returnName);
    }
    
    return returnName;
}

alert(demo('name_a')); // alert('Hello name_a');

// 这里的 params 就是 callback.call 中的参数 returnName
demo('name_b', function(params) {
    alert(params);    // alert('Hello name_b');
});
function test(i,j){
    console.log(i,j);
}
var obj={i:1,j:2};
test(1,2);//1,2
//改变this指向
test.call(obj,1,2);//1,2  
test.apply(obj,[1,2]);//1,2 
test.apply(obj,1,2);//报错

其实call跟apply的区别不大，主要是后面的传入参数，call的直接可以传入this的对象后，继续传参数，apply的话传入this的对象后，需要传一个数组。
还有call跟apply作用主要是改变this的作用域，也可以理解为冒充this对象，主要应用于对象继承上面。
在angular中肯定是有应用的，具体的我我不是很了解，但是在jquery源码应用很多。

在JS中，this的指向是动态变化的，很可能在写程序的过程中，无意中破坏掉this的指向，所以我们需要一种可以把this的含义固定的技术，于是就有了call,apply和bind这三个方法

apply：应用某一对象的一个方法，用另一个对象替换当前对象。
call：调用一个对象的一个方法，以另一个对象替换当前对象。

△它们的共同之处：
都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

△它们的不同之处：
①apply：最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。

代码示例

fun.call(thisArg[, arg1[, arg2[, ...]]])

function f(x,y){
  console.log(x+y);
}
f.call(null, 1, 1)
//return 2

②call：则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

代码示例

fun.apply(thisArg, [argsArray])

function f(x,y){
  console.log(x+y);
}
f.call(null, [1,1])
//return 2

△总结：
apply和call功能一样，只是传入的参数列表形式不同

这两者从使用上面来说，区别就是传入参数的问题，楼上的大神都已经说明了，我就补充下他们还没有提到的，call是传入单个参数的，而apply是传入参数数组的，在call传入参数数量大于3个的时候，性能不如apply,因此在有些类库的代码中，会出现这种优化方式，下面是摘自 backbone框架中的Event模块：

    var triggerEvents = function(events, args) {
          var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
          switch (args.length) {
            case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
            case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
            case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
            case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
            default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args); return;
          }
          }

这个是backbone官方对这种写法的解释 **A difficult-to-believe, but optimized internal dispatch function for
triggering events. Tries to keep the usual cases speedy (most internal
Backbone events have 3 arguments)**

【热门文章】
【热门文章】