任何人都可以向我解释这个关键字的行为
[英]Can any one explain me the behaviours of this keyword
问题描述
I'm little bit confused about the behaviours of this keyword. 
我对this关键字的行为有点困惑。 I was trying to call a function when a button was clicked. 单击按钮时我试图调用一个函数。 But as I know when I call function on click of an element the this should refer to the element and it should return that element when we console. 但正如我所知，当我on click of an element the this should refer to the element时调用函数on click of an element the this should refer to the element ，它应该在我们控制时返回该元素。 but in my case it is returning [object HTMLInputElement] . 但在我的情况下，它返回[object HTMLInputElement] 。
code : 代码：
var self=this,submitAns=$('#submitAns');
submitAns.on('click',self.verifyAns);
verifyAns:function(e){
console.log('from verifyAns : '+this);
e.preventDefault();
}
The result from the console is [object HTMLInputElement] . 控制台的结果是[object HTMLInputElement] 。
can anyone explain why, and how can I get the element. 谁能解释为什么，我怎么能得到这个元素。
5 个解决方案
解决方案1
2 已采纳 2014-02-28 09:30:10
this indeed refer's to the element. this确实是指元素。 You can do some operations on that element using this like - 您可以使用this对该元素执行某些操作 -
$(this).addClass('something');
$(this).html('something');
$(this).val('something'); // if it is a form element
console.log(this.id); // prints id of clicked element
解决方案2
0 2014-02-28 09:26:19
When a function is created, a keyword called this is created (behind the scenes), which links to the object in which the function operates. 创建函数时，会创建一个名为this的关键字（在幕后），该关键字链接到函数所在的对象。 Said another way, this is available to the scope of its function, yet is a reference to the object of which that function is a property or method. 换句话说，这可用于其功能的范围，但是对该功能是属性或方法的对象的引用。
<!DOCTYPE html><html lang="en"><body><script>
var cody = {
living: true,
age: 23,
gender: 'male',
getGender: function () { return cody.gender; }
};
console.log(cody.getGender()); // Logs 'male'.
</script></body></html>
Notice how inside of the getGender function, we are accessing the gender property using dot notation (eg, cody.gender ) on the cody object itself. 注意getGender函数的内部，我们在cody对象本身上使用点表示法（例如， cody.gender ）访问gender属性。 This can be rewritten using this to access the cody object because this points to the cody object. 这可以使用this来重写以访问cody对象，因为this指向cody对象。
Your correct code will be like this. 你的正确代码就是这样的。
var submitAns=$('#submitAns');
submitAns.on('click', function verifyAns(e){
console.log('from verifyAns : '+ $(this));
e.preventDefault();
});
解决方案3
0 2014-02-28 09:30:21
Actually "this" refers to the function where it's used, it doesn't represent the element, so if you have two function and in both you are using "this" then first "this will represent the first function and second "this" will represent the second function. If you want to call something else then you need to create object of that function/element and then you can call them. 实际上“this”指的是它所使用的函数，它不代表元素，所以如果你有两个函数，并且你在使用“this”，那么首先“这将代表第一个函数，第二个”这个“将”代表第二个函数。如果你想调用其他东西，那么你需要创建该函数/元素的对象，然后你可以调用它们。
You may find a better answer here: 你可以在这里找到一个更好的答案：
Understanding the Basic Concept of "this" Keyword 理解“这个”关键词的基本概念
解决方案4
0 2014-02-28 09:31:38
It's an HTML object, you can stringify it for your current output: 它是一个HTML对象，您可以将其stringify当前输出：
console.log('from verifyAns : '+JSON.stringify(this));
Or output it directly to the console as, you will then be able to see the entire block of HTML code: 或者直接将其输出到控制台，然后您就可以看到整个HTML代码块：
console.log(this);
解决方案5
0 2014-02-28 09:58:28
If you want your input element as an object in then use this 如果您希望将input元素作为对象，请使用此方法
console.log(this);
instead of 代替
console.log('from verifyAns : '+this);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.