jquery - 'this' 的 4 种不同场景。正确的解释是什么？

Question

这些取自 tuts-premium Jquery 视频教程。
http://tutsplus.com/lesson/the-this-keyword/杰夫每次都会解释“这个”指的是什么，但我不确定我是否掌握了它们背后的原因。

例如1

function doSomething(e) { 
e.preventDefault(); 
console.log(this);
} 

$('a').on('click', doSomething);

在本例中，“this 指的是 'a' 元素”(在本例中是父对象)

我想这是因为这里的语句等同于:

$('a').on('click', function (e) { 
    e.preventDefault(); 
    console.log(this);
    } 

所以'a'是父对象

例如2

var obj = { 
    doIt: function(e){ 
    e.preventDefault(); 
    console.log(this);
    }
}

$('a').on('click',  obj.doIt);

在这种情况下，“this 仍然引用 'a' 元素”(*但显然它不是父对象？)

看来这次我们正在调用一个方法，但该语句仍然等同于 E.g. 1

*教程中的一件事让我有点困惑。我认为“this”总是指父对象，因此在这种情况下“a”仍然是父对象。但是(在教程的 05.23 处)他推断情况并非如此，并指出“有时您可能希望 'this' 引用它的父对象，即 'obj'”，在这种情况下他创建了例如 3.

例如3

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

$('a').on('click',  function(e){    
obj.doIt(); 
        };
e.preventDefault(); 

在本例中“this 指的是 obj 对象”

我认为这是因为“this”位于嵌套函数中，因为该语句相当于:

$('a').on('click',  function(){    
function(){ console.log(this);}
};
e.preventDefault(); 

我不太明白为什么，特别是当我在一篇文章中读到在嵌套函数中“this”“迷失方向并引用头对象(窗口对象)”时。

例如4

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

$('a').on('click',  function(e){    
       obj.doIt.call(this);             
       e.preventDefault(); 
});

在本例中“This 指的是 'a'”

根据 Javascript Definitive Guide，“call() 的第一个参数是要调用该函数的对象”这里“this”用作第一个参数。但“this”不是要调用该函数的对象？？
我想我知道 call 函数是用来调用该函数并使用其第一个参数作为指向不同对象的指针，但我不明白为什么使用“this”意味着该函数由“a”调用。我在其他 call() 示例中也没有看到过这种情况。

抱歉发了这么长的帖子。希望这个阶段有人仍在阅读……

Answer 1

我希望这有助于澄清问题，它确实可能令人困惑。

• 当 this如果您的代码松散，它将引用全局对象(在网络浏览器中，即 window )。

  console.log(this); // window
  

• 当 this在对象方法内部(如示例 3 所示)，它将引用该对象。这适用于用 new 实例化的对象，或作为对象文字(如您的示例)。

   var obj = { 
       doIt: function(e){ 
           console.log(this);
       }
   }
   obj.doIt(); // obj
  

• 在事件处理程序内，this将引用事件绑定(bind)到的对象。

  // This is the plain js equivalent of your jQuery example
  document.getElementsByTagName['a'][0].addEventListener('click', function(e){
      console.log(this); // the first anchor on the document
  });
  
  // This is exactly the same:
  var clickHandler = function(e){
      console.log(this); // the first anchor on the document
  };
  document.getElementsByTagName['a'][0].addEventListener('click', clickHandler); 
  
  // Even if the handler is defined inside of another object, this will be
  // the obj the event is bound to. It's the case of your E.g. 2
  var obj = { 
      doIt: function(e){  
          console.log(this); // the first anchor on the document
      }
  }
  document.getElementsByTagName['a'][0].addEventListener('click', obj.doIt);
  // When you pass obj.doIt to addEventListener above, you are passing a reference
  // to that function. It's like "stealing" the function from the object
  

• 当一个对象作为第一个参数传递给 Function.call 时或Function.apply ，如果this出现在函数内部，它将引用您传递的对象。这是一种强制的方式 this将指向。

  var obj = { 
      doIt: function(){ 
          console.log(this); // window 
      }
  }
  obj.doIt.call(window);