javascriptのプロトタイプからオブジェクトのプロパティにアクセスするには？

Question

printDataを呼び出すと、以下のクラスがあります。this.collectionは未定義です。

printData（）内のプロトタイプからthis.collectionにアクセスするにはどうすればよいですか？または、私はクラスの構造を変更する必要がありますか？実際には、オブジェクトは、internが階層構造でオブジェクトを返す関数を返します。

ありがとうございます！

サンプルクラス：

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     return { 
      action: function() { 
       var y = { 
        printData: function() { 
         alert('Hello ' + this.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

使用法：ES5構文とコール構造を維持

var a = new DbProvider({ "Name": "John" }); 
a.create().action().printData(); 

Answer 1

のように、正確にこのポインタを追跡する必要があります

それとも、少しリファクタリングとDbProviderの外側のスコープにthatを移動し、ES6クラスを使用することも可能であるprintData

var DbProvider = (function() { 
 
    var that; 
 
    function DbProvider(db) { 
 
     that = this; // create a reference to "this" object 
 
     that.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
     return { 
 
      action: function() { 
 
       var y = { 
 
        printData: function() { 
 
         alert('Hello ' + that.collection.Name); 
 
        } 
 
       }; 
 
       return y; 
 
      } 
 
     }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 
var a = new DbProvider({ "Name": "John" }); 
 
a.create().action().printData();

Answer 2

は、溶液は次のようになります。確かに

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     var that = this; 
     return { 
      action: function() { 
       var y = { 
        printData: function() { 
         console.log('Hello ' + that.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

エレガントではないが、それは動作します:)

構造体を変更したくない場合は、関数をarrow functionsに変更するとこの動作が得られます。

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     return { 
      action:() => { 
       var y = { 
        printData:() => { 
         alert('Hello ' + this.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

この「クラス」を作成する方法は間違いなく非標準です。あなたがそれをより良く構造化する方法の例を望むかどうか私に教えてください。

Answer 3

は、ちょうどあなたがthis参照を保存してprintData機能

var DbProvider = (function() { 
 
    function DbProvider(db) { 
 
     var that = this; // create a reference to "this" object 
 
     that.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
     var self = this; 
 
     return { 
 
      action: function() { 
 
       var y = { 
 
        printData: function() { 
 
         alert('Hello ' + this.collection.Name); 
 
        }.bind(self) 
 
       }; 
 
       return y; 
 
      } 
 
     }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 
var a = new DbProvider({ "Name": "John" }); 
 
a.create().action().printData();

にバインドすることができ、この

var DbProvider = (function() { 
 
    function DbProvider(db) { 
 
    this.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
    var self = this; 
 
    return { 
 
     action: function() { 
 
     var y = { 
 
      printData: function() { 
 
      alert('Hello ' + self.collection.Name); 
 
      } 
 
     }; 
 
     return y; 
 
     } 
 
    }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 

 

 
let dbProvider = new DbProvider({ 
 
    Name: "test" 
 
}); 
 
dbProvider.create().action().printData();