轻松搞定 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,但是浏览器里有一条规则:

如果你传的 contextnull 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 contextundefined
因此上面的打印结果是** 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、callapply 功能是一样的

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

轻松搞定 JS 的this、call和apply

上一篇:decorator 装饰页面,根据不同设备自动切换移动和pc站


下一篇:Caused by :java.lang.ClassNotFoundException: com.fasterxml.jackson.databind.JsonMappingException