javascript中的call和apply混用详解

最近发现这样一串代码。大家先来帮我看一下。

Function.prototype.uncurrying = function(){
var self = this;
return function(){
Function.prototype.call.apply(self,arguments);
}
}

var push = [].push.uncurrying();
var arr = [];
push(arr,1,2)
console.log(arr)

看完代码估计大家应该猜得出结果，就是往arr数组里面添加了两个元素，但是究竟是怎么做到的呢？ 这里不卖关子，我们来看一下另外一种实现方式

Function.prototype.uncurrying=function(){
var self = this;
return function(){
var obj = [].shift.call(arguments);
self.apply(obj,arguments);
}
}

var push = [].push.uncurrying();
var arr = [];
push(arr,1,2)
console.log(arr)

代码变成了这样大家是不是就能看懂了呢？最起码比第一种实现方式的可理解性要强得多。这里不对apply 和 call 方法做详细的讲解。不了解这两个方法的同学可以先百度一下看看这两个方式到底是怎么玩的，然后再来阅读我的代码。好了，接下来我们要来讲解第一种方法的原理到底是怎么实现的了。

function testApply(name){
console.log(name)
}

Function.prototype.call.apply(testApply,[{},"lisi"])

这里我们可以先把Function.prototype.call看作是一个整体这里我们叫他Call好了。

这时我们的代码是这样的

Call.apply(testApply,[{},”lisi”])

上面的代码可以理解成这样

testApply.apply({},”lisi”)

这个时候是不是代码结果就显而易见了呢？

那为什么可以这么理解呢？ 实际上这段代码的意思是把testApply的this绑定到{}身上。

然后把参数”lisi”传递给testApply方法然后执行一下

下面这段代码的结果跟上面是一样一样的。

Function.prototype.apply.apply(testApply,[{},”lisi”])

当然我们发散一下思维还可以编写这样的代码

function testCall(){
console.log(this.name)
}

Function.prototype.apply.call(testCall,{name:"zhangsan"})
//也可以这样
//Function.prototype.call.call(testCall,{name:"zhangsan"})

这个理解方式跟上面那个差不多、这里就不再重复了。