javascript中的call和apply混用詳解

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"})

這個理解方式跟上面那個差不多、這裡就不再重復瞭。

發佈留言