プロトタイプのサブオブジェクトこれはベースオブジェクトを参照していません

Question

私は自分のコードをより読みやすくしようとしていました。これを行う方法はありますか？ thisを呼び出すbuild.listとき

function Something(){ 
    this.$container = $('<div>'); 

    return this; 
} 

Something.prototype.build = { 
    list: function(){ 
     this.$container.append(...); 
    } 
} 

は現在、何が起こるかはthisはbuildオブジェクト、ないSomethingオブジェクトを参照し、あります。

すべての名前をbuildList,buildComponentArrayなどに改名しない限り、この方法を使用する別の方法を理解できません。セマンティクスの可能性があります。

Answer 1

これは基本的にあなたがthisにバインドされた機能にごthis.buildオブジェクト内のすべての機能を結合します

function Something(){ 
    this.$container = "<div></div>"; 

    //this creates a new object in the prototype chain for every instance 
    this.build = Object.create(this.build); 
    for (var prop in this.build) { 
     if (this.build.hasOwnProperty(prop) && typeof this.build[prop] === "function") { 
      this.build[prop] = this.build[prop].bind(this); 
     } 
    } 
    return this; 
} 

Something.prototype.build = { 
    list: function(){ 
     console.log(this.$container); 
    } 
} 

可能な解決策です。これをユーティリティ関数で抽出し、必要なすべてのネストされたオブジェクトをバインドすることができます。プロトタイプチェーンを操作/構築することも可能でなければならないと思われますが、見つけられませんでした。

あなたのほとんどはリファクタリングをお勧めしますが、私はこれをそこに置くと思っていますので、完全なソリューションがあります。

編集

指摘したように、あなたはthisを正しくバインド持つためにあなたのコンストラクタにbuildインタフェースを移動する必要があります。このソリューションは、コードを移動することなくこれを行うための単なる方法です。この1つはクリーンであり、より明示的にはプロトタイプいじりせずに何をするかを述べObject.create

を使用せずに

ソリューション。

function Something(){ 
    this.$container = "<div></div>"; 

    var build = this.build; 
    this.build = {}; 
    for (var prop in build) { 
     if (build.hasOwnProperty(prop) && typeof build[prop] === "function") { 
      this.build[prop] = build[prop].bind(this); 
     } 
    } 
    return this; 
} 

Something.prototype.build = { 
    list: function(){ 
     console.log(this.$container); 
    } 
}