來聊聊apply和call

今天在羣裏討論的時候，看到有人問apply怎麼使用，忽然想起本身剛接觸這個方法的時候，也是同樣的摸不着頭腦。

記得當時上網看了不少講解，可實際用的時候仍是感受有些濛濛噠orz....   

 

後來想想，也許是網上的說法有些太模式化了，讓新手沒法理解吧。

 

那今天我們就來試試用比較通俗的方式來解析一下這個apply以及它的兄弟call。

 

先看看apply的定義：對象的繼承、複製對象等等...

說的都對，可是對於新手來講，有些難以理解。

 

恩，那咱們來通俗易懂的聊聊它

 

好 廢話很少說，先上代碼：

 

function add(){
    this.a = arguments[0];
    this.b = arguments[1];
};

function applyAdd(a , b , c){

    var B={
        c:c
    }

    add.apply(B,arguments);

    return B

}

var applys=applyAdd( 1 , 2 , 3 );

console.log(applys.a+applys.b+applys.c)  //輸出6

 

 

很簡單的一個加法運算。

這個加法運算實際上作了一件什麼事情呢？

首先，咱們建立一類：add   這個類有兩個屬性：this.a   this.b   

而後咱們建立了另外一個類：applyAdd    在這個類裏咱們使用了apply方法，而後給這個類定義了一個對象： B

而後咱們返回這個對象。

接着給applyAdd類建立了一個新的實例：applys  請原諒個人命名比較沒有創意，我說過我文筆很差嘛~~  ╮(╯▽╰)╭  

 

好啦，咱們接着看   緊接着我輸出了一遍applys的applys.a+applys.b+applys.c   

到這裏咱們要注意一下！：applys是applyAdd的實例， 可是applyAdd這個類並無this.a和this.b！ 也就是說正常來講咱們這樣輸出應該返回NaN（undefined+undefined+3）

可是並無，咱們同樣輸出了6。 奧祕固然就在apply這個方法啦。

 

apply這個詞翻譯成中文是「使用」的意思。

可是我以爲這個翻譯有些不太直觀，我更傾向於把它叫作「搶劫」。。。

恩，既然是搶劫，首先要有一個被搶劫的倒黴蛋，還要有一個搶劫的劫匪嘛~

 

在這裏咱們的倒黴蛋天然就是add這個類啦，而劫匪就是B這個對象。

而劫匪就是apply的第一個參數：它必需要是一個對象（畢竟你不能說一串字符串是一我的嘛~）

可是這個劫匪，怎麼說呢，腦子有些問題。  恩  這個體如今apply的第二個參數上：第二個參數是什麼呢？是一個參數集合（一個數組）。

 

爲何說這個劫匪腦子有問題呢？ 由於他會先給別人一些東西，而後再搶過來。。。 

恩，幹這種脫褲子那啥的事，不就是腦子有問題麼。。。 不過沒辦法，計算機就是個腦子跟正常人不太同樣的東西~   ╮(╯▽╰)╭  

 

也就是說，這個時候  add裏若是使用了參數，都會來自於apply第二個參數傳入的東西。這裏咱們傳入了applyAdd自己的參數進去，也就是最後傳入的參數是[1,2,3]這樣的一個數組。

固然，你也能夠直接傳一個數組[1,2,3]進去，效果是徹底同樣的。

而後咱們在add內部把this.a和this.b用1和2來賦值，賦值完成後，還沒等add樂呢，就一把搶過來~~

 

因此最後的實際運行過程是這樣的：

function add(){
    this.a = arguments[0];//3. 哇！真好，居然有人願意給我錢~ 他必定是天使！  等等。。你要幹嗎？ 不要搶個人東西啊！！
    this.b = arguments[1];

    //1.我有兩個袋子，可是都是空的。誰能給我點錢呢？
};

function applyAdd(a , b , c){

    var B={
        c:c
    }

    add.apply(B,arguments);//2.今天去搶劫add，不過他的兩個袋子都是空的，不要緊，我先給填上，而後再搶過來！哈哈哈，我真是太聰明啦~

    //4. B:哈哈哈  今天搶了兩個袋子！收入不錯

    return B

}

var applys=applyAdd( 1 , 2 , 3 );

console.log(applys.a+applys.b+applys.c)  // 5.B：數一數本身如今有多少錢！ 6元！我真是太有錢了~

 

 

恩，大概就是這樣一個過程 orz....

 

至於他的兄弟call，實際上跟apply的運行過程是徹底一毛同樣的，區別只在於：call的第二個參數，call其實是能夠有N個參數的，第一個參數同樣是劫匪B，然後面的參數則是把apply的第二個參數從數組的形式變成了許多個獨立的參數。 

別如你apply裏的第二個參數是[1,2,3]  可是若是使用call的話，就要改爲add.call(B,1,2,3)這樣的形式。

 

至於怎麼使用它們，以及什麼時候使用，不在今天的討論範圍以內，咱們改天再聊。