美文网首页程序员每日5分钟计算机杂谈Web前端之路
[程序员每日5分钟]轻松搞定 JS 的this、call和app

[程序员每日5分钟]轻松搞定 JS 的this、call和app

作者: anonymous66 | 来源:发表于2017-01-23 16:21 被阅读295次

    年前最后一篇文章,提前祝大家春节快乐。对了,还有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 功能是一样的

    相关文章

      网友评论

        本文标题:[程序员每日5分钟]轻松搞定 JS 的this、call和app

        本文链接:https://www.haomeiwen.com/subject/mpxibttx.html