मैं इस "सार्वजनिक" विधि को सही ढंग से कैसे बढ़ा सकता हूं?

Question

मैं इस कोड (JSFiddle)

var OBJ = function(){ 
    var privateVar = 23; 
    var self = this; 

    return { 
     thePrivateVar : function() { 
      return privateVar; 
     }, 

     thePrivateVarTimeout : function() { 
      setTimeout(function() { alert(self.thePrivateVar()); } , 10); 
     } 
    } 

}(); 

alert(OBJ.thePrivateVar()); 

OBJ.thePrivateVarTimeout(); 

यह एक वास्तविक समस्या मैं आ रही है की एक अमूर्त है।

तो - मैं OBJ.thePrivateVarTimeout() पर 10 और फिर alert को 23 के साथ प्रतीक्षा करने की उम्मीद करता हूं (जिसे मैं इसे अन्य खुली विधि के माध्यम से एक्सेस करना चाहता हूं)।

हालांकि self सही ढंग से सेट नहीं लग रहा है। जब मैं self = this सेटिंग कर रहा हूं तो ऐसा लगता है कि this फ़ंक्शन का संदर्भ नहीं है बल्कि वैश्विक वस्तु का संदर्भ है। ऐसा क्यों है?

मैं सार्वजनिक विधि कैसे बना सकता हूं thePrivateVarTimeout अन्य सार्वजनिक विधि thePrivateVar पर कॉल करें?

Answer 1

var OBJ = (function(){ 
    var privateVar = 23; 
    var self = { 
     thePrivateVar : function() { 
      return privateVar; 
     }, 

     thePrivateVarTimeout : function() { 
      setTimeout(function() { alert(self.thePrivateVar); } , 10); 
     } 
    }; 

    return self; 

}()); 

this === global || undefined एक बुलाए गए फ़ंक्शन के अंदर। ES5 में यह भी वैश्विक वातावरण है, ईएस 5 सख्त में यह अनिर्धारित है।

अधिक आम पैटर्न एक समारोह

var obj = (function() { 
    var obj = { 
    property: "foobar", 
    timeout: function _timeout() { 
     var that = this; 
     setTimeout(alertData, 10); 

     function alertData() { 
     alert(that.property); 
     } 
    } 
    } 

    return obj; 
}()); 

में एक स्थानीय मूल्य var that = this के रूप में उपयोग कर या एक .bindAll विधि का उपयोग शामिल होगा

var obj = (function() { 
    var obj = { 
    alertData: function _alertData() { 
     alert(this.property); 
    } 
    property: "foobar", 
    timeout: function _timeout() { 
     setTimeout(this.alertData, 10); 
    } 
    } 

    bindAll(obj) 

    return obj; 
}()); 


/* 
    bindAll binds all methods to have their context set to the object 

    @param Object obj - the object to bind methods on 
    @param Array methods - optional whitelist of methods to bind 

    @return Object - the bound object 
*/ 
function bindAll(obj, whitelist) { 
    var keys = Object.keys(obj).filter(stripNonMethods); 

    (whitelist || keys).forEach(bindMethod); 

    function stripNonMethods(name) { 
     return typeof obj[name] === "function"; 
    } 

    function bindMethod(name) { 
     obj[name] = obj[name].bind(obj); 
    } 

    return obj; 
}