Düz eski JavaScript (çerçeveler) bir geri arama fonksiyonu benim nesne başvuran ile bazı sorunlar yaşıyorum.

function foo(id) {
    this.dom = document.getElementById(id);
    this.bar = 5;
    var self = this;
    this.dom.addEventListener("click", self.onclick, false);
}

foo.prototype = {
    onclick : function() {
        this.bar = 7;
    }
};

Yeni bir nesne oluşturduğumda şimdi DOM, bir zaman dilimi ile yüklendikten sonra (#test)

var x = new foo('test');

Bu özelliği işlevi span noktalarında '#foo nesnesi test değil.

Ne özelliği işlev içinde foo bir nesne için bir referans alabilir miyim?

(diğer cevap yorum gizli bir açıklama ayıklanmış)

Sorun şu yatmaktadır:

this.dom.addEventListener("click", self.onclick, false);

Burada, işlev nesne geri çağrı olarak kullanılacak geçirir. Olay tetikleyici işlevi denir ama şimdi herhangi bir nesne (bu) ile bir ilişkisi vardır.

Sorun aşağıdaki gibi bir kapatma işlevi (bu nesne referansı ile) kaydırma ile çözülebilir

this.dom.addEventListener(
  "click",
  function(event) {self.onclick(event)},
  false);

Değişken öz atandı beribukapatılması oluşturulduğunda, kapatma işlevi daha sonra ne zaman kendini değişkenin değerini hatırlar.

Bunu çözmek için alternatif bir yol yarar bir fonksiyonu (ve bağlama için değişkenler kullanmaktan kaçının . yapmaktır ^em>bu):

function bind(scope, fn) {
    return function () {
        fn.apply(scope, arguments);
    };
}

Güncellenmiş kod gibi görünecektir:

this.dom.addEventListener("click", bind(this, this.onclick), false);

Function.prototype.bind ECMA 5 parçası ve aynı işlevselliği sağlar. Yapabilirsiniz:

this.dom.addEventListener("click", this.onclick.bind(this), false);

ES5 desteklemeyen tarayıcılar için, 18**: henüz

if (!Function.prototype.bind) {  
  Function.prototype.bind = function (oThis) {  
    if (typeof this !== "function") {  
      // closest thing possible to the ECMAScript 5 internal IsCallable function  
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");  
    }  

    var aArgs = Array.prototype.slice.call(arguments, 1),   
        fToBind = this,   
        fNOP = function () {},  
        fBound = function () {  
          return fToBind.apply(this instanceof fNOP  
                                 ? this  
                                 : oThis || window,  
                               aArgs.concat(Array.prototype.slice.call(arguments)));  
        };  

    fNOP.prototype = this.prototype;  
    fBound.prototype = new fNOP();  

    return fBound;  
  };  
}