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”关键字 的相关文章

  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • pubnub 和 head.js

    有没有人成功整合过pubnub http www pubnub com 和 head js 正确吗 Pubnub http www pubnub com 希望我将他们的脚本放在页面底部并带有 div 就在它前面的标签 这可以确保在最后调用
  • 第一次使用node.js - “ReferenceError:节点未定义”

    我刚刚安装了node js 我尝试编写应该检查版本的node v 但它不起作用 这是输出 gt node v ReferenceError node is not defined at repl 1 2 at REPLServer self
  • Angular 2 Material 2 日期选择器日期格式

    我不知道如何更改材料2日期选择器的日期格式 我已阅读文档 但我不明白我实际上需要做什么 datepicker默认提供的输出日期格式为f e 6 9 2017 我想要实现的目标是将格式更改为类似的格式9 Jun 2017或任何其他 文档htt
  • 如何防止 gulp-notify 破坏 Windows 中的 gulp-watch?

    我正在使用吞咽通知 https www npmjs org package gulp notify插入 这是我如何在 gulpfile js 中实现它的示例 您可以看到我也在使用 gutil 和 livereload 我不知道它们是否发挥任
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • 多重继承争论 II:根据 Stroustrup 的说法 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我非常了解关于为什么接口继承优于多重继承的传统争论 这里已经有一篇文章 C 应该有多重继承吗 https stackoverflow com q
  • 如何导入和导出 javascript ES6 类

    我是 javascript 和 nodejs 的新手 我正在使用这个项目来发展我的技能并学习新技术 目前我的项目使用多个相互依赖的类 类文件位于不同的目录中 我当前正在尝试使用 export 和 require 语句来允许在其他文件中引用类
  • Web 组件 - 服务/非 html 组件

    所以我来自 Angular 想看看如何创建vanilla Web components 现在 从 Angular 开始 我们倾向于将事物分开 组件 充当 HTML CSS 和一些 javascript 然后是 服务 主要负责收集数据和执行不
  • Chrome 扩展同步调用 - 仅在窗口关闭后创建窗口

    我有这个代码 function voteNewWindow mailNum chrome windows create url http www google com incognito true function window conso
  • 确定元素是在页面折叠上方还是下方

    我有一些页面有多个输入框 用户可以在其中输入文本 在单击 下一步 按钮之前 需要填写其中一些内容 我弹出验证错误供用户查看 但是如果问题不在页面上 我希望页面滚动到它 而不是他们必须搜索丢失 错误的字段 我有一个滚动到位 但我无法确定要滚动
  • 如何以编程方式退出或关闭 Javascript UWP 应用程序? (Windows 10)

    我制作了一个游戏 它需要自己的退出按钮 我无法使用CoreApplication Exit https msdn microsoft com en us library windows apps windows applicationmod
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • 使用 JavaScript 生成 PDF 文件

    我正在尝试将 XML 数据从网页转换为 PDF 文件 并且希望能够完全在 JavaScript 中完成此操作 我需要能够绘制文本 图像和简单的形状 我希望能够完全在浏览器中完成此操作 我刚刚写了一个名为jsPDF https github
  • 使用 AngularJS 多部分表单数据将文件上传到 Google Cloud Storage

    我正在尝试使用 AngularJS 中指定的多部分方法将图像文件上传到 Google Cloud Storagehttps cloud google com storage docs json api v1 how tos upload m
  • RoR - Rails 中的大文件上传

    我有一个 Rails Web 应用程序 允许用户上传视频 视频存储在 NFS 安装的目录中 当前的设置适用于较小的文件 但我也需要支持大文件上传 最多 4GB 当我尝试上传 4GB 文件时 它最终会发生 但从用户体验的角度来看很糟糕 上传开
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • MongoDB中如何通过引用字段进行查询?

    我有两个 Mongo 模式 User id ObjectId name String country ObjectId Reference to schema Country Country id ObjectId name String
  • Node npm 包抛出使用严格:全局发布和安装后未找到命令

    我正在尝试发布 npm 包 当我全局安装该包并尝试运行 cli 命令时 我收到此错误 nvm versions node v0 12 2 bin myPack line 1 use strict command not found nvm
  • 使用 JQuery 根据下拉列表选择的值显示/隐藏控件

    我正在尝试使用 JQuery 根据下拉菜单的选定索引显示 隐藏 div 标签 但它不起作用 任何帮助将不胜感激 Thanks

随机推荐

  • 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 对象 并且不仅希望将公共事件绑定到它们 还希望将有关上述对象的一些数据保留在全局容器中 以提高运行时性能 所以我所做的基本