2

私は JavaScript でいくつかのクラスを書き、それらのためにいくつかの FunctionFactory を書きました。しかし、私はいくつか間違ったことをしたと思います。

あなたがそれをよりよく理解できるように、コードのいくつかの名前を変更しました。

したがって、最初のクラスは「ルート」クラスです。このクラスには子があり、後で追加します。

function templateRoot(){
    this.id = "root";
    this.parent = null;
    this.children = [];

    this.editable = true; // bla

    this.render = function(){
        $.each(this.children,function(i,obj){
            this.children[i].render();
            var baseButtons = this.getBaseButtons();
            $('#'+this.id).append(baseButtons);
        });
    };
    this.addBase = addBaseFactory(this);
};

属性「addBase」は、addBaseFactory によって配信される関数を取得します...

function addBaseFactory(that){
    return function(){
        var newBase = new base(that.children.length, that.id);
        that.children.push(newBase);
    };
}

...そして、「addBase」でオブジェクトを生成するために使用される基本クラスは次のようになります。

function base(count, parent){
    this.id = parent+"_base"+count;
    this.parent = parent;
    this.children = [];
    this.remove = function (){
        $('#'+this.id).remove();        
    };
    this.render = baseRenderFactory(this);
    this.addChild = addChildFactory(this);
    this.getBaseButtons = function(){
        var addAttributeButton = new $("<button>+ Attribute</button>").button();
        var addTextButton = new $("<button>+ Text</button>").button();
        return [addAttributeButton, addTextButton];
    };
}

問題は今です。コードをデバッグし、ルート オブジェクトの「レンダリング」関数内にブレークポイントを設定すると。次に、「これ」はルートではなく「ベース」オブジェクトであることがわかります。そして、「ルート」オブジェクトがこの関数の所有者であり、私のベースにはそこに直接呼び出されない独自のレンダー関数があるため、なぜそうなのかわかりません。

そのため、行の「これ」でさえ

$.each(this.children,function(i,obj){

「ベース」オブジェクトを参照します。しかし、「これ」は「ルート」オブジェクトの中にあります...

あなたが私を助けてくれることを願っています:-)

編集：

実行するためのコード:

var test = new templateRoot();
test.addBase();
test.render();

編集2：

「addBaseFactory」の「それ」は、正しい「ベース」オブジェクトを指します。

4

2 に答える 2

2

あなたの説明はかなり紛らわしいので、あなたがやろうとしていることを誤解したかもしれませんが、ネストされた関数内で外側の関数と同じオブジェクトを期待していると思います。それは JavaScript でどのように機能するかではありません。ネストされた関数は、含まれている関数と同じものを継承しません。各関数には、関数の呼び出し方法に応じて設定される独自のオブジェクトがあります。thisthistemplateRoot()thisthisthis

これは、ネストされた関数が含まれている関数から変数を参照できるという事実を使用する 1 つの可能な解決策です。

function templateRoot(){
    var self = this; // save a reference to this for use in nested functions
    this.id = "root";
    this.parent = null;
    this.children = [];

    this.editable = true; // bla

    this.render = function(){
        $.each(self.children,function(i,obj){
            self.children[i].render();
            var baseButtons = this.getBaseButtons();
            $('#'+self.id).append(baseButtons);
        });
    };
    this.addBase = addBaseFactory(this);
};

thisJS での動作に関する詳細な説明は、 MDNにあります。

于 2013-02-15T09:59:38.827 に答える
0

jqueryは各子をこれとして送信するため、これは子をレンダリングしませんか?

this.render = function(){
    $.each(this.children,function(i,obj){
        this.children[i].render();
        var baseButtons = this.getBaseButtons();
        $('#'+this.id).append(baseButtons);
    });
};

ところで、addBaseFactory はどのスコープで呼び出されますか? 「これ」がベースにあると思うので、その範囲を指します。

于 2013-02-15T10:01:57.433 に答える