輕鬆搞定 JS 的this、call和apply

年前最後一篇文章，提早祝你們春節快樂。對了，還有369就要2018年了，提早祝你們2018年春節快樂。

.. .vr       
                             qBMBBBMBMY     
                            8BBBBBOBMBMv    
                          iMBMM5vOY:BMBBv        
          .r,             OBM;   .: rBBBBBY     
          vUL             7BB   .;7. LBMMBBM.   
         .@Wwz.           :uvir .i:.iLMOMOBM..  
          vv::r;             iY. ...rv,@arqiao. 
           Li. i:             v:.::::7vOBBMBL.. 
           ,i7: vSUi,         :M7.:.,:u08OP. .  
             .N2k5u1ju7,..     BMGiiL7   ,i,i.  
              :rLjFYjvjLY7r::.  ;v  vr... rE8q;.:,, 
             751jSLXPFu5uU@guohezou.,1vjY2E8@Yizero.    
             BB:FMu rkM8Eq0PFjF15FZ0Xu15F25uuLuu25Gi.   
           ivSvvXL    :v58ZOGZXF2UUkFSFkU1u125uUJUUZ,   
         :@kevensun.      ,iY20GOXSUXkSuS2F5XXkUX5SEv.  
     .:i0BMBMBBOOBMUi;,        ,;8PkFP5NkPXkFqPEqqkZu.  
   .rqMqBBMOMMBMBBBM .           @kexianli.S11kFSU5q5   
 .7BBOi1L1MM8BBBOMBB..,          8kqS52XkkU1Uqkk1kUEJ   
 .;MBZ;iiMBMBMMOBBBu ,           1OkS1F1X5kPP112F51kU   
   .rPY  OMBMBBBMBB2 ,.          rME5SSSFk1XPqFNkSUPZ,.
          ;;JuBML::r:.:.,,        SZPX0SXSP5kXGNP15UBr.
              L,    :@huhao.      :MNZqNXqSqXk2E0PSXPE .
          viLBX.,,v8Bj. i:r7:,     2Zkqq0XXSNN0NOXXSXOU 
        :r2. rMBGBMGi .7Y, 1i::i   vO0PMNNSXXEqP@Secbone.
        .i1r. .jkY,    vE. iY....  20Fq0q5X5F1S2F22uuv1M;

<p>
在面試的時候，常常會出現這樣的面試題目：

var obj = {
    foo: function(){
        console.log(this)
    }
}

var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window

初學者其實對於 this 確定是一頭霧水，甚至有一些有工做經驗的夥伴，對 this 的理解也依舊很模糊。

1、理解函數的調用

函數的調用分爲一下三種方式：

func(p1, p2) 

obj.method(p1, p2)

func.call(context, p1, p2) // 先不講 apply

其實全部的調用方式都是 func.call(context, p1, p2) 方式的<a href="http://baike.baidu.com/link?url=cPB6bTAJlEW7zqrmSlgSlubMwoCDEwgVh8DjABZxAD9kb8PurAnSHA3u0WZyImlWbRtrabRJtYiFNV_W20PuYKZYOCm9nKB63-j599cummgF6nQzDCQ5LUX1mKXOQMBc">語法糖</a>。

前面兩種方式轉換成 call 方式：

func(p1, p2) 
=》
func.call(undefined, p1, p2)

obj.method(p1, p2)
=》
obj.method.call(obj, p1, p2)

2、那 this 是什麼？

上面的 context 就是 this

3、方式的轉換

• func(p1, p2) 中的 this

function func(){
  console.log(this)
}

func()

=》

func.call(undefined) // 能夠簡寫爲 func.call()

理論上來講，打印的 this 應該就是 undefined，可是瀏覽器裏有一條規則：

若是你傳的 context 就 null 或者 undefined，那麼 window 對象就是默認的 context（嚴格模式下默認 context 是 undefined）
所以上面的打印結果是** window**。

若是你要改變 this，那麼傳入新的 context 就行了：

func.call(obj) // 那麼裏面的 this 就是 obj 對象了

• obj.method(p1, p2) 的 this

var obj = {
    foo: function(){
       console.log(this)
    }
}

obj.foo() 

=》

obj.foo.call(obj)

this 就是 obj

4、搞定面試題，贏得高薪

var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // 轉換爲 obj.foo.call(obj)，this 就是 obj
bar() 
// 轉換爲 bar.call()
// 因爲沒有傳 context
// 因此 this 就是 undefined
// 最後瀏覽器給你一個默認的 this —— window 對象

5、call 和 apply 是什麼關係

做用同樣，傳參方式全部區別而已。

func.call(func, p1, p2, p3) // this

func.apply(func, [p1, p2, p3]) // apply

5、總結

一、this 就是你 call 一個函數時，傳入的 context。
二、call 和 apply 功能是同樣的

原文地址：https://www.jianshu.com/p/6deef2eed076