Question

这些来自tuts-premium Jquery vid教程 http://tutsplus.com/lesson/the-this-keyword/ 杰夫解释了每次“这个”的含义，但我不确定我是否已经掌握了所有这些背后的推理。

E.g。 1

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

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

在这种情况下，“这指的是'a'元素”（在这种情况下是父对象）

我想这是因为这里的陈述相当于：

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

所以'a'是父对象

E.g。 2

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

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

在这种情况下“这仍然是指'a'元素”（*但显然它不是父对象？）

这次我们正在调用一种方法，但声明仍然等同于E.g. 1

*教程中的一件事让我有些困惑。我认为'this'总是指父对象，所以在这种情况下'a'仍然是父对象。但是（在教程中的05.23）他推断并非如此，他说“有时你可能希望'这''引用它的父对象，这将是'obj'”，在这种情况下，他创造了这种情况。

E.g。 3

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

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

在这种情况下“这指的是obj对象”

我认为这是因为'this'在嵌套函数中，因为这个语句相当于：

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

我真的不明白为什么，特别是当我在一篇文章中读到嵌套函数'这''失去方向并且引用头对象（窗口对象）时“。

E.g.4

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

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

在这种情况下“这指的是'a'”

根据Javascript权威指南“call（）的第一个参数是调用函数的对象” 这里“this”用作第一个参数。但是“this”不是调用函数的对象??
我想我得到调用函数来调用函数并使用它的第一个参数作为指向不同对象的指针，但我不明白为什么使用'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将引用事件绑定的对象。

// 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);
```

Answer 2

this在JavaScript中的行为方式起初有点令人困惑。基本上，与变量（静态范围）不同，this 动态作用域。也就是说，this的值取决于您调用函数的位置，而不是您编写它的位置。

当您将函数传递给on时，稍后会从this是相关元素的上下文调用它。无论如何获得该功能，都会发生这种情况。也就是说，函数不关心您是使用obj.fn之类的语法还是仅使用其名称fn来访问它 - 在任何一种情况下表达式的值都是相同的。

除了功能以外的东西，这是有道理的。给出：

var a   = 10,
    obj = { a : 10 };

您同意表达式a和obj.a具有相同的值。功能也是如此。

简而言之：this的值取决于您调用函数的位置和方式，而不是在调用函数之前和之后如何以及在何处声明函数。

Answer 3

https://developer.mozilla.org/en/JavaScript/Reference/Operators/this是this关键字的简短介绍。并查看call()的参考资料。

当jQuery在dom元素的上下文中调用（是的，使用.call()方法）事件处理程序时，所有示例都会被解释。

Answer 4

真的很感激这些回应家伙。我在早些时候发布并试过（并且需要）花一点时间来消化你的反馈。

https://developer.mozilla.org/en/JavaScript/Reference/Operators/this是一个很棒的喊叫。我读了很少的文章/ tuts，这个似乎是最好的之一。

我认为主要的启示是绑定到'this'的对象取决于调用函数的方式/位置（调用上下文），而不是函数的定义方式和位置。

所以只是将问题归还Q＆amp; A范围，并尝试根据你们的回答来回答我自己的问题......

<强> E.g。 1 这里：'doSomething'函数在click处理程序的上下文中调用，因此绑定到'this'的对象是“a”

<强> E.g。 2 Click click处理程序仍然触发该函数，因此绑定到'this'的对象是“a”

<强> E.g。 3 在嵌套函数中，调用上下文是obj.doIt（）。因此，正如他在教程中所说，绑定到'this'的对象是“obj”。

虽然，基于developer.mozilla.org下面的示例中的类似逻辑，但不是真正绑定到“obj.doIt”的对象：

o.b = {g: independent, prop: 42};  
console.log(o.b.g()); // logs 42

“这个绑定只受最直接的成员引用的影响......。这个函数内部将引用ob这个对象本身是o的成员这一事实没有任何后果;最直接的引用就是重要的。 “

<强> E.g。 4

这里 - 'call'的工作是间接调用函数，好像它是一个新对象的方法 - 在这种情况下我们定义为'this'。这里'this'指的是“a”，因为它是点击处理程序触发的函数的一部分。

我希望这更接近一点。我觉得这是一个笨蛋（可怕的双关语），因为答案正在呈现给我，但我仍然不完全自信我正在坚持这个概念。

如果我必须爬回我的洞一段时间才能消化，我会恳求新的状态，现在就崩溃了Javascript和JQuery几周。

再次感谢大家的反馈。

“这个”的4种不同场景。什么是正确的解释？

4 个答案: