轻松搞定 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 的理解也依旧很模糊。

一、理解函数的调用

函数的调用分为一下三种方式：

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)

二、那 this 是什么？

上面的 context 就是 this

三、方式的转换

• 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

四、搞定面试题，赢得高薪

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 对象

五、call 和 apply 是什么关系

作用一样，传参方式所有区别而已。

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

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

五、总结

1、this 就是你 call 一个函数时，传入的 context。

2、call 和 apply 功能是一样的

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