जावास्क्रिप्ट ऑब्जेक्ट्स में कंस्ट्रक्टर्स


402

क्या जावास्क्रिप्ट कक्षाएं / ऑब्जेक्ट में कंस्ट्रक्टर हैं? वे कैसे बनाए जाते हैं?



जवाबों:


408

प्रोटोटाइप का उपयोग करना:

function Box(color) // Constructor
{
    this.color = color;
}

Box.prototype.getColor = function()
{
    return this.color;
};

"रंग" छिपाना (कुछ हद तक एक निजी सदस्य चर जैसा दिखता है):

function Box(col)
{
   var color = col;

   this.getColor = function()
   {
       return color;
   };
}

उपयोग:

var blueBox = new Box("blue");
alert(blueBox.getColor()); // will alert blue

var greenBox = new Box("green");
alert(greenBox.getColor()); // will alert green

3
@BorisB, हाँ आप करते हैं - यह बॉक्स ऑब्जेक्ट पर रंग और getColor को परिभाषित करता है, अन्यथा आप सामान्य दायरे में चर असाइन कर रहे हैं।
निक

4
@ जेच हां यह करता है। मैंने एक वैकल्पिक स्निपेट प्रदान किया है जो छुपाता है color। मेरा सुझाव है कि जो आप उपयोग करते हैं वह काफी हद तक व्यक्तिगत पसंद (सुरक्षा बनाम सादगी) के लिए है
निक

6
@CamiloMartin यद्यपि हमेशा आवश्यक नहीं है, एक चर "निजी" (या इस मामले में, अनुपयोगी) बाहरी कोड को आपकी कक्षा के कार्यान्वयन विवरण पर निर्भर होने से रोकने के लिए एक उपयोगी तरीका हो सकता है। यहां तक ​​कि सिर्फ यह संकेत कि वर्ग के कौन से तत्व सार्वजनिक / निजी हैं, बाहरी उपयोगकर्ताओं के लिए उपयोगी हो सकते हैं।
निक

49
varएक निजी चर बनाता है। thisएक सार्वजनिक चर बनाता है
EhevuTov

3
@AlanKis (कम से कम कुछ जावास्क्रिप्ट इंजन में) स्टैक ट्रेस अनाम फ़ंक्शन मामले में भी उल्लेख नहीं करेगा Foo, जबकि बाद वाले मामले में यह पता चलेगा कि यह Fooकहा जा रहा है। डीबगिंग के लिए बहुत उपयोगी है।
जोआचिम इस्कसन

248

यहाँ एक टेम्पलेट है जो मैं कभी-कभी जावास्क्रिप्ट में ओओपी-समान व्यवहार के लिए उपयोग करता हूं। जैसा कि आप देख सकते हैं, आप क्लोजर का उपयोग करके निजी (स्थिर और उदाहरण दोनों) सदस्यों का अनुकरण कर सकते हैं। जो new MyClass()लौटेगा वह एक ऑब्जेक्ट है जिसे केवल ऑब्जेक्ट को सौंपे गए गुणों thisऔर prototype"क्लास" के ऑब्जेक्ट में रखा गया है।

var MyClass = (function () {
    // private static
    var nextId = 1;

    // constructor
    var cls = function () {
        // private
        var id = nextId++;
        var name = 'Unknown';

        // public (this instance only)
        this.get_id = function () { return id; };

        this.get_name = function () { return name; };
        this.set_name = function (value) {
            if (typeof value != 'string')
                throw 'Name must be a string';
            if (value.length < 2 || value.length > 20)
                throw 'Name must be 2-20 characters long.';
            name = value;
        };
    };

    // public static
    cls.get_nextId = function () {
        return nextId;
    };

    // public (shared across instances)
    cls.prototype = {
        announce: function () {
            alert('Hi there! My id is ' + this.get_id() + ' and my name is "' + this.get_name() + '"!\r\n' +
                  'The next fellow\'s id will be ' + MyClass.get_nextId() + '!');
        }
    };

    return cls;
})();

मुझे इस पैटर्न का उपयोग करने के लिए विरासत के बारे में पूछा गया है, इसलिए यहां दिया गया है:

// It's a good idea to have a utility class to wire up inheritance.
function inherit(cls, superCls) {
    // We use an intermediary empty constructor to create an
    // inheritance chain, because using the super class' constructor
    // might have side effects.
    var construct = function () {};
    construct.prototype = superCls.prototype;
    cls.prototype = new construct;
    cls.prototype.constructor = cls;
    cls.super = superCls;
}

var MyChildClass = (function () {
    // constructor
    var cls = function (surName) {
        // Call super constructor on this instance (any arguments
        // to the constructor would go after "this" in call(…)).
        this.constructor.super.call(this);

        // Shadowing instance properties is a little bit less
        // intuitive, but can be done:
        var getName = this.get_name;

        // public (this instance only)
        this.get_name = function () {
            return getName.call(this) + ' ' + surName;
        };
    };
    inherit(cls, MyClass); // <-- important!

    return cls;
})();

और इसका उपयोग करने के लिए एक उदाहरण:

var bob = new MyClass();
bob.set_name('Bob');
bob.announce(); // id is 1, name shows as "Bob"

var john = new MyChildClass('Doe');
john.set_name('John');
john.announce(); // id is 2, name shows as "John Doe"

alert(john instanceof MyClass); // true

जैसा कि आप देख सकते हैं, कक्षाएं सही ढंग से एक दूसरे के साथ बातचीत करती हैं (वे स्थिर आईडी को साझा करते हैं MyClass, announceविधि सही get_nameविधि का उपयोग करती है , आदि)

ध्यान देने वाली एक बात उदाहरण के गुणों को छाया देने की आवश्यकता है। आप वास्तव में inheritफ़ंक्शन को सभी उदाहरण गुणों (उपयोग hasOwnProperty) के माध्यम से जा सकते हैं जो फ़ंक्शन हैं , और स्वचालित रूप से एक super_<method name>संपत्ति जोड़ते हैं। यह आपको this.super_get_name()अस्थायी मूल्य में संग्रहीत करने और उपयोग करने के लिए बाध्य करने के बजाय कॉल करने देगा call

प्रोटोटाइप के तरीकों के लिए आपको उपरोक्त के बारे में चिंता करने की ज़रूरत नहीं है, यदि आप सुपर क्लास के प्रोटोटाइप तरीकों का उपयोग करना चाहते हैं, तो आप बस कॉल कर सकते हैं this.constructor.super.prototype.methodName। यदि आप इसे कम क्रिया करना चाहते हैं तो आप निश्चित रूप से सुविधा गुण जोड़ सकते हैं। :)


7
केवल cls.prototypeभाग के बारे में एक नोट : "उदाहरणों में साझा किया गया" केवल मूल्य (कॉलिंग announce) पढ़ने के लिए है । यदि आप myClassInstance.announceकिसी अन्य मान पर सेट करते हैं myClassInstance, तो यह एक नई संपत्ति बनाता है , इसलिए यह केवल उस ऑब्जेक्ट पर लागू होता है, न कि कक्षा के अन्य उदाहरणों पर। MyClass.prototype.announceहालांकि असाइन करना सभी उदाहरणों को प्रभावित करेगा।
मैथ्यू Crumley

1
कोई समस्या नहीं, मदद की खुशी! :)
ब्लिक्स

2
धन्यवाद! बहुत पसंद आया! क्या आप इस दृष्टिकोण में वर्ग की विरासत का उदाहरण दिखा सकते हैं।
Dmitrij गोलुबेव

2
@DmitrijGolubev, ब्रैड ड्वायर, और नाथन सी। ट्रेस: ​​मैंने विरासत को जोड़ दिया है, लेकिन यह बहुत जटिल हो रहा है, इसलिए मैं आमतौर पर आपको एक सरल समाधान के साथ जाने की सलाह दूंगा, जब तक आपको जावास्क्रिप्ट में ऐसे कट्टर वंशानुक्रम की आवश्यकता नहीं है (जो वास्तव में सिर्फ एक है प्रोटोटाइप भाषा)।
ब्लिक्स

1
@guiomie यह एक "सार्वजनिक स्थैतिक" तरीका है, इसलिए आप इसे कंस्ट्रक्टर फ़ंक्शन ("क्लास") पर MyClass.get_nextId()
कहेंगे

166

ऐसा लगता है कि आप में से अधिकांश गेटर्स का उदाहरण दे रहे हैं और बसने वाले का निर्माण नहीं कर रहे हैं, यानी http://en.wikipedia.org/wiki/Constructor_(object-oriented_programming)

दोपहर का भोजन करीब था, लेकिन उदाहरण jsFiddle में काम नहीं किया।

यह उदाहरण एक निजी निर्माण फ़ंक्शन बनाता है जो केवल ऑब्जेक्ट के निर्माण के दौरान चलता है।

var color = 'black';

function Box()
{
   // private property
   var color = '';

   // private constructor 
   var __construct = function() {
       alert("Object Created.");
       color = 'green';
   }()

   // getter
   this.getColor = function() {
       return color;
   }

   // setter
   this.setColor = function(data) {
       color = data;
   }

}

var b = new Box();

alert(b.getColor()); // should be green

b.setColor('orange');

alert(b.getColor()); // should be orange

alert(color); // should be black

यदि आप सार्वजनिक संपत्तियों को आवंटित करना चाहते हैं तो निर्माणकर्ता को इस तरह परिभाषित किया जा सकता है:

var color = 'black';

function Box()
{
   // public property
   this.color = '';

   // private constructor 
   var __construct = function(that) {
       alert("Object Created.");
       that.color = 'green';
   }(this)

   // getter
   this.getColor = function() {
       return this.color;
   }

   // setter
   this.setColor = function(color) {
       this.color = color;
   }

}

var b = new Box();

alert(b.getColor()); // should be green

b.setColor('orange'); 

alert(b.getColor()); // should be orange

alert(color); // should be black

45
यह # 1 उत्तर कैसे नहीं है? केवल जॉन ने मापदंडों के साथ एक निर्माता बनाया।
रैप

1
क्या कोई तरीका है जिससे हम निर्माणकर्ताओं के लिए इस प्रतिमान का उपयोग करके विरासत का एक उदाहरण प्राप्त कर सकते हैं?
नाथन सी। ट्राईशच

1
@Rap जॉन के निर्माता के उदाहरण में कोई पैरामीटर नहीं है क्योंकि यह Box()फ़ंक्शन है :)। लेकिन यह उदाहरण और साथ ही अन्य उत्तरों में उदाहरण पैरामीटर को स्वीकार करने के लिए आसान बढ़ाया जा सकता है।
अलेक्जेंडर स्टीपानुक

2
@AndersonGreen आप बॉक्स में एक पैरामीटर जोड़ सकते हैं और फिर इसे फंक्शन पैरामीटर के रूप में निजी कंस्ट्रक्टर को पास कर सकते हैं।
गौतम सी।

1
"प्राइवेट कंस्ट्रक्टर" की कोई आवश्यकता नहीं है। बस Boxफ़ंक्शन में अपना निर्माण करें और आप जाने के लिए अच्छे हैं (यह अभी भी "निजी" है)। जावास्क्रिप्ट में "निजी" का अर्थ केवल लेक्सिकल स्कोप के माध्यम से सुलभ है; सदस्यों को असाइन करने की कोई आवश्यकता नहीं है। अतिरिक्त रूप से: यह कोड गलत है। यह एक वैश्विक __constructचर बनाता है , जो काफी खराब है। varके दायरे को सीमित करने के लिए इस्तेमाल किया जाना चाहिए __construct
मटकाबस्टा

23

तो "कंस्ट्रक्टर" संपत्ति का क्या मतलब है? यह पता नहीं लगाया जा सकता है कि यह कहाँ उपयोगी हो सकता है, कोई विचार?

कंस्ट्रक्टर संपत्ति का मुद्दा यह है कि जावास्क्रिप्ट के बहाने कुछ कक्षाएं प्रदान की जाएं। जिन चीजों को आप उपयोगी रूप से नहीं कर सकते उनमें से एक वस्तु का निर्माता बनने के बाद उसे बदलना है। यह जटिल है।

मैंने कुछ साल पहले इस पर एक काफी व्यापक अंश लिखा था: http://joost.zeekat.nl/constructors-considered-mildly-confuse.html


बिंदु "नए" कीवर्ड का उपयोग करना है। "d = new Drofto ()" एक खाली ऑब्जेक्ट बनाता है और Drofto फ़ंक्शन को "नई" के रूप में बाध्य नई ऑब्जेक्ट के साथ चलाता है। ड्रॉफ्टो फ़ंक्शन कुछ भी वापस करने के लिए स्वतंत्र है, लेकिन ड्रॉफ्टो वर्ग के सदस्य के रूप में माना जाने वाला कुछ वापस करने के लिए प्रथागत है।
जुआन लानुस

16

यहाँ उदाहरण: http://jsfiddle.net/FZ5nC/

इस टेम्पलेट का प्रयास करें:

<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Name = Name||{};
Name.Space = Name.Space||{};

//============================================================
// Constructor - MUST BE AT TOP OF FILE
//------------------------------------------------------------
Name.Space.ClassName = function Name_Space_ClassName(){}

//============================================================
// Member Functions & Variables
//------------------------------------------------------------
Name.Space.ClassName.prototype = {
  v1: null
 ,v2: null
 ,f1: function Name_Space_ClassName_f1(){}
}

//============================================================
// Static Variables
//------------------------------------------------------------
Name.Space.ClassName.staticVar = 0;

//============================================================
// Static Functions
//------------------------------------------------------------
Name.Space.ClassName.staticFunc = function Name_Space_ClassName_staticFunc(){
}
</script>

यदि आप एक स्थिर वर्ग को परिभाषित कर रहे हैं, तो आपको अपने नामस्थान को समायोजित करना होगा:

<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Shape = Shape||{};
Shape.Rectangle = Shape.Rectangle||{};
// In previous example, Rectangle was defined in the constructor.
</script>

उदाहरण वर्ग:

<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Shape = Shape||{};

//============================================================
// Constructor - MUST BE AT TOP OF FILE
//------------------------------------------------------------
Shape.Rectangle = function Shape_Rectangle(width, height, color){
    this.Width = width;
    this.Height = height;
    this.Color = color;
}

//============================================================
// Member Functions & Variables
//------------------------------------------------------------
Shape.Rectangle.prototype = {
  Width: null
 ,Height: null
 ,Color: null
 ,Draw: function Shape_Rectangle_Draw(canvasId, x, y){
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext("2d");
    context.fillStyle = this.Color;
    context.fillRect(x, y, this.Width, this.Height);
 }
}

//============================================================
// Static Variables
//------------------------------------------------------------
Shape.Rectangle.Sides = 4;

//============================================================
// Static Functions
//------------------------------------------------------------
Shape.Rectangle.CreateSmallBlue = function Shape_Rectangle_CreateSmallBlue(){
    return new Shape.Rectangle(5,8,'#0000ff');
}
Shape.Rectangle.CreateBigRed = function Shape_Rectangle_CreateBigRed(){
    return new Shape.Rectangle(50,25,'#ff0000');
}
</script>

उदाहरण तात्कालिकता:

<canvas id="painting" width="500" height="500"></canvas>
<script>
alert("A rectangle has "+Shape.Rectangle.Sides+" sides.");

var r1 = new Shape.Rectangle(16, 12, "#aa22cc");
r1.Draw("painting",0, 20);

var r2 = Shape.Rectangle.CreateSmallBlue();
r2.Draw("painting", 0, 0);

Shape.Rectangle.CreateBigRed().Draw("painting", 10, 0);
</script>

सूचना कार्यों को AB = फ़ंक्शन A_B () के रूप में परिभाषित किया गया है। यह आपकी स्क्रिप्ट को डीबग करना आसान बनाता है। Chrome का निरीक्षण तत्व पैनल खोलें, इस स्क्रिप्ट को चलाएं, और डीबग बैकट्रेस का विस्तार करें:

<script>
//============================================================
// Register Namespace
//------------------------------------------------------------
var Fail = Fail||{};

//============================================================
// Static Functions
//------------------------------------------------------------
Fail.Test = function Fail_Test(){
    A.Func.That.Does.Not.Exist();
}

Fail.Test();
</script>

उदाहरण जोड़ा गया। डिबग आउटपुट में सुधार के बारे में भी जानकारी जोड़ी।
bitlather

1
शायद इसलिए कि यह समस्या को जटिलता के एक अनावश्यक स्तर को जोड़ता है। पांडित्य नाम रिक्ति और स्टेटिक क्लास डिक्लेरेशन के कारण आपके पोस्ट में इसका उत्तर खोजना कठिन है। मुझे गलत मत समझो, यह अच्छी जानकारी है लेकिन अगर आप समझदारी से दरवाजे पर पैर रखने की कोशिश कर रहे हैं तो यह निश्चित रूप से मददगार से ज्यादा भ्रामक है। मैं जेएस में आधा सक्षम हूं और मैं मुश्किल से समझता हूं कि आप यहां क्या कर रहे हैं, या यह "मैं कंस्ट्रक्टर कैसे करें?" के लिए प्रासंगिक है।
Bmo

1
अंतर्दृष्टि के लिए धन्यवाद, Bmo। यह एक लम्बी पोस्ट थी, लेकिन यह इसलिए है क्योंकि मैं एक कंस्ट्रक्टर के उपयोग को नहीं समझता हूं अगर यह अच्छी तरह से परिभाषित ऑब्जेक्ट और स्थिर वर्ग कार्यान्वयन से बंधा नहीं है। C ++ या Java सीखने के दौरान, आपको यह सीखना होगा कि कंस्ट्रक्टरों को कैसे लागू किया जाए। जब से मैंने जावास्क्रिप्ट लिखने की इस पद्धति पर ठोकर खाई, तब से वेब देव अधिक सुखद हो गया है, और मैं सिर्फ साझा करना चाहता था। मैंने फिडल को ऊपर तक ले जाया, इसलिए इसे खोजना आसान है। मुझे उम्मीद है कि किसी भी भ्रम को स्पष्ट करेगा।
bitlather

1
@ क्या आप गंभीर हैं कि नेमस्पेस के बारे में दो लाइनें कंस्ट्रक्टर को बिल्कुल नीचे खोजने के लिए कड़ी मेहनत करती हैं, विशेष रूप से टिप्पणी दी - कंस्ट्रक्टर - मस्ट बी ऑफ टॉप? नेमस्पेस के साथ एक उदाहरण प्रदान करना बहुत स्वागत योग्य है, जावास्क्रिप्ट देव समुदाय नेत्रहीन नामस्थानों की अनदेखी करता है, जब नाम क्लैश होने पर त्रुटियों को खोजने में मुश्किल होती है। यह देखकर दुख होता है कि js devs सोचते हैं कि क्या वे इंटरनेट पर एक पोस्ट के टेक्स्ट का एक टुकड़ा कॉपी करते हैं और कुछ ऐसा ही करते हैं, जो उनके काम की जरूरत है।
user3285954

1
सामान्य रूप से js और वेब विकास के साथ प्रमुख समस्या यह है कि अधिकांश देव सभी प्रथाओं को अनदेखा करते हैं जो उद्योग ने 50+ वर्षों में बनाए और सोचा कि यदि वे एक अजाक्स कॉल कर सकते हैं तो वे राजा हैं। यह देखकर दुख हुआ कि जावास्क्रिप्ट में अच्छी तरह से ज्ञात पैटर्न और प्रथाओं का उपयोग शुरू करने के लिए इतने साल लग गए।
user3285954

10

यह एक निर्माता है:

function MyClass() {}

जब तुम करोगे

var myObj = new MyClass();

MyClass निष्पादित किया जाता है, और एक नया ऑब्जेक्ट उस वर्ग को वापस कर दिया जाता है।


1
स्पष्ट करने के लिए, आपकी कक्षा के शीर्ष पर इसका क्या मतलब है, आप कह सकते हैं alert(valuePassedInAsArgument);और यह प्रत्येक तात्कालिकता के लिए एक बार चलेगा, इसलिए पूरी कक्षा स्वयं निर्माता है।
मार्टिन लिन

new object is returned of that class- क्या यह अधिक नहीं है जैसे एक नया ऑब्जेक्ट उस फ़ंक्शन से वापस आ गया है?
डॉन चेडल

जावास्क्रिप्ट कार्यों में वस्तुएं हैं
सिंह

8

मुझे यह ट्यूटोरियल बहुत उपयोगी लगा। इस दृष्टिकोण का उपयोग अधिकांश jQuery प्लग-इन द्वारा किया जाता है।

http://www.htmlgoodies.com/html5/tutorials/create-an-object-oriented-javascript-class-constructor.html#fbid=OVYAQL_TDpK

var Class = function(methods) {   
    var klass = function() {    
        this.initialize.apply(this, arguments);          
    };  

    for (var property in methods) { 
       klass.prototype[property] = methods[property];
    }

    if (!klass.prototype.initialize) klass.prototype.initialize = function(){};      

    return klass;    
};

अभी ,

var Person = Class({ 
    initialize: function(name, age) {
        this.name = name;
        this.age  = age;
    },
    toString: function() {
        return "My name is "+this.name+" and I am "+this.age+" years old.";
    }
}); 

var alice = new Person('Alice', 26);
alert(alice.name); //displays "Alice"
alert(alice.age); //displays "26"
alert(alice.toString()); //displays "My name is Alice and I am 26 years old" in most browsers.
//IE 8 and below display the Object's toString() instead! "[Object object]"

10
जब भी मैं लोगों को इस्तेमाल करते हुए देखता हूं तो मैं klass
परेशान हो जाता हूं

8

इस पैटर्न ने मुझे अच्छी सेवा दी है। इस पैटर्न के साथ, आप अलग-अलग फ़ाइलों में कक्षाएं बनाते हैं, उन्हें अपने समग्र ऐप में "आवश्यकतानुसार" लोड करते हैं।

// Namespace
// (Creating new if not instantiated yet, otherwise, use existing and just add to it)
var myApp = myApp || {};

// "Package" 
// Similar to how you would establish a package in other languages
(function() {

// "Class"
var MyClass = function(params) {
    this.initialize(params);
}

    // "Private Static" vars 
    //    - Only accessible to functions in this class.
    //    - Doesn't get wiped out when we create a new instance.
    var countInstances = 0;
    var allInstances = [];

    // "Private Static" functions 
    //    - Same as above, but it's a function accessible 
    //      only to other functions in this class.
    function doSomething(){
    }

    // "Public Static" vars
    //    - Everyone has access.
    //    - Doesn't get wiped out when we create a new instance.
    MyClass.counter = 0;

    // "Public Static" functions
    //    - Same as above, but anyone can call this "static method".
    //    - Kinda like a singleton class situation.
    MyClass.foobar = function(){
    }

    // Public properties and methods are built into the "prototype"
    //    - This is how each instance can become unique unto itself.
    //    - Establishing "p" as "local" (Static Private) variable 
    //      simply so we don't have to keep typing "MyClass.prototype" 
    //      for each property and function.
var p = MyClass.prototype;

    // "Public" vars
    p.id = null;
    p.firstname = null;
    p.lastname = null;

    // "Private" vars
    //    - Only used by "this" instance.
    //    - There isn't "true" privacy for each 
    //      instance so we have to fake it. 
    //    - By tradition, we indicate "privacy"  
    //      by prefixing it with an underscore. 
    //    - So technically, anyone can access, but we simply 
    //      don't tell anyone about it (e.g. in your API)
    //      so no one knows about it :)
    p._foo = null;

    p.initialize = function(params){
        this.id = MyClass.counter++;
        this.firstname = params.firstname;
        this.lastname = params.lastname;
        MyClass.counter++;
        countInstances++;
        allInstances.push(this);
    }

    p.doAlert = function(theMessage){
        alert(this.firstname + " " + this.lastname + " said: " + theMessage + ". My id:" + this.id + ".  Total People:" + countInstances + ". First Person:" + allInstances[0].firstname + " " + allInstances[0].lastname);
    }


// Assign class to app
myApp.MyClass = MyClass;

// Close the "Package"
}());

// Usage example:
var bob = new myApp.MyClass({   firstname   :   "bob",
                                lastname    :   "er"
                            });

bob.doAlert("hello there");

वे उदाहरण चर हैं, लेकिन उनके पास "सार्वजनिक" पहुंच नहीं है, सी ++ या जावा की तरह "निजी" नहीं।
पोटाटोस्वाटर

आप एक निजी चर (क्लासिक अर्थ में) बनाने के बारे में कैसे जाएंगे जो उदाहरण के सापेक्ष है, लेकिन सभी उदाहरणों के लिए सामान्य नहीं है?
बॉब

डगलस क्रॉकफोर्ड की साइट देखें , वह भाषा डिजाइनरों में से एक है और एक अग्रणी प्राधिकरण है। मैं हमेशा उनके पैटर्न का पालन नहीं करता हूं, लेकिन सामान्य तौर पर एक निजी वेरिएबल varकंस्ट्रक्टर (या फ़ंक्शन तर्क या एक कंस्ट्रक्टर-जैसे फ़ंक्शन) में एक स्थानीय होता है।
पोटाटोज़वाटर

टिप के लिए धन्यवाद ... निम्नलिखित पृष्ठ बताता है कि मैं क्या देख रहा था: javascript.crockford.com/pStreet.html
bob

ओह, लिंक का परीक्षण न करने के लिए खेद है: पी
पोटाटोज़वटर

8

हां, आप इस तरह एक वर्ग घोषणा के अंदर एक कंस्ट्रक्टर को परिभाषित कर सकते हैं:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

vaersion IE के लिए> 12
zloctb

IE संस्करण के लिए> = 12 :) msdn.microsoft.com/en-au/library/dn802832(v=vs.94).aspx
Bruno

1
यह प्रश्न का एकमात्र वास्तविक उत्तर है। : /
मार्कड

6

मुझे लगता है कि मैं पोस्ट करूँगा कि मैं जावास्क्रिप्ट क्लोजर के साथ क्या करता हूं क्योंकि कोई भी अभी तक क्लोजर का उपयोग नहीं कर रहा है।

var user = function(id) {
  // private properties & methods goes here.
  var someValue;
  function doSomething(data) {
    someValue = data;
  };

  // constructor goes here.
  if (!id) return null;

  // public properties & methods goes here.
  return {
    id: id,
    method: function(params) {
      doSomething(params);
    }
  };
};

इस समाधान के लिए टिप्पणियाँ और सुझाव का स्वागत है। :)


1
एक दो टिप्पणियाँ: 1) स्टेटमेंट यदि (आईडी!) सुरक्षित नहीं है, तो 0 या गलत जैसे मानों के कारण यह सही मूल्यांकन और अशक्त हो जाएगा। मैं अनुमान लगा रहा हूँ कि आप अपरिभाषित या अशक्त के लिए जाँच करना चाहते हैं जिस स्थिति में === अशक्त और === अपरिभाषित बेहतर होगा। 2) यह और अधिक बारीकी से मॉड्यूल पैटर्न जैसा दिखता है ( पर्याप्त रूप सेood.com.com/2010/3/JavaScript-Module-Pattern-In-Depth ) एक निर्माता बनाम, एक मॉड्यूल होने का अंतर फ़ंक्शन से एक वस्तु देता है जबकि एक निर्माता एक वस्तु बनाता है जब नए कीवर्ड के साथ जोड़ा गया है, और उस स्थिति में आप ऑब्जेक्ट के बजाय 'इस' पर मान सेट करेंगे।
रिच

4

ऊपर निक के नमूने का उपयोग करके, आप अपनी ऑब्जेक्ट परिभाषा में अंतिम विवरण के रूप में रिटर्न स्टेटमेंट का उपयोग करते हुए बिना मापदंडों के ऑब्जेक्ट के लिए एक कंस्ट्रक्टर बना सकते हैं । नीचे दिए गए के रूप में अपने निर्माता समारोह लौटें और यह आप वस्तु बनाने के लिए __construct में कोड चलाएगा:

function Box()
{
   var __construct = function() {
       alert("Object Created.");
       this.color = 'green';
   }

  this.color = '';

   this.getColor = function() {
       return this.color;
   }

   __construct();
}

var b = new Box();

1
आप कंस्ट्रक्टर फ़ंक्शन को वापस नहीं कर रहे हैं, आप इसे कॉल कर रहे हैं।
डेविड कॉनरैड

यदि आप this.getColor();ऊपर की लाइन पर उपयोग करने की कोशिश करते हैं तो alert("Object Created.");कुछ भी सतर्क नहीं होगा। एक त्रुटि होगी जैसे "getColor परिभाषित नहीं है"। यदि आप चाहते हैं कि निर्माण अन्य तरीकों से कॉल करने में सक्षम हो, तो इसे अन्य सभी तरीकों के बाद परिभाषित किया जाना चाहिए। इसलिए __construct();अंतिम पंक्ति पर कॉल करने के बजाय बस वहां निर्माण को परिभाषित करें और ()उसके बाद इसे ऑटो-एग्जीक्यूट करने के लिए मजबूर करें।
thinsoldier

भूल सुधार। ()__Construct परिभाषा के अंत में जोड़ना अभी भी त्रुटि का परिणाम है। मुझे __construct();त्रुटि से बचने के लिए मूल कोड की तरह अपनी लाइन पर कॉल करना पड़ा ।
thinsoldier

4

शायद यह थोड़ा सरल हो गया है, लेकिन नीचे मैं 2017 में अब के साथ आया हूँ:

class obj {
  constructor(in_shape, in_color){
    this.shape = in_shape;
    this.color = in_color;
  }

  getInfo(){
    return this.shape + ' and ' + this.color;
  }
  setShape(in_shape){
    this.shape = in_shape;
  }
  setColor(in_color){
    this.color = in_color;
  }
}

उपरोक्त वर्ग का उपयोग करने में, मेरे पास निम्नलिखित हैं:

var newobj = new obj('square', 'blue');

//Here, we expect to see 'square and blue'
console.log(newobj.getInfo()); 

newobj.setColor('white');
newobj.setShape('sphere');

//Since we've set new color and shape, we expect the following: 'sphere and white'
console.log(newobj.getInfo());

जैसा कि आप देख सकते हैं, निर्माता दो मापदंडों में लेता है, और हम ऑब्जेक्ट के गुणों को निर्धारित करते हैं। हम setterफ़ंक्शन का उपयोग करके ऑब्जेक्ट के रंग और आकार में भी परिवर्तन करते हैं , और साबित करते हैं कि getInfo()इन परिवर्तनों के बाद कॉल करने पर इसका परिवर्तन बना रहा ।

थोड़ा देर से, लेकिन मुझे आशा है कि यह मदद करता है। मैंने इसे mochaयूनिट-परीक्षण के साथ परीक्षण किया है, और यह अच्छी तरह से काम कर रहा है।


3

यदि आप टाइपस्क्रिप्ट का उपयोग करते हैं तो वे करते हैं - MicroSoft से खुला स्रोत :-)

class BankAccount {
 balance: number;
 constructor(initially: number) {
 this.balance = initially;
 }
 deposit(credit: number) {
 this.balance += credit;
 return this.balance;
 }
}

टाइपस्क्रिप्ट आपको 'नकली' OO निर्माण देता है जो जावास्क्रिप्ट निर्माण में संकलित होता है। यदि आप एक बड़ी परियोजना शुरू कर रहे हैं तो यह आपके लिए बहुत समय बचा सकता है और यह केवल मील के पत्थर के 1.0 संस्करण तक पहुँच सकता है।

http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf

उपरोक्त कोड 'संकलित' हो जाता है:

var BankAccount = (function () {
    function BankAccount(initially) {
        this.balance = initially;
    }
    BankAccount.prototype.deposit = function (credit) {
        this.balance += credit;
        return this.balance;
    };
    return BankAccount;
})();

मैं एक बड़े प्रोजेक्ट पर काम कर रहा हूं और मैं लोगों को समझाने की कोशिश कर रहा हूं कि टाइपस्क्रिप्ट हमें एक रनिंग शूट देगा। हम देखेंगे कि कैसे जाता है।
wootscootinboogie

@wootscootinboogie एक दिन में (अभी 5.30 बजे समाप्त होता है) मैं इसके साथ बहुत दूर और बहुत सहज हो गया हूं। मैं दृढ़ता से के माध्यम से कल्पना को पढ़ने की सलाह देता हूं और जब आप वास्तविक किटी ग्रिट सामान का आधा हिस्सा छोड़ सकते हैं तो आप अपने आप को कम से कम एक बार पढ़ने के लिए एक एहसान कर रहे हैं। इस लड़के के वीडियो उत्कृष्ट youtube.com/user/basaratali/videos हैं । सौभाग्य)
सिमोन_वेर

1

जावास्क्रिप्ट में मंगलाचरण प्रकार कार्य के व्यवहार को परिभाषित करता है:

  • प्रत्यक्ष आह्वान func()
  • किसी वस्तु पर विधि आह्वान obj.func()
  • निर्माता मंगलाचरणnew func()
  • अप्रत्यक्ष आह्वान func.call()याfunc.apply()

ऑपरेटर का उपयोग करते समय फ़ंक्शन को एक निर्माता के रूप में आमंत्रित किया जाता है new:

function Cat(name) {
   this.name = name;
}
Cat.prototype.getName = function() {
   return this.name;
}

var myCat = new Cat('Sweet'); // Cat function invoked as a constructor

जावास्क्रिप्ट में किसी भी उदाहरण या प्रोटोटाइप ऑब्जेक्ट के पास एक संपत्ति है constructor, जो निर्माण कार्य को संदर्भित करता है।

Cat.prototype.constructor === Cat // => true
myCat.constructor         === Cat // => true

कंस्ट्रक्टर संपत्ति के बारे में इस पोस्ट की जाँच करें


0

ऊपर से ब्लिक्स के महान टेम्पलेट का उपयोग करते समय, मुझे पता चला कि यह मल्टी-लेवल इनहेरिटेंस (MyGrandChildClass के साथ MyChildClass का विस्तार करने वाले MyClass) के साथ अच्छी तरह से काम नहीं करता है - यह अपने माता-पिता के कंस्ट्रक्टर को बार-बार कॉल करने पर साइकिल चलाता है। तो यहां एक सरल समाधान है - यदि आपको बहु-स्तरीय विरासत की आवश्यकता है, तो इस तरह परिभाषित श्रृंखला फ़ंक्शन के साथ उपयोग this.constructor.super.call(this, surName);करने के बजाय chainSuper(this).call(this, surName);:

function chainSuper(cls) {
  if (cls.__depth == undefined) cls.__depth = 1; else cls.__depth++;
  var depth = cls.__depth;
  var sup = cls.constructor.super;
  while (depth > 1) {
    if (sup.super != undefined) sup = sup.super;
    depth--;
  }
  return sup;
}

0

http://www.jsoops.net/ Js में oop के लिए काफी अच्छा है। यदि निजी, संरक्षित, सार्वजनिक चर और फ़ंक्शन और इनहेरिटेंस सुविधा भी प्रदान करते हैं। उदाहरण कोड:

var ClassA = JsOops(function (pri, pro, pub)
{// pri = private, pro = protected, pub = public

    pri.className = "I am A ";

    this.init = function (var1)// constructor
    {
        pri.className += var1;
    }

    pub.getData = function ()
    {
        return "ClassA(Top=" + pro.getClassName() + ", This=" + pri.getClassName()
        + ", ID=" + pro.getClassId() + ")";
    }

    pri.getClassName = function () { return pri.className; }
    pro.getClassName = function () { return pri.className; }
    pro.getClassId = function () { return 1; }
});

var newA = new ClassA("Class");

//***Access public function
console.log(typeof (newA.getData));
// function
console.log(newA.getData());
// ClassA(Top=I am A Class, This=I am A Class, ID=1)

//***You can not access constructor, private and protected function
console.log(typeof (newA.init));            // undefined
console.log(typeof (newA.className));       // undefined
console.log(typeof (newA.pro));             // undefined
console.log(typeof (newA.getClassName));    // undefined

0

बस कुछ किस्म की पेशकश करने के लिए। ds.oop जावास्क्रिप्ट में कंस्ट्रक्टर्स साथ कक्षाएं घोषित करने के लिए एक अच्छा तरीका है। यह हर संभव प्रकार के वंशानुक्रम का समर्थन करता है (इसमें 1 प्रकार भी शामिल है जो c # भी समर्थन नहीं करता है) और साथ ही इंटरफेसेस भी अच्छा है।

var Color = ds.make.class({
    type: 'Color',
    constructor: function (r,g,b) { 
        this.r = r;                     /* now r,g, and b are available to   */
        this.g = g;                     /* other methods in the Color class  */
        this.b = b;                     
    }
});
var red = new Color(255,0,0);   // using the new keyword to instantiate the class

0

यहां हमें जावा स्क्रिप्ट में एक बिंदु पर ध्यान देने की आवश्यकता है, यह एक वर्ग-कम भाषा है, हालांकि, हम इसे जावा स्क्रिप्ट में फ़ंक्शन का उपयोग करके प्राप्त कर सकते हैं। इसे प्राप्त करने का सबसे आम तरीका है कि हमें जावा स्क्रिप्ट में एक फ़ंक्शन बनाने और ऑब्जेक्ट बनाने के लिए नए कीवर्ड का उपयोग करने और संपत्ति और विधियों को परिभाषित करने के लिए इस कीवर्ड का उपयोग करने की आवश्यकता है। बेलो इसका उदाहरण है।

// Function constructor

   var calculator=function(num1 ,num2){
   this.name="This is function constructor";
   this.mulFunc=function(){
      return num1*num2
   };

};

var objCal=new calculator(10,10);// This is a constructor in java script
alert(objCal.mulFunc());// method call
alert(objCal.name);// property call

//Constructors With Prototypes

var calculator=function(){
   this.name="Constructors With Prototypes";
};

calculator.prototype.mulFunc=function(num1 ,num2){
 return num1*num2;
};
var objCal=new calculator();// This is a constructor in java script
alert(objCal.mulFunc(10,10));// method call
alert(objCal.name); // property call

-2

ज्यादातर मामलों में आपको किसी तरह से संपत्ति की घोषणा करने की आवश्यकता होती है, इससे पहले कि आप इस जानकारी में पास होने वाली विधि को कॉल कर सकें। यदि आपको शुरू में एक संपत्ति निर्धारित करने की आवश्यकता नहीं है, तो आप इस तरह से ऑब्जेक्ट के भीतर एक विधि कह सकते हैं। शायद ऐसा करने का सबसे सुंदर तरीका नहीं है लेकिन यह अभी भी काम करता है।

var objectA = {
    color: ''; 
    callColor : function(){
        console.log(this.color);
    }
    this.callColor(); 
}
var newObject = new objectA(); 
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.