为什么`this`不等于`Object`，为什么属性`undefined`？

Question

该对象实现了一个模式来提供事件侦听器。它至少可以在IE 11和Chrome中运行。

但我不明白为什么和我有两个问题。

在按键事件监听器中，有一个警报显示this等于[object HTMLInputElement]而this.element是undefined。

1. 为什么this不等于Object？
2. 为什么this.elementundefined？ （请注意，在init方法初始化。）

看到这个JSFiddle

这里是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这样的代码可与旧版浏览器。）

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到有权访问事件接口/对象？

事件接口是事件侦听器的第一个参数，但我似乎无法将它传递给回调函数。例如，这不起作用：

MyObj.prototype.onCustomKeyPress = function (e) { 

Answer 1

（我使用的呼叫，而不是绑定，使代码可与旧版浏览器。）

为什么？ bind显然很简单。如果您希望它可以与旧版浏览器一起使用，那么只需在您的代码中包含this simple polyfill。

必须对onCustomKeypress访问事件接口/对象的模式进行哪些更改？

无。问题仍然是您的addEvent函数，该函数现在可能会使用正确的上下文调用callback，但不带参数。有两种解决方案：

• 使用arguments object和apply代替：

  …(…, function() { 
      callback.apply(caller, arguments); 
  } … 
  

• 只是传递事件参数call - 它接受任何数目的正常参数范围内后：

  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); 
       }); 
      } 
  };