web-dev-qa-db-ja.com

オブジェクトのインライン関数内からこれにアクセスする

オブジェクトメソッド内の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; 
 }

しかし、これも機能していないようでした。今のところ、submit関数をinitメソッド内でインラインのままにしておきたいと思います。

javascriptfunctionobjectinlinethis
19
Matt

一般的な方法は、必要なthisをローカル変数に割り当てることです。

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

ES6矢印関数を使用してこれを行うこともできます。

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

矢印関数は、囲んでいるコンテキストのthis値をキャプチャし、thisを新しい変数に割り当てたり、バインドされた関数を使用したりする必要をなくします。

7
jitin

「this」変数は、関数—any関数が、定義された場所に関係なく— 呼び出されたの場合に動的にバインドされます。

その「送信」機能が何をするのか、どこで使われるのかを見ずに、それを変更する方法を言うのは難しいです。あなたができることの1つは、「init」関数で「submit」を定義することです。

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

「init」が最初に呼び出され、「this」がオブジェクトの1つのインスタンスに設定されている限り、問題はありません。

1
Pointy

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);

}
1
SethZanderJensen