JavaScript命名空间和事件侦听器中的“this”问题

时间:2011-05-31 14:34:36

标签: javascript javascript-events javascript-namespaces

首先,我试图在我的JavaScript程序中使用虚假命名空间,如下所示:

// Ish.Com namespace declaration
var Ish = Ish || {};
Ish.Com = Ish.Com || {};

// begin Ish.Com.View namespace
Ish.Com.View = new function() {
  var privateVariable;

  this.publicFunction = function() {
    this.publicFunction2()
  };

  this.publicFunction2 = function() { ... };
};

我对使用this调用其他函数并不感到疯狂,但到目前为止,它已经奏效了。但是,我已经为某些元素添加了事件侦听器,并将this解释为目标对象。

我知道我可以使用完整的命名空间而不是this来调用我的侦听器(Ish.Com.View.publicFunction2())中的函数,但是侦听器通常会调用一个函数,该函数调用另一个函数,另一个调用另一个函数。我需要在几乎每个函数调用中使用整个命名空间。

如何让命名空间与事件监听器很好地协同工作?我也对实现命名空间的更好方法感兴趣,因为使用this.publicFunction2()很笨拙。

我对最佳实践非常感兴趣,并学习如何在JavaScript中编写设计良好的应用程序。但是,在我对JavaScript有了更透彻的理解之前,框架是不可能的。

3 个答案:

答案 0 :(得分:4)

似乎我今天早上以同样的方式回答了每一个问题: - )

您可以使用“.bind()”:

   var eventHandler = yourObject.someFunction.bind(yourObject);

每当“eventHandler”被任何东西调用时,这将保证this将引用“yourObject”。

新的浏览器中的Function.prototype对象上有“bind()”函数。 Mozilla docs包含可用于修补旧浏览器的“bind()”的可靠实现。

“bind()”的作用是返回一个新函数,它明确地安排this按照你的规定绑定。如果愿意,您还可以传递要传入的参数。使用“bind()”的另一种方法是将函数调用包装在您自己的匿名函数中:

  var eventHandler = function() { yourObject.someFunction(); };

答案 1 :(得分:0)

我不知道我是否完全理解了你的问题。 这会满足你的需求吗?

var obj = new function() {
    var scope = this;

    this.fun1 = function() {
        return scope.fun2();
    }

    this.fun2 = function() {
        //do sth
    }
};

答案 2 :(得分:0)

这是由变量上下文和闭包引起的。 “ ”始终引用当前对象。事件函数本身就是一个对象,“ this ”指的是该对象。如果您需要引用父对象,您可以使用前面所述的bind,或者将父“ this ”设置为变量并在事件函数中使用它。 / p>

// Ish.Com namespace declaration
var Ish = Ish || {};
Ish.Com = Ish.Com || {};
// begin Ish.Com.View namespace
Ish.Com.View = new function() {
  var privateVariable, thisObj=this;
  this.publicFunction = function() {
    thisObj.publicFunction2()
  };
  this.publicFunction2 = function() { ... };
};