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 等框架中有没有应用

reactjs jquery JavaScript angularjs

Xx丶老寞 9 years, 7 months ago

 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');
});

酱油最帅气 answered 9 years, 7 months ago

在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功能一样,只是传入的参数列表形式不同

无色D夜空 answered 9 years, 7 months ago

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

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

santu answered 9 years, 7 months ago


 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);//报错

Rabia answered 9 years, 7 months ago

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

古古古古古 answered 9 years, 7 months ago

这两者从使用上面来说,区别就是传入参数的问题,楼上的大神都已经说明了,我就补充下他们还没有提到的, 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)**

椎名牧Maki answered 9 years, 7 months ago

Your Answer