代码之家 › 专栏 › 技术社区 › raveren

Javascript:将OOP方法附加到事件和'this'关键字

this event-handling oop javascript

raveren · 技术社区 · 15 年前

我是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);

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

问题: 在 init 和 scroll 不这个

这 关键词,我知道,但我还是没想到什么。

addEvent 是附加事件的一个极其基本的功能,它只支持IE/Fx,不做其他任何事情。
我正在编写的代码已经是功能性的了,但在过程形式中,我只是想对其进行OOP。
作为一个次要的子问题,我得到了这样的印象:javascript中不鼓励使用getter/setter方法,如果我使用它们,可以吗?

7 回复 | 直到 15 年前

Roatin Marth 15 年前

我注意到的一点是两者都不是 init scroll 是实例上的一个方法。

所以你只需要添加而不是 this.init 要加载事件,请执行以下操作:

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

同样地:

addEvent(window,'scroll',scroll);

this.scroll 和 这个是.init this 并在传递给的匿名函数中引用它 addEvent :

var self = this;

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

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

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

这就是所谓的 closure .

Jonathan Feinberg 15 年前

function MyConstructor() {
    this.foo = "bar";
    var me = this;
    function myClosure() {
        doSomethingWith(me.foo);
    }
}

geowa4 15 年前

this 功能 ,它不包含范围。因此,在指定的事件上,函数正在 window ,意思是 这 等于 窗口 ,例如:

var that = this;
...
addEvent(window,'scroll', function() {
    that.scroll()
});

Civil Disobedient 15 年前

向函数原型添加一个方法,该方法允许您将任何函数绑定到任何对象:

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

Mikhail Korobov 15 年前

您可以使用闭包进行以下操作:

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

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

JoshNaro 15 年前

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

-1

NawaMan 15 年前

这个技巧应该有效:

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

然后在这些有问题的方法中,您可以使用 'This' .