जेएस क्लास बनाएं: आईआईएफई बनाम रिटर्न प्रोटोटाइप

Question

चलो दो उदाहरण देखें जिसमें मैं समझाने की कोशिश करूंगा कि मैं क्या समझना चाहता हूं।

var Car = function(){ 
    // Init class 
    function Car() { }; 
    // Private func/vars 
    var private = { color:'red' }; 
    // Public func/vars 
    Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
    }; 

    return Car.prototype; // return with prototype 
}; 

var myCar = new Car(); 

और:

var Car = (function(){ 
    // Init class 
    function Car() { }; 
    // Private func/vars 
    var private = { color:'red' }; 
    // Public func/vars 
    Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
    }; 

    return Car; // avoid prototype adding parentheses on next line; 
})(); 

var myCar = new Car(); 

चलो देखते हैं !, दोनों वर्ग समारोह अभिव्यक्ति के रूप में बनाई गई हैं और दोनों समान रूप से काम करते हैं। उनके बीच एकमात्र अंतर हैं: पहली बार अपनी प्रोटोटाइप संपत्ति के साथ कार फ़ंक्शन लौटाता है। कार फ़ंक्शन लौटने वाले दूसरे काम, प्रोटोटाइप संपत्ति से परहेज करते हैं और इसके बजाय आईआईएफई का उपयोग करते हैं।

return Car.prototype; के बीच अंतर क्या है और IIFE से बचें और IIFE (कक्षा घोषणा के अंत में कोष्ठक) का उपयोग करके return Car; का उपयोग करें।

Answer 1

दूसरा कोड नमूना जो आप खोज रहे हैं उसे प्राप्त करने का एक सही तरीका है। आप तुरंत निष्पादित फ़ंक्शन बनाते हैं, जिसके अंदर आप एक नया फ़ंक्शन बनाते हैं, इसके प्रोटोटाइप में जोड़ते हैं, और फिर इसे वापस कर देते हैं।

पहला उदाहरण थोड़ा अजीब है, और यह बिल्कुल कन्स्ट्रक्टर फ़ंक्शन को ठीक से नहीं बनाता है। लाइन

return Car.prototype; // return with prototype 

बस हमेशा वस्तु शाब्दिक है कि आपने पहले Car.prototype करने के लिए सौंपा गया था वापस करने के लिए अपने कार समारोह का कारण बनता है।

Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
}; 

के नव अपने कार के लिए अब बात करने के लिए वस्तुओं को बनाने के constructor संपत्ति का कारण होगा: यह नोट करने के लिए, इस लाइन में एक समारोह के सामान्य व्यवहार new

---

बस एक बात के साथ आमंत्रण को ओवरराइड करता है समारोह। यदि यह आपके लिए महत्वपूर्ण है तो इसे ठीक करने के दो आसान तरीके हैं।

Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
}; 
Car.prototype.constructor = Car; // <-------- add this line 

या करने के लिए ऊपर बदलने

Car.prototype.newColor = function(color) { private.color = color }; 
Car.prototype.getColor = function() { return private.color };