爲什麼`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); 
       }); 
      } 
  };