谈谈我对JS中this的理解

好吧,JS中,作用域、闭包和原型都说了,今天我们就再谈谈this吧,this我更倾向于把它理解成为一个特殊变量,JS解释器在创建任何活动对象时(参考前面关于作用域的博文),都会创建一个this变量,并且将它指向一个对象(可编码干预)。下面以代码为例进行讲解。

  1. 处于全局作用域下的this:
    this;/*window*/
    
    var a = {name: this}/*window*/
    
    var b = [this];/*window*/

     在全局作用域下,this默认指向window对象。

  2. 处在函数中的this,又分为以下几种情况:
    1. 一般定义的函数,然后一般的执行:
      var a = function(){
        
         console.log(this);
      }
      a();/*window*/

      this还是默认指向window。

    2. 一般定义,用new调用执行:
      var a = function(){
        
         console.log(this);
      }
      new a();/*新建的空对象*/

      这时候让this指向新建的空对象,我们才可以给空对象初始化自有变量(参照之前关于原型的博文)。

    3. 作为对象属性的函数,调用时:
      var a = {
                 f:function(){
                     console.log(this)
                   }
               }
      a.f();/*a对象*/

      这时候this指向调用f函数的a对象。

  3. 通过call()和apply()来改变this的默认引用:
    var b = {id: 'b'};
    var a = {
               f:function(){
                   console.log(this)
                 }
             }
    a.f.call(b);/*window*/

    所有函数对象都有的call方法和apply方法,它们的用法大体相似,f.call(b);的意思是,执行f函数,并将f函数执行期活动对象里的this指向b对象,这样标示符解析时,this就会是b对象了。不过调用函数是要传参的。所以,f.call(b, x, y);    f.apply(b, [x, y]);好吧,以上就是用call方法执行f函数,与用apply方法执行f函数时传参方式,它们之间的差异,大家一目了然:apply通过数组的方式传递参数,call通过一个个的形参传递参数。

  4. 一些函数特殊执行情况this的指向问题:
    1. setTimeout()和setInverval():

      var a = function(){
        console.log(this);
      }
      
      setTimeout(a,0);/*window*/

      setInterval()类似。

    2. dom模型中触发事件的回调方法执行中活动对象里的this指向该dom对象。

this就总结到这里,如有错误,欢迎指正O(∩_∩)O

原文地址:https://www.cnblogs.com/liubingblog/p/4348548.html