4

OOP Javascript は初めてで、thisキーワードとイベントに問題があります。

私が達成しようとしているのは、複数の DOM オブジェクトがあり、それらに共通のイベントをバインドするだけでなく、前述のオブジェクトに関するデータをグローバル コンテナーに保持したい (実行時のパフォーマンスを向上させるため) ことです。

だから私がやっていることは基本的にこれです： 

function ClassThatDoesSomething() {
    /* keeps node ids for processing in this.init */
    this.nodes = new Array();

    /* keeps processed node data for fast access */
    this.nodeData = new Array();

    this.sthAddNodes = function(/* ids */) {
        /* appends node ids to local variable (this.nodeData) */
    }

    function init() {
        /* gathers data from all nodes that were 
           added before and stores it in this.nodeData */

        /* here, unsurprisingly, 'this' references the window element*/

        addEvent(window,'scroll',this.scroll);
    }

    function scroll() {
        /* do stuff when user scrolls the page */

        /* 'this' references the window element here too */
    }
    addEvent(window,'load',this.init);
}

後で、ドキュメントの本文に次のように追加できます。

var Ctds = new ClassThatDoesSomething();

さらに、次の方法で DOM 要素を追加します。

Ctds.addNodes(ids);

これ以上の実装コードは必要ありません。

質問: window 要素ではなくおよびメソッドでJS クラス インスタンスにアクセスする。initscroll

キーワードである必要はありませんがthis、それでも何も思いつきませんでした。

PS

  • addEventイベントをアタッチするための非常に基本的な関数です。IE/Fx に適しているだけで、他には何もしません。
  • 私が書いているコードはすでに機能していますが、手続き型の形式で、OOP したかっただけです。
  • マイナーなサブ質問として、getter/setter メソッドは javascript では推奨されていないという印象を受けましたが、使用しても問題ありませんか?
4

7 に答える 7

10

私が気づいたことの1つは、インスタンスのメソッドでinitもメソッドでもないということです。scroll

したがって、load イベントに追加する必要はinitなく、次のように追加する必要があります。this.init

addEvent(window,'load',init); // No "this." needed

同様に：

addEvent(window,'scroll',scroll);

それらをクラスに移動することにした場合 (たとえばthis.scroll、this.initなど)、への参照を保存して、thisに渡される無名関数で参照できaddEventます。

var self = this;

this.init = function() {
    addEvent(window, 'scroll', function() {
        self.scroll()
    })
};

this.scroll = function() { /* ... */ };

addEvent(window,'load',function() {
    self.init()
});

これはクロージャーと呼ばれます。

于 2009-10-16T13:34:30.427 に答える
2 
function MyConstructor() {
    this.foo = "bar";
    var me = this;
    function myClosure() {
        doSomethingWith(me.foo);
    }
}
于 2009-10-16T13:36:27.920 に答える
1

this関数が実行されるまで決定されません。イベントリスナーをアタッチするときは、スコープを持たない関数を渡します。したがって、指定されたイベントでは、関数はのスコープで実行されます。windowつまり、thisはに等しくなりwindowます。特定のスコープで強制的に実行するには、次のような、等しい新しい変数を作成するなどのトリックを使用できますthis。

var that = this;
...
addEvent(window,'scroll', function() {
    that.scroll()
});
于 2009-10-16T13:45:11.273 に答える
1

Function プロトタイプにメソッドを追加して、任意の関数を任意のオブジェクトにバインドできるようにします。

Function.prototype.bind = function(object) {
   var __method = this;
   return function() {
      return __method.apply(object, arguments);
   };
};

インスタンスでイベント ハンドラーを宣言します (整理しておきます)。

function ClassThatDoesSomething() {

  this.events = {
    init: ClassThatDoesSomething.init.bind(this),
    scroll: ClassThatDoesSomething.scroll.bind(this),
    etc: ClassThatDoesSomething.etc.bind(this)
  };
  ...
}

これで、イベントを参照するたびに、自動的にクラス インスタンスにバインドされます。例えば：

function init() {
  addEvent(window,'scroll',ClassThatDoesSomething.events.scroll);
}
于 2009-10-16T13:52:37.000 に答える
0

これを行う：

var ClassThatDoesSomething = function() {
    /* keeps node ids for processing in this.init */
    this.nodes = new Array();

    /* keeps processed node data for fast access */
    this.nodeData = new Array();
}

ClassThatDoesSomething.prototype.sthAddNodes = function(/* ids */) {
        /* appends node ids to local variable (this.nodeData) */
    }
}

ClassThatDoesSomething.prototype.init = function() {
        /* gathers data from all nodes that were 
           added before and stores it in this.nodeData */

        /* here, unsurprisingly, 'this' references the window element*/

        addEvent(window,'scroll',this.scroll);
    }
}
ClassThatDoesSomething.prototype.scroll = function() {
        /* do stuff when user scrolls the page */

        /* 'this' references the window element here too */
    }
    addEvent(window,'load',this.init);
}
于 2009-10-16T13:45:51.600 に答える
0

そのためにクロージャーを使用できます。

function ClassThatDoesSomething() {
    var self=this;
    // ...

    function init() {
        addEvent(window,'scroll',self.scroll);
    }
}
于 2009-10-16T13:34:00.990 に答える
-1

このトリックはうまくいくはずです：

function ClassThatDoesSomething() {
...
    this.This = this;
...
}

次に、これらの問題のあるメソッド内で使用できます'This'。

お役に立てれば。

于 2009-10-16T13:36:35.960 に答える