Question

我很难在对象方法中的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

    }

}

如何从提交功能中访问this.testVariable？我也使用jQuery，如果这有所不同。

我想知道这是否是最好的方法 - 也许我应该作为一个单独的函数提交，然后引用内联，如：

 init : function(){

    this.testObject.submit = this.submitForm;

 },
 submitForm : function(){
     // do validation here
     console.log(this.testVariable) // outputs testvariable

     .
     .
     .

     return valid; 
 }

但这似乎也没有用 - 我想我现在只想在我的init方法中内联提交函数。

Answer 1

一种常见的方法是将您想要的this分配给局部变量。

init: function() {
   var _this = this;
   this.testObject.submit(function() {
        console.log(_this.testVariable); // outputs testVariable 
   });
}

Answer 2

您也可以使用ES6箭头功能执行此操作：

init: function(){
    this.testObject.submit( () => {
        console.log(this.testVariable);
    }
}

箭头函数捕获封闭上下文的this值，避免将this分配给新变量或使用绑定函数。

Answer 3

当函数 - 任何函数（无论它在何处定义）被称为时，动态绑定“this”变量。

如果没有看到“提交”功能应该做什么，或者它应该被使用的地方，很难说如何改变它。您可以做的一件事是在“init”函数中定义“submit”：

init: function() {
  // whatever
  var instance = this;
  instance.submitForm = function() {
    console.log(instance.testVariable);
    // ...
  };
}

只要初始调用“init”并将“this”设置为某个对象的实例，就应该很好。

Answer 4

您只能从对象的上下文中访问oThis变量，因为您在另一个函数内部而丢失。或者通过实例化一个新对象。像这样

var testInstance = new testObject();

然后你可以使用：

访问oThis

testInstance.oThis;

但这将是多余的

我会尝试像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);

}

Answer 5

对于像我这样到达这里的任何人，可能的答案是使用箭头函数并传递“ this”应引用的对象...

function create() {

  var thing = { name: "thingy" };

  thing.doStuff = function() {
    alert(this.name);
  }

  thing.doStuff(thing);
}

此功能起作用的原因是箭头函数自动具有绑定到thisArg的最终this可选参数。

我试图问一个新问题（指的是jitin的答案），但显然，该问题是2篇相关程度稍高的帖子的重复！

从对象的内联函数中访问它

5 个答案: