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

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

  •  4
  • 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 年前
        1
  •  10
  •   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 .

        2
  •  2
  •   Jonathan Feinberg    15 年前
    function MyConstructor() {
        this.foo = "bar";
        var me = this;
        function myClosure() {
            doSomethingWith(me.foo);
        }
    }
    
        3
  •  1
  •   geowa4    15 年前

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

    var that = this;
    ...
    addEvent(window,'scroll', function() {
        that.scroll()
    });
    
        4
  •  1
  •   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);
    }
    
        5
  •  0
  •   Mikhail Korobov    15 年前

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

    function ClassThatDoesSomething() {
        var self=this;
        // ...
    
        function init() {
            addEvent(window,'scroll',self.scroll);
        }
    }
    
        6
  •  0
  •   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);
    }
    
        7
  •  -1
  •   NawaMan    15 年前

    这个技巧应该有效:

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

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