前言

我們都知道這三種方法都用于綁定this蕉朵，但沒有區(qū)分好万牺，很容易踩坑。繼多次踩坑之后我又踩坑了邢享，所以決定再次學(xué)習(xí)這種三種方法鹏往，并寫下這篇文章,希望大家看了有所幫助，不再踩坑驼仪！

一.用法

我們先來簡(jiǎn)單看看三種方法的用法

• call:

  function a(arg){
      console.log(arg)
  }
  a.call('this',1) //輸出1
  

用法說明：fn.call(this,任何類型的參數(shù)),參數(shù)可為任何類型掸犬，數(shù)組非數(shù)組均可
ps:你是否知道如果我直接調(diào)用函數(shù):a(參數(shù)),其實(shí)就等于a.call(window對(duì)象,參數(shù))，就是說所有函數(shù)調(diào)用我們平時(shí)寫成:
fn(參數(shù))
但其實(shí)是：
fn.call(this,參數(shù)),而this往往就是fn的調(diào)用對(duì)象,即a.fn()的this就是對(duì)象a绪爸，直接fn()默認(rèn)就是window全局對(duì)象

• apply:

  function a(arg){
    console.log(arg)
  }
  
  a.apply('this',[1,2])  //輸出結(jié)果為1
  

用法說明：fn.apply(this,數(shù)組or類數(shù)組對(duì)象)

• bind:

    function a(arg){
      console.log(arg)
  }
    var returnFn=a.bind('this',1);
    returnFn()  //輸出1
  

用法說明：fn.bind(this,任何類型的參數(shù)),不立即調(diào)用函數(shù)fn，返回一個(gè)已經(jīng)綁定this(傳入?yún)?shù))的函數(shù)fn

三者區(qū)別宙攻，踩坑時(shí)刻奠货！

重頭戲來了!!!三者區(qū)別我們可以用call作為一個(gè)橋梁，依次與其它兩者比較座掘，至于為什么待會(huì)兒你就明白了递惋；

踩坑時(shí)刻一:

• call與apply區(qū)別:從上述已說明的用法兩者的直接區(qū)別就是:前者傳入任何形式參數(shù)柔滔，后者傳入數(shù)組或者類數(shù)組對(duì)象

你知道apply參數(shù)傳入數(shù)組或類數(shù)組對(duì)象，那你知道它是怎么處理這些參數(shù)的嗎萍虽，請(qǐng)看例子：

  var b=[1,2]
  function a(a,c){
    console.log(a,c)
  }
  a.apply('this',b) //輸出1  2  睛廊，數(shù)組依次對(duì)應(yīng)參數(shù)

  var b=[1,2]
  function a(a){
    console.log(a)
  }
  a.apply('this',b)  //輸出1  數(shù)組被展開了，傳入第一個(gè)值

  function a(a){
    console.log(a)
  }
  a.call('this',b) //輸出[1,2]

• 說明:apply調(diào)用的時(shí)候會(huì)把數(shù)組or類數(shù)組展開,實(shí)參依次傳入函數(shù)的形參杉编，如果數(shù)目不一致超全，后面的實(shí)參就沒有了！５寺嘶朱！不過可以用函數(shù)的arguments對(duì)象來獲得其余實(shí)參

踩坑時(shí)刻二:

• call與bind區(qū)別:bind與call的參數(shù)是一樣的，都可以是任何類型的參數(shù)光酣，bind與call的直接區(qū)別就是bind綁定this之后不會(huì)立即調(diào)用函數(shù)疏遏，而是返回一個(gè)綁定了this的函數(shù)等待被調(diào)用，注意!此刻你需要一個(gè)變量去接受這個(gè)函數(shù)救军，否則就是下面的坑财异，這個(gè)坑就是我今天踩的！３狻宝当！

    var _this='bindthis'
    function a(a){
        console.log(this)
        console.log(a)
    }
  var c=a.bind(_this,1)   //定義變量c來接受這個(gè)返回的函數(shù)，并且等待被調(diào)用
  c()  //輸出bindthis胆萧，1
  
  //踩坑,錯(cuò)誤范例
  var _this='bindthis'
  function a(a){
      console.log(this)
      console.log(a)
  }
   a.bind(_this,1)
   a()  //window,undefined  調(diào)用的依然是全局變量中的函數(shù)a庆揩，而不是bind綁定this后返回的新函數(shù)
  

• 說明:怎么樣，看完我踩的這個(gè)坑你是恍然大悟跌穗，哦~原來如此订晌，還是覺得我很2很天真，233333蚌吸。不管怎么樣锈拨，這樣的坑我們以后不要再踩了，call與bind的直接區(qū)別就是是立即執(zhí)行還是返回一個(gè)函數(shù)等待執(zhí)行羹唠？如果是后者記得用個(gè)變量接受一下

總結(jié)

1.函數(shù)這樣調(diào)用a.fn(參數(shù)),其實(shí)是fn.call(a,參數(shù)),a就是this

2.call與apply:綁定this后都是立即執(zhí)行奕枢，就是參數(shù)的區(qū)別，前者是任何形式的參數(shù)佩微，后者是數(shù)組或類數(shù)組對(duì)象缝彬，你要注意apply對(duì)參數(shù)的處理，這個(gè)往往不太引起注意哺眯；

3.call與bind:參數(shù)都是一樣的谷浅，區(qū)別就是是立即執(zhí)行還是返回一個(gè)函數(shù)等待執(zhí)行？如果是后者你要注意記得用個(gè)變量接受一下，不然一不小心容易從錯(cuò)

4.bind與apply:通過上面的比較一疯，我們可以看出前者返回一個(gè)函數(shù)等待執(zhí)行撼玄，后者立即執(zhí)行；前者參數(shù)可以是任何形式墩邀，后者只能是數(shù)組或類數(shù)組對(duì)象