为什么“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.

1. 为什么this 不等于Object?
2. 为什么 this.element undefined?(注意它是在 init 方法中初始化的.)

1. Why is this not equal to Object?
2. Why is this.element undefined? (Note it is initialized in the init 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屋！