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

2024-02-19

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

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

问题:如何访问JS类实例 in the init and scroll方法和not the 窗口元素.

它不必通过this关键字,我知道,但我仍然没有想出任何东西。

P.S.

  • addEvent是一个非常基本的附加事件的函数,它只是 IE/Fx 友好的,不执行任何其他操作。
  • 我正在编写的代码已经可以运行,但在过程形式中,我只是想对其进行 OOP。
  • 作为一个小问题,我的印象是,在 JavaScript 中不鼓励使用 getter/setter 方法,如果我使用它们可以吗?

我注意到的一件事是init nor scroll是实例上的方法。

所以你只需要添加init并不是this.init到加载事件:

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

同样:

addEvent(window,'scroll',scroll);

如果您决定将他们转移到班级(例如this.scroll and this.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 https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript:将 OOP 方法附加到事件和“this”关键字 的相关文章

随机推荐

  • PostgreSQL 中是否有处理无序数组(集)的标准方法?

    我有一个表 其中包含两个单独列中的单词对 单词的顺序通常很重要 但有时我只想根据两个单词进行聚合 而不管顺序如何 是否有一种简单的方法将具有相同单词但顺序不同 一行与另一行相反 的两行视为相同的 集合 换句话说 治疗 apple orang
  • 使用 PHP 实现 PNG 透明度

    嘿 当我从 png 创建缩略图时 试图保持 png 的透明度时遇到了一些麻烦 有人有这方面的经验吗 任何帮助都会很棒 这就是我目前正在做的事情 fileName js ajaxupload tees fileName list width
  • bash:浮点运算是如何工作的?

    我要抓狂了 我有这个脚本 bin bash if eq 2 then total 0 IFS while read one two do total total two done lt 2 echo Total total fi 它应该将我
  • 向 mio 注册频道

    在旧版本的 mio 文档中 我找到 mio channel 它似乎用于创建一个实现通道EventedFd可以注册为Poll 我还在 reddit 上看到这已被更改为有利于其他内容 但我不知道注册频道的新方式是什么 迄今为止等待频道的当前方式
  • 带有 MVVM Light 的选项卡栏控制器导航 Xamarin

    iOS标准MVVM Light Storyboard模式是 导航 gt 视图控制器 gt 其他视图 但我想使用选项卡栏控制器作为根视图 到目前为止没有任何问题 但是当我想从该选项卡视图导航时 在新的视图控制器中我丢失了选项卡栏 并且该视图像
  • 如何使用角度参数指定框架对象的位置?

    我试图使用角度 版本 4 组件中设置的值来指定 aframe 对象的位置
  • MapStruct:在映射之前过滤列表

    我在其他地方看到过这个问题 但并不完全相同 并且没有适合我们用例的答案 假设我在源对象中有一个列表字段 List
  • 递归地将元素添加到数组并返回新数组

    假设我有一个这样的数组 my array array 1 2 3 4 array 11 12 13 14 6 7 8 array 15 16 17 18 10 我想构建一个递归函数 它返回一个数组 其中包含来自的所有偶数my array 我
  • 使用 xDebug 调试 SOAP 服务

    有没有一种方法可以调试我们发布的 SOAP 服务 最好将其集成到 IDE 中 从而允许我单步调试代码 受到一点启发本文 http www practicalweb co uk blog 2010 10 14 debugging soap w
  • 有类似 Haskell/ML 的 C 编译器吗?

    People have http jlongster com software iphone scheme iphone example 书面games http www artisancoder com 2009 10 scheme hi
  • 如何在 Compose NavGraph 内的两个或多个 Jetpack 可组合项之间共享视图模型?

    考虑这个例子 对于身份验证 我们将使用 2 个屏幕 一个屏幕用于输入电话号码 另一个屏幕用于输入 OTP 这两个屏幕都是在 Jetpack Compose 中制作的 对于 NavGraph 我们使用组合导航 另外我必须提到 DI 是由 Ko
  • 为什么我从 LDAP 属性中获取“System.__ComObject”?

    我将是第一个承认这是被删减和过去的节目的人 我以前没看过AD 实在是看不懂 我想这就是我的下一个研究 不管怎样 这是一些测试代码 它应该显示到期日期 要么以可读的形式 要么以刻度显示 这并不重要 这是一个 Web 表单 在开发 Web 服务
  • 易失性变量有用吗?如果是的话什么时候?

    正在接听这个问题 https stackoverflow com questions 20339725 executing weka classification in c sharp in parallel 20339822 203398
  • 为什么 gridfs get 不能仅按文件名处理文件 id (ObjectId)

    我正在使用nodejs mongodb mongoose 和gridfs 当我尝试通过文件名获取文件时 如果我想通过 id 获取它 那么一切都工作得很好 错误 您要读取的文件不存在 我使用以下代码 console log res pic i
  • 在 MySQL 中使行处于非活动状态

    是否有可能使 MySQL 中的一行处于非活动状态 那么查询结果中不再使用这一行 我的客户希望保留已删除的成员存在于数据库中 但我不想编辑所有查询来检查成员是否已删除 或者是否有一种简单的方法将整个行数据移动到另一个 非活动 表中 您可以重命
  • PHP curl FTPes w/显式 TLS/SSL

    我一直在尝试使用显式 TLS SSL 服务器推送到远程 FTP 但连接始终超时 它正在连接 但我不知道它在哪里停止 但我假设它与 FTP TLS SSL 控制通道有关 任何帮助将不胜感激 通过 FileZilla 我可以毫无问题地进行连接
  • 将 Groovy 应用程序和测试代码与 jlink 解决方案结合使用来捆绑 JavaFX

    这是继这个优秀的解决方案 https stackoverflow com a 58541585 595305如何让 Gradle 将 JavaFX 与您的发行版捆绑在一起的问题 注意规格 Linux Mint 18 3 Java 11 Ja
  • 如何在构建服务器上使用“firebase login:ci”

    我正在使用以下命令运行nodejs构建Github 工作流程 https help github com en actions automating your workflow with github actions configuring
  • 将实际值从 fortran77 dll 返回到 c#

    有人可以指出我在这里做错了什么吗 FORTRAN 77 dll 代码 pragma aux DON DON export parm value 8 value 8 SUBROUTINE DON DAA DBB DCC REAL 8 DAA
  • Javascript:将 OOP 方法附加到事件和“this”关键字

    我是 OOP Javascript 新手 并且在使用时遇到问题this关键字和事件 我想要实现的是 我有多个 DOM 对象 并且不仅希望将公共事件绑定到它们 还希望将有关上述对象的一些数据保留在全局容器中 以提高运行时性能 所以我所做的基本