为什么“this"不等于“Object",为什么属性是“undefined"? [英] Why is `this` not equal to `Object` and why is property `undefined`?
问题描述
这个对象实现了一个模式来提供事件监听器.它至少适用于 IE 11 和 Chrome.
This object implements a pattern to provide event listeners. It works in at least IE 11 and Chrome.
但我不明白为什么,我有两个问题.
But I don't understand why and I have 2 questions.
在按键事件侦听器中,有一个警告显示 this
等于 [object HTMLInputElement]
并且 this.element
是未定义
.
In the keypress event listener, there is an alert that shows that this
is equal to [object HTMLInputElement]
and this.element
is undefined
.
- 为什么
this
不等于Object
? - 为什么
this.element
undefined
?(注意它是在init
方法中初始化的.)
- Why is
this
not equal toObject
? - Why is
this.element
undefined
? (Note it is initialized in theinit
method.)
见这个JSFiddle
这是 JavaScript:
Here is the JavaScript:
function CustomEditor(id) {
'use strict';
this.element = null;
this.id = id;
this.init();
};
CustomEditor.prototype.addEvent = function (event, callback) {
'use strict';
return this.element.addEventListener(event, callback, false);
};
CustomEditor.prototype.init = function () {
'use strict';
this.element = document.getElementById(this.id);
this.addEvent('keypress', this.onCustomKeyPress);
};
CustomEditor.prototype.onCustomKeyPress = function () {
'use strict';
// alert("keypress event handler");
this.style.backgroundColor = "#000";
this.style.color = "#ff0";
alert('this = ' + this + '\n\nthis.element = ' + this.element);
};
// create and initialize custom editor
ce = new CustomEditor('myInput1');
document.getElementById('myInput1').value = 'a';
alert('ce = ' + ce + '\n\nce.element = ' + ce.element);
来自@Bergi & 的评论@lombausch,我理解我对 this
和上下文(这里是周末战士)的误解.我对我的对象进行了以下修改,现在 this
有了我需要的上下文.(我使用 call
而不是 bind
所以代码适用于旧浏览器.)
From the comments by @Bergi & @lombausch, I understand the misconception I had had around this
and context (weekend warrior here). I made the following modification to my object and now this
has the context I need. (I'm using call
rather than bind
so the code works with older browsers.)
MyObj.prototype.addEvent = function (event, callback, caller) {
'use strict';
if (typeof window.addEventListener === 'function') {
return this.element.addEventListener(event, function () {
callback.call(caller);
}, false);
}
// for older versions of IE, order of test is important
return this.element.attachEvent('on' + event, function () {
callback.call(caller);
});
};
新 JSFiddle
但是一个新问题:必须对 onCustomKeypress
的模式进行哪些更改才能访问事件接口/对象?
But a new Question: What changes have to be made to the pattern for onCustomKeypress
to have access to the event interface / object?
事件接口是事件监听器的第一个参数,但是我好像不能把它传递给回调函数.例如,这不起作用:
The event interface is the first argument of the event listener, but I can't seem to pass it to the callback function. For example, this does not work:
MyObj.prototype.onCustomKeyPress = function (e) {
推荐答案
(我使用的是调用而不是绑定,因此代码适用于较旧的浏览器.)
(I'm using call rather than bind so the code works with older browsers.)
为什么?bind
显然要简单得多.如果您希望它与旧浏览器一起使用,只需包含 这个简单的 polyfill 在你的代码中的某处.
Why? bind
is a lot simpler apparently. If you want it to work with older browsers, just include this simple polyfill somewhere in your code.
必须对模式进行哪些更改,onCustomKeypress 才能访问事件接口/对象?
What changes have to be made to the pattern for onCustomKeypress to have access to the event interface / object?
没有.问题仍然是您的 addEvent
函数,它现在可能会使用正确的上下文调用 callback
但没有参数.两种解决方案:
None. The problem is still your addEvent
function, which might now invoke the callback
with the correct context but without the arguments. Two solutions:
…(…, function() {
callback.apply(caller, arguments);
} …
只需将事件参数传递给 call
- 它在上下文之后接受任意数量的普通参数:
Just pass the event argument to call
- it takes any number of normal arguments after the context:
MyObj.prototype.addEvent = function(event, callback, caller) {
'use strict';
if (typeof window.addEventListener === 'function') {
this.element.addEventListener(event, function(e) {
callback.call(caller, e);
}, false);
} else {
// for older versions of IE, order of test is important
this.element.attachEvent('on' + event, function() {
callback.call(caller, window.event);
});
}
};
这篇关于为什么“this"不等于“Object",为什么属性是“undefined"?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!