“;这个“;在JavaScript命名空间和事件侦听器中

Problems with "this" in JavaScript namespaces and event listeners

本文关键字：事件 侦听器 JavaScript 这个 命名空间      更新时间：2023-09-26

首先，我试图在我的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有了更深入的了解之前，框架是不可能的。

今天早上我似乎一直在用同样的方式回答每个问题：-）

您可以使用".bind（）"：

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

这将保证this在任何东西调用"eventHandler"时都会引用"yourObject"。

在较新的浏览器中，"bind（）"函数位于function.prototype对象上。Mozilla文档包含"bind（）"的坚实实现，您可以使用它来修补旧的浏览器。

"bind（）"所做的是返回一个新函数，该函数显式地安排this按照您的规定进行绑定。如果您愿意，也可以传递要传递的参数。使用"bind（）"的另一种选择是将函数调用封装在您自己的匿名函数中：

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

我不知道我是否完全理解了你的问题。这适合你的需要吗？

var obj = new function() {
    var scope = this;
    this.fun1 = function() {
        return scope.fun2();
    }
    this.fun2 = function() {
        //do sth
    }
};

这是由变量上下文和闭包引起的。"this"总是指当前对象。事件函数本身就是一个对象，"this"指的是该对象。如果需要引用父对象，可以使用前面描述的bind，或者将父对象"this"设置为变量，并在事件函数中使用该变量。

// 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() { ... };
};
相关文章：