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
Answers
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');
});
在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功能一样,只是传入的参数列表形式不同
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
注:该函数的语法与 call() 方法的语法几乎完全相同,唯一的区别在于,call()方法接受的是一个参数列表,而 apply()方法接受的是一个包含多个参数的数组(或类数组对象)。
这两者从使用上面来说,区别就是传入参数的问题,楼上的大神都已经说明了,我就补充下他们还没有提到的,
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)**