JS：EventListener関数の戻り値

Question

私のクラスのインスタンスの配列を返そうとしています。しかし、復帰は単に私が信じている機能window.addEventListener('load', function(){});から戻ることです。コントロールにpluginsと入力すると、定義されません。

;class Parallax { 

    constructor(node) { 

     // Settings and defaults 
     // this.settings = { 
     //  container: null, 
     //  panels: [], 
     //  defaultSpeed: 0.5 
     // }; 

    } 

    static initialize() { 

     // Ensure DOM has loaded 
     window.addEventListener('load', function() { 
      // Does page contain any parallax panels? 
      let panels = document.querySelectorAll('[data-parallax]'); 
      if (panels.length > 0) { 

       let instances = []; 

       // Parallax panels found, create instances of class and return them for reference 
       for (const panel in panels) { 
        if (panels.hasOwnProperty(panel)) { 
         instances.push(new this(panels[panel])); 
        } 
       } 

       return instances; 
      } else { 
       // Page doesn't appear to have Parallax 
       return false; 
      } 
     }.bind(this)); 
    } 
} 
window.plugins = { "parallax-instances": Parallax.initialize() }; 

ないこれを行うことについて移動する方法があまりにも確かに、私は値を返さないことが、window.addEventListenerに変数を代入しようとしています。私はthisをイベントリスナー内の関数呼び出しにバインドしてクラススコープを保持しています。

編集： 私は単純に以下を実行することは、第1 constructorメソッドを実行します当然のように、クラスの可能性のある複数のインスタンスを返す方法をあまりにもわからないが、以下のコードを持っていることによって、プラグインを開始したいんでした。

window.plugins = { "parallax-instances": new Parallax }; 

編集2 私は望ましい結果を得るためのEventListenerの外のインスタンスを返す場合。しかし、これはページが正しく読み込まれる前に潜在的にinstancesを返す可能性がありますか？

{parallax-instances: Array(2)} 
    parallax-instances:Array(2) 
     0:Parallax {} 
     1:Parallax {} 
     length:2 
    __proto__:Array(0) 
    __proto__:Object 

Answer 1

あなたinitializeは何も返していません。 instancesをイベントリスナの外に持ち上げて返すと、他のreturn文を削除することができます。 コールバックが実際に呼び出されるまで（load以降）、返される配列は空であることに注意してください。

static initialize() { 

    const instances = []; 

    window.addEventListener("load",() => { 

     const panels = document.querySelectorAll("[data-parallax]"); 
     for (let i = 0; i < panels.length; i++) 
      instances.push(new this(panels[ i ])); 

    }); 

    return instances; 

} 

すぐに配列を返すことになるので、あなたの偽の構文が消えてしまうと、あなたの代わりに.length === 0をテストしたいです。代わりにgetterを使用して、指定した動作を取得できます。

Answer 2

イベントリスナー関数がコールバックされ、イベントが（負荷に、あなたのケースで）発生したときにのみ実行されます。私は、コンソールに何を得る

static initialize() { 

     this.instances = []; 

     // Ensure DOM has loaded 
     window.addEventListener('load', function() { 
      // Does page contain any parallax panels? 
      let panels = document.querySelectorAll('[data-parallax]'); 
      if (panels.length > 0) { 

       // Parallax panels found, create instances of class and return them for reference 
       for (const panel in panels) { 
        if (panels.hasOwnProperty(panel)) { 
         this.instances.push(new this(panels[panel])); 
        } 
       } 
      } 
     }.bind(this)); 

     return this.instances; 
    } 

。

コールバックで値を返すことはできません。外部スコープ（たとえば、クラス内）で変数を使用し、イベントリスナー内で変数を再割り当てすることができます。

など。 （代わりにイベントリスナーからの復帰）

constructor() { 
    this.instances = [] 
} 

そして：

this.instances = instances