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

Question

这些取自 tuts-premium Jquery vid 教程。
http://tutsplus.com/lesson/the-this-keyword/ Jeff 每次都解释“this”指的是什么，但我不确定我是否掌握了所有这些背后的原因。

例如 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' 元素”（* 但显然它不是父对象？）

这次我们似乎在调用一个方法，但该语句仍然等同于与 Eg 1 相同的东西

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

例如 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(); 
});

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

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

对不起，这么庞大的帖子。希望这个阶段有人还在阅读……</p>

score 4 · Accepted Answer

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

当this您的代码松散时，它将引用全局对象（在 Web 浏览器中，即window）。
```
console.log(this); // window
```
当this在对象方法中时（例如在您的 Eg 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.callorFunction.apply时，如果this出现在函数内部，它将引用您传递的对象。这是一种强制this将指向的内容的方法。
```
var obj = { 
    doIt: function(){ 
        console.log(this); // window 
    }
}
obj.doIt.call(window);
```

score 0 · Accepted Answer

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

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

对于函数以外的东西，这是有道理的。鉴于：

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

你会同意表达式a和obj.a具有相同的值。函数也是如此。

简而言之：的值this取决于你调用函数的位置和方式，而不是你声明它的方式和位置，或者你在调用它之前如何引用它。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

于 2012-04-12T11:34:52.977 回答

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

4 回答 4

Related

Reference