- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
出于某种原因,我在 es6 类中得到了奇怪的“this”值...
'use strict';
class Clicker {
constructor(element) {
this.count = 0;
this.elem = element;
this.elem.addEventListener('click', this.click);
// logs Clicker { count:0, elem: button#thing} as expected
console.log(this);
}
click() {
// logs <button id="thing">...</button> as unexpected...
console.log(this);
this.count++;
}
}
var thing = document.getElementById('thing');
var instance = new Clicker(thing);
<button id="thing">Click me</button>
为什么 Clickers 的 click 方法中的“this”指的是 dom 节点而不是 ... 本身?
更重要的是,如果我不能使用“this”来执行此操作,如何在其“click”方法中引用 Clickers 的 count 属性?
最佳答案
Why is the "this" inside of of the Clickers' click method referring to the dom node rather than ... itself?
因为.addEventListener()
的规范是将this
指针设置为捕获事件的DOM元素。这就是它的设计原理。
当您想要覆盖 this
的值时,将方法作为回调传递时,可以使用 .bind()
强制使用 所需的值这
与它:
this.elem.addEventListener('click', this.click.bind(this));
说明:
Javascript 中的所有函数调用都会根据函数的调用方式设置 this
的新值。请参阅this explanation有关这组基本规则的更多信息。
最重要的是,当你这样做时:
this.elem.addEventListener('click', this.click);
您只需获取 this.click
方法并将该方法单独传递给 addEventListener()
。 this
的值(value)将完全丢失。就好像您正在这样做:
var m = this.click; // m here is just a reference to Clicker.prototype.click
this.elem.addEventListener('click', m);
除此之外,.addEventListener()
是专门构建的,用于在调用回调时设置它自己的 this
值(指向 this
code> 创建事件的元素)。
因此,您可以使用如上所示的 .bind()
来强制在调用方法时使用 this
的正确值。
作为引用,您可以找到this description of the six ways that this
is set让 Javascript 中的函数调用变得有用。
其他选项
我发现 .bind()
是定义它的最清晰的方法,但您也可以使用本地匿名函数:
var self = this;
this.elem.addEventListener('click', function() {
self.click();
});
或者在 ES6 中,箭头函数:
this.elem.addEventListener('click', () => this.click());
箭头函数将自动为您保留 this
的值,以避免需要前面示例中使用的 self
引用。
关于javascript - es6 类方法内的 "This",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36489579/
在 settings.py LANGUAGE_CODE = 'es-mx'或 LANGUAGE_CODE = 'es-ar'不起作用,但是 LANGUAGE_CODE = 'es'或 LANGUAGE
我想知道OpenGL ES 2.0和OpenGL ES 3.0之间有什么区别。 OpenGL ES 3.0的主要优点是什么? 最佳答案 总体而言,这些变化通过更大的缓冲区、更多的格式、更多的统一等提高
这是我为此端点使用 Postman localhost:9201/response_v2_862875ee3a88a6d09c95bdbda029ce2b/_search 的请求正文 { "_sour
OpenGL ES 2.0 没有 ES 1.0 那样的 GL_POINT_SMOOTH 定义。这意味着我用来绘制圆圈的代码不再有效: glEnable(GL_POINT_SMOOTH); glPoin
我尝试编译这个着色器: varying vec2 TexCoords; varying vec4 color; uniform sampler2D text; uniform vec3 textCol
我是 OpenGL ES 的新手,我使用的是 OpenGL ES 2.0 版本。我可以在片段着色器中使用按位操作(右移、左移)吗? 最佳答案 OpenGL ES 2.0 没有按位运算符。 ES 3.0
有没有办法只用线画一个三角形? 我认为GL_TRIANGLES选项可使三角形充满颜色。 最佳答案 使用glPolygonMode(face, model)设置填充模式: glPolygonMode(G
我想用一个包含 yuv 数据的采样器在 opengl es 着色器中将 yuv 转换为 rgb。我的代码如下: 1)我将 yuv 数据发送到纹理: GLES20.glTexImage2D(GLES20
我正在使用这样的域: http://www.domain.com/es/blabla.html 我想更改 .es 的/es 部分并将 URLS 转换为类似以下内容: http://www.domain
有谁知道OpenGL ES是否支持GL_TEXTURE_RECTANGLE?我计划将它用于 2D 图形以支持非二次幂图像。我当前的实现使用 alpha=0 填充的 POT 纹理,对于拉伸(stretc
我需要在具有 PowerVR SGX 硬件的 ARM 设备上实现离屏纹理渲染。 一切都完成了(使用了像素缓冲区和 OpenGL ES 2.0 API)。唯一 Unresolved 问题是速度很慢glR
这是一个奇怪的事情。我有一个片段着色器,据我所知只能返回黑色或红色,但它将像素渲染为白色。如果我删除一根特定的线,它会返回我期望的颜色。它适用于 WebGL,但不适用于 Raspberry Pi 上的
我正在考虑将一些 OpenGL 代码移植到 OpenGL ES 并且想知道这段代码到底做了什么: glPushClientAttrib(GL_CLIENT_VERTEX_ARRAY_BIT) 因为 g
我正在考虑将一些 OpenGL 代码移植到 OpenGL ES 并且想知道这段代码到底做了什么: glPushClientAttrib(GL_CLIENT_VERTEX_ARRAY_BIT) 因为 g
GLSL ES最多可以编译多少个程序?所以假设我创建了 100 个片段着色器,每个都有不同的效果。所以在运行时我编译所有这些并动态地我用 glUseProgram 交换它们。我假设每次我编译一个新的
我正在尝试使用顶点缓冲区对象来绘制圆,并在 iPhone 上的 OpenGL ES 2.0 中启用 GL_POINT_SMOOTH 来绘制点。 我使用以下 ES 1.0 渲染代码在 iPhone 4
为什么在 OpenGL ES 1.x 中缩放(均匀)对象会导致对象变轻? 更有意义的是它会更暗,因为法线被缩小是否也会使对象更暗?但由于某种原因,物体变轻了。当我放大时,对象变得更暗。在我看来,这应该
我正在尝试通过移植 some code 在 iOS 上的 OpenGL ES 2.0 中获得一些阴影效果。来自标准 GL。部分示例涉及将深度缓冲区复制到纹理: glBindTexture(GL_TEX
所以我正在使用 2D 骨骼动画系统。 有 X 个骨骼,每个骨骼至少有 1 个部分(一个四边形,两个三角形)。平均而言,我可能有 20 块骨头和 30 个部分。大多数骨骼都依赖于父骨骼,骨骼会每帧移动。
我在使用 ES 着色器时遇到了一些晦涩难懂的问题,而且我现在几乎没有想法了。 这是一些代码: .. precision mediump float; .. #define STEP (1f/6f) 5
我是一名优秀的程序员,十分优秀!