Javascript 从对象的内联函数中访问 this
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3590685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing this from within an object's inline function
提问by Matt
I'm having difficulty referencing "this" from within a javascript inline function, within an object method.
我在对象方法中的 javascript 内联函数中引用“this”有困难。
var testObject = {
oThis : this,
testVariable : "somestring",
init : function(){
console.log(this.testVariable); // outputs testVariable as expected
this.testObject.submit(function(){
var anotherThis = this;
console.log(this.testVariable) // undefined
console.log(oThis.testVariable) // undefined
console.log(testObject.testVariable) // outputs testVariable
console.log(anotherThis.testVariable) // undefined
}
}
How do I access this.testVariablefrom within the submit function?
I'm also using jQuery as well, if that makes a difference.
如何this.testVariable从提交功能中访问？我也在使用 jQuery，如果这有区别的话。
I wonder if this is the best approach - and maybe I should have submit as a separate function, and then reference that inline, like:
我想知道这是否是最好的方法 - 也许我应该将提交作为一个单独的函数，然后引用该内联，例如：
init : function(){
this.testObject.submit = this.submitForm;
},
submitForm : function(){
// do validation here
console.log(this.testVariable) // outputs testvariable
.
.
.
return valid;
}
But this didn't seem to work either - and I think I'd just like to keep the submit function inline within my initmethod for now.
但这似乎也不起作用 - 我想我现在只想将提交函数保持在我的init方法中。
回答by Matti Virkkunen
A common way is to assign the thisyou want to a local variable.
一种常见的方法是将this您想要的分配给局部变量。
init: function() {
var _this = this;
this.testObject.submit(function() {
console.log(_this.testVariable); // outputs testVariable
});
}
回答by jitin
You could also do this using ES6 arrow functions:
你也可以使用 ES6 箭头函数来做到这一点：
init: function(){
this.testObject.submit( () => {
console.log(this.testVariable);
}
}
Arrow functions capture the thisvalue of the enclosing context, avoiding the need to assign thisto a new variable, or to use bound functions.
箭头函数捕获this封闭上下文的值，避免分配this给新变量或使用绑定函数的需要。
回答by Pointy
The "this" variable is bound dynamically when a function — anyfunction, regardless of where it was defined — is called.
当一个函数——任何函数，不管它在哪里定义——被调用时，“this”变量是动态绑定的。
Without seeing what that "submit" function is supposed to do, or where it's supposed to be used, it's hard to say how to change it. One thing you could do is to define "submit" in your "init" function:
没有看到“提交”功能应该做什么，或者应该在哪里使用它，很难说如何改变它。您可以做的一件事是在“init”函数中定义“提交”：
init: function() {
// whatever
var instance = this;
instance.submitForm = function() {
console.log(instance.testVariable);
// ...
};
}
As long as "init" is called initially with "this" set to an instance of one of your objects, you should be good.
只要最初调用“init”并将“this”设置为您的对象之一的实例，您就应该很好。
回答by SethZanderJensen
You can only access the oThis variable from the context of the object, which is lost because you are inside of another function. or through instantiating a new object. like this
您只能从对象的上下文中访问 oThis 变量，因为您在另一个函数内部，该变量会丢失。或者通过实例化一个新对象。像这样
var testInstance = new testObject();
Then you could access oThis by using:
然后您可以使用以下方法访问 oThis：
testInstance.oThis;
but that would be redundant
但这将是多余的
I would try something like this Matt:
我会尝试这样的马特：
init: function(){
var self = this; // this allows you to access the parent object from different contexts
this.testObject.submit(function(){
console.log(self.testVariable);
}
回答by TedTrippin
For anyone arriving here like me a possible answer is to use arrow functions and pass in the object that "this" should refer to...
对于像我一样到达这里的任何人，一个可能的答案是使用箭头函数并传入“this”应该指的对象......
function create() {
var thing = { name: "thingy" };
thing.doStuff = function() {
alert(this.name);
}
thing.doStuff(thing);
}
The reason this works is arrow functions automatically have a final thisArgoptional parameter which is bound to this.
这样做的原因是箭头函数自动具有一个thisArg绑定到this.
I tried asking a new question (which referred to jitin's answer) but apparently the question was a duplicate of 2 huge, mildly related posts!
我试着问一个新问题（指的是 jitin 的回答），但显然这个问题是 2 个巨大的、轻度相关的帖子的重复！
