Javascript：将OOP方法附加到事件和“this”关键字 [英] Javascript: attaching OOP methods to events and the 'this' keyword

问题描述

我是新的OOP Javascript，并且在这个关键字和事件中遇到麻烦。我想要实现的是：我有多个DOM对象，并且不仅要将常规事件绑定到它们，而且要在一个全局容器中保留上述对象的一些数据（以增加运行时性能）。

所以我做的基本是这样的：

  function ClassThatDoesSomething（）{
 / *保留节点ID进行处理in this.init * / 
 this.nodes = new Array（）; 
 
 / *保存经过处理的节点数据进行快速访问* / 
 this.nodeData = new Array（）; 
 
 this.sthAddNodes = function（/ * ids * /）{
 / *将节点ids附加到局部变量（this.nodeData）* / 
} 
 
函数init（）{
 / *从以前添加的
的所有节点收集数据，并将其存储在this.nodeData * / 
 
 / *中，不出意料， 'this'引用窗口元素* / 
 
 addEvent（window，'scroll'，this.scroll）; 
} 
 
函数scroll（）{
 / *在用户滚动页面时执行操作* / 
 
 / *'this'引用窗口元素这里也是* / 
} 
 addEvent（window，'load'，this.init）; 
} 
  

稍后在文档正文中，我可以添加：

  var Ctds = new ClassThatDoesSomething（）; 
  

进一步，通过以下方式添加DOM元素：

  Ctds.addNodes（IDS）; 
  

不需要进一步的实施代码。

问题： 如何访问 init 中的 JS类实例 code> scroll 方法，不 窗口元素。

我不知道这个 c $ c这个任何东西。

PS

• addEvent 是附加事件的极其基本的功能，只是IE / Fx


• 我正在写的代码已经正常运行，但是在程序上，我只是想OOP'd。


• 作为一个小的子问题，我以某种方式得到印象，在javascript中不鼓励getter / setter方法，如果我使用它，它可以吗？

解决方案

我注意到的一点是， init 或 scroll 是实例上的一个方法。

所以你只需要添加 init 而不是 this.init 加载事件：

  addEvent（window，'load'，init）; // 没有这个。需要
  

同样：

 的addEvent（窗口， '滚动'，滚动）; 
  

如果您决定将其移动到课堂（例如 this.scroll 和 this.init 等），您可以保存对 的引用，并参考它在一个匿名函数传递给 addEvent ：

  var self = this ; 
 
 this.init = function（）{
 addEvent（window，'scroll'，function（）{
 self.scroll（）
}）
}; 
 
 this.scroll = function（）{/ * ... * /}; 
 
 addEvent（window，'load'，function（）{
 self.init（）
}）; 
  

这被称为关闭。

I am new to OOP Javascript and am having trouble with the this keyword and events.

What I'm trying to achieve is: I have multiple DOM objects and want to not only bind a common event to them, but keep some data about the aforementioned objects in a global container (to increase runtime performance).

So what I do is basically this:

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);
}

Later, in the document body, I could just add this:

var Ctds = new ClassThatDoesSomething();

And further on, add DOM elements by:

Ctds.addNodes(ids);

No further implementation code would be required.

QUESTION: How to access the JS class instance in the init and scroll methods and not the window element.

It doesn't have to be through the this keyword, I know, but still I didn't come up with anything.

P.S.

• addEvent is an extremely basic function to attach events, it's just IE/Fx friendly and does nothing else.
• The code I'm writing is already functional, but in procedural form, I just wanted to OOP'd it.
• As a minor sub-question, I got the impression somehow, that getter/setter methods are discouraged in javascript, is it okay if I use them?

解决方案

One thing I notice is that neither init nor scroll is a method on the instance.

So you only need to add init and not this.init to the load event:

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

And similarly:

addEvent(window,'scroll',scroll);

If you do decide to move them to the class (eg this.scroll and this.init etc), you can save a reference to this and refer to it in an anonymous function passed to addEvent:

var self = this;

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

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

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

This is called a closure.

这篇关于Javascript：将OOP方法附加到事件和“this”关键字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！