从对象的内联函数中访问 this答案

【问题标题】：Accessing this from within an object's inline function从对象的内联函数中访问 this
【发布时间】：2011-04-05 04:15:01
【问题描述】：

我在对象方法中的 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，如果这有影响的话。

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

 init : function(){

    this.testObject.submit = this.submitForm;

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

     .
     .
     .

     return valid; 
 }

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

【问题讨论】：

Why doesn't this closure have access to the 'this' keyword? - jQuery的可能重复

标签： javascript function object inline this

【解决方案1】：

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

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

【讨论】：

哦，“this”的赋值在 init 函数内部——当然……该死！这就是我试图做的，但是在匿名函数中分配它......感谢您的帮助！
现在我觉得我是世界上最愚蠢的人-/

【解决方案2】：

你也可以使用 ES6 箭头函数来做到这一点：

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

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

【讨论】：

【解决方案3】：

当一个函数——任何函数，无论它是在哪里定义的——被调用时，动态绑定“this”变量。

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

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

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

【讨论】：

【解决方案4】：

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

var testInstance = new testObject();

然后您可以使用以下命令访问 oThis：

testInstance.oThis;

但那将是多余的

我会尝试像这样的马特：

init: function(){

var self = this; // this allows you to access the parent object from different contexts

this.testObject.submit(function(){

    console.log(self.testVariable);

}

【讨论】：

【解决方案5】：

一个可能的答案是使用箭头函数并传入“this”应该引用的对象...

function create() {

  var thing = { name: "thingy" };

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

  thing.doStuff(thing);
}

这样做的原因是箭头函数自动有一个最终的thisArg 可选参数，该参数绑定到this。

【讨论】：