javascript - जावास्क्रिप्ट में कक्षा को परिभाषित करने के लिए किस तकनीक का उपयोग किया जा सकता है, और उनके व्यापार-बंद क्या हैं?




oop class (12)

ईएस2015 कक्षाएं

ES2015 विनिर्देशन में, आप क्लास सिंटैक्स का उपयोग कर सकते हैं जो प्रोटोटाइप सिस्टम पर सिर्फ चीनी है।

class Person {
  constructor(name) {
    this.name = name;
  }
  toString() {
    return `My name is ${ this.name }.`;
  }
}

class Employee extends Person {
  constructor(name, hours) {
    super(name);
    this.hours = hours;
  }
  toString() {
    return `${ super.toString() } I work ${ this.hours } hours.`;
  }
}

लाभ

मुख्य लाभ यह है कि स्थिर विश्लेषण उपकरण को इस वाक्यविन्यास को लक्षित करना आसान लगता है। क्लास-आधारित भाषाओं से आने वाले लोगों के लिए पॉलीग्लोट के रूप में भाषा का उपयोग करना भी आसान है।

चेतावनियां

अपनी वर्तमान सीमाओं से सावधान रहें। निजी संपत्तियों को प्राप्त करने के लिए, किसी को प्रतीक या वीकमैप्स का उपयोग करना चाहिए। भविष्य में रिलीज में, इन लापता सुविधाओं को शामिल करने के लिए कक्षाओं का विस्तार किया जाएगा।

समर्थन

इस समय ब्राउज़र समर्थन बहुत अच्छा नहीं है (आईई को छोड़कर लगभग हर किसी द्वारा समर्थित), लेकिन आप अब इन सुविधाओं का उपयोग बैबेल जैसे ट्रांसपेलर के साथ कर सकते हैं।

साधन

मैं बड़े पैमाने पर परियोजनाओं में ओओपी का उपयोग करना पसंद करता हूं जैसे कि मैं अभी इस पर काम कर रहा हूं। मुझे जावास्क्रिप्ट में कई कक्षाएं बनाने की ज़रूरत है, लेकिन अगर मुझे गलत नहीं लगता है, तो ऐसा करने के लिए कम से कम कुछ तरीके हैं। वाक्यविन्यास क्या होगा और ऐसा क्यों किया जाएगा?

मैं कम से कम पहले - तीसरे पक्ष के पुस्तकालयों का उपयोग करने से बचना चाहता हूं।
अन्य उत्तरों की तलाश में, मुझे आलेख ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग जावास्क्रिप्ट के साथ मिला , भाग I: विरासत - दस्तावेज़ जावास्क्रिप्ट जो जावास्क्रिप्ट में ऑब्जेक्ट उन्मुख प्रोग्रामिंग पर चर्चा करता है। क्या विरासत करने का कोई बेहतर तरीका है?


@ Liammclennan के answer लिए कोड गोल्फ।

var Animal = function (args) {
  return {
    name: args.name,

    getName: function () {
      return this.name; // member access
    },

    callGetName: function () {
      return this.getName(); // method call
    }
  };
};

var cat = Animal({ name: 'tiger' });
console.log(cat.callGetName());


आप शायद फोल्डिंग पैटर्न का उपयोग करके एक प्रकार बनाना चाहते हैं:

    // Here is the constructor section.
    var myType = function () {
        var N = {}, // Enclosed (private) members are here.
            X = this; // Exposed (public) members are here.

        (function ENCLOSED_FIELDS() {
            N.toggle = false;
            N.text = '';
        }());

        (function EXPOSED_FIELDS() {
            X.count = 0;
            X.numbers = [1, 2, 3];
        }());

        // The properties below have access to the enclosed fields.
        // Careful with functions exposed within the closure of the
        // constructor, each new instance will have it's own copy.
        (function EXPOSED_PROPERTIES_WITHIN_CONSTRUCTOR() {
            Object.defineProperty(X, 'toggle', {
                get: function () {
                    var before = N.toggle;
                    N.toggle = !N.toggle;
                    return before;
                }
            });

            Object.defineProperty(X, 'text', {
                get: function () {
                    return N.text;
                },
                set: function (value) {
                    N.text = value;
                }
            });
        }());
    };

    // Here is the prototype section.
    (function PROTOTYPE() {
        var P = myType.prototype;

        (function EXPOSED_PROPERTIES_WITHIN_PROTOTYPE() {
            Object.defineProperty(P, 'numberLength', {
                get: function () {
                    return this.numbers.length;
                }
            });
        }());

        (function EXPOSED_METHODS() {
            P.incrementNumbersByCount = function () {
                var i;
                for (i = 0; i < this.numbers.length; i++) {
                    this.numbers[i] += this.count;
                }
            };
            P.tweak = function () {
                if (this.toggle) {
                    this.count++;
                }
                this.text = 'tweaked';
            };
        }());
    }());

वह कोड आपको माईटाइप नामक एक प्रकार देगा । इसमें टॉगल और टेक्स्ट नामक आंतरिक निजी फ़ील्ड होंगे। इसमें इन खुलासा सदस्यों भी होंगे: फ़ील्ड गिनती और संख्याएं ; गुण टॉगल , पाठ और संख्या लम्बाई ; विधियों में वृद्धि numbersByCount और चिमटा

फोल्डिंग पैटर्न यहां पूरी तरह से विस्तृत है: जावास्क्रिप्ट फोल्डिंग पैटर्न


एक आधार

function Base(kind) {
    this.kind = kind;
}

एक कक्षा

// Shared var
var _greeting;

(function _init() {
    Class.prototype = new Base();
    Class.prototype.constructor = Class;
    Class.prototype.log = function() { _log.apply(this, arguments); }
    _greeting = "Good afternoon!";
})();

function Class(name, kind) {
    Base.call(this, kind);
    this.name = name;
}

// Shared function
function _log() {
    console.log(_greeting + " Me name is " + this.name + " and I'm a " + this.kind);
}

कार्य

var c = new Class("Joe", "Object");
c.log(); // "Good afternoon! Me name is Joe and I'm a Object"

जावास्क्रिप्ट object-oriented , लेकिन यह जावा, सी # या सी ++ जैसी अन्य OOP भाषाओं की तुलना में मूल रूप से अलग है। इसे समझने की कोशिश मत करो। उस पुराने ज्ञान को फेंक दो और फिर से शुरू करें। जावास्क्रिप्ट को एक अलग सोच की जरूरत है।

मैं इस विषय पर एक अच्छा मैनुअल या कुछ पाने का सुझाव दूंगा। मैंने स्वयं को एक्स्टजेएस ट्यूटोरियल मेरे लिए सबसे अच्छा पाया, हालांकि मैंने इसे पढ़ने से पहले या बाद में ढांचे का उपयोग नहीं किया है। लेकिन यह जावास्क्रिप्ट दुनिया में क्या है इसके बारे में एक अच्छी व्याख्या देता है। क्षमा करें, ऐसा लगता है कि उस सामग्री को हटा दिया गया है। इसके बजाय archive.org प्रतिलिपि का एक लिंक यहां दिया गया है। आज काम करता है : पी


जावास्क्रिप्ट में ऑब्जेक्ट्स बनाने के तरीके निम्नलिखित हैं, जिन्हें मैंने अभी तक उपयोग किया है

उदाहरण 1:

obj = new Object();
obj.name = 'test';
obj.sayHello = function() {
    console.log('Hello '+ this.name);
}

उदाहरण 2:

obj = {};
obj.name = 'test';
obj.sayHello = function() {
    console.log('Hello '+ this.name);
}
obj.sayHello();

उदाहरण 3:

var obj = function(nameParam) {
    this.name = nameParam;
}
obj.prototype.sayHello = function() {
    console.log('Hello '+ this.name);
}

उदाहरण 4: Object.create () के वास्तविक लाभ। कृपया [यह लिंक] देखें

var Obj = {
    init: function(nameParam) {
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var usrObj = Object.create(Obj);  // <== one level of inheritance

usrObj.init('Bob');
usrObj.sayHello();

उदाहरण 5 (अनुकूलित क्रॉकफोर्ड का ऑब्जेक्ट .create):

Object.build = function(o) {
   var initArgs = Array.prototype.slice.call(arguments,1)
   function F() {
      if((typeof o.init === 'function') && initArgs.length) {
         o.init.apply(this,initArgs)
      }
   }
   F.prototype = o
   return new F()
}
MY_GLOBAL = {i: 1, nextId: function(){return this.i++}}  // For example

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.build(userB, 'Bob');  // Different from your code
bob.sayHello();

ES6 / ES2015 के साथ अद्यतन को अद्यतन रखने के लिए

एक वर्ग इस तरह परिभाषित किया गया है:

class Person {
    constructor(strName, numAge) {
        this.name = strName;
        this.age = numAge;
    }

    toString() {
        return '((Class::Person) named ' + this.name + ' & of age ' + this.age + ')';
    }
}

let objPerson = new Person("Bob",33);
console.log(objPerson.toString());

बाहरी पुस्तकालयों का उपयोग किये बिना इसे करने का तरीका यहां दिया गया है:

// Define a class like this
function Person(name, gender){

   // Add object properties like this
   this.name = name;
   this.gender = gender;
}

// Add methods like this.  All Person objects will be able to invoke this
Person.prototype.speak = function(){
    alert("Howdy, my name is" + this.name);
};

// Instantiate new objects with 'new'
var person = new Person("Bob", "M");

// Invoke methods like this
person.speak(); // alerts "Howdy, my name is Bob"

अब असली जवाब उससे कहीं अधिक जटिल है। उदाहरण के लिए, जावास्क्रिप्ट में कक्षाओं जैसी कोई चीज नहीं है। जावास्क्रिप्ट prototype आधारित विरासत योजना का उपयोग करता है।

इसके अलावा, कई लोकप्रिय जावास्क्रिप्ट पुस्तकालय हैं जिनके पास जावास्क्रिप्ट में कक्षा-जैसी कार्यक्षमता अनुमानित करने की अपनी शैली है। आप कम से कम Prototype और jQuery को देखना चाहेंगे।

यह तय करना कि इनमें से कौन सा "स्टैक" स्टैक ओवरफ्लो पर पवित्र युद्ध शुरू करने का एक शानदार तरीका है। यदि आप एक बड़ी जावास्क्रिप्ट-भारी परियोजना शुरू कर रहे हैं, तो यह निश्चित रूप से एक लोकप्रिय पुस्तकालय सीखने और इसे अपना रास्ता बनाने के लायक है। मैं एक प्रोटोटाइप लड़का हूं, लेकिन स्टैक ओवरफ़्लो jQuery की तरफ झुकता प्रतीत होता है।

जहां तक ​​बाहरी पुस्तकालयों पर किसी भी निर्भरता के बिना, "इसे करने का एक तरीका" है, जिस तरह से मैंने लिखा है वह काफी है।


मुझे लगता है कि आपको जावास्क्रिप्ट में जावास्क्रिप्ट और शास्त्रीय विरासत में डगलस क्रॉकफोर्ड के प्रोटोटाइप विरासत को पढ़ना चाहिए।

अपने पृष्ठ के उदाहरण:

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};

प्रभाव? यह आपको अधिक सुरुचिपूर्ण तरीके से विधियों को जोड़ने की अनुमति देगा:

function Parenizor(value) {
    this.setValue(value);
}

Parenizor.method('setValue', function (value) {
    this.value = value;
    return this;
});

मैं अपने वीडियो की भी सिफारिश करता हूं: उन्नत जावास्क्रिप्ट

आप अपने पृष्ठ पर और अधिक वीडियो पा सकते हैं: http://javascript.crockford.com/ जॉन रीसिग पुस्तक में आप डगलस क्रॉकफोर्स की वेबसाइट से कई उदाहरण पा सकते हैं।


यदि आप सरल के लिए जा रहे हैं, तो आप पूरी तरह से "नया" कीवर्ड से बच सकते हैं और केवल फैक्ट्री विधियों का उपयोग कर सकते हैं। मैं इसे पसंद करता हूं, कभी-कभी, क्योंकि मुझे वस्तुओं को बनाने के लिए JSON का उपयोग करना पसंद है।

function getSomeObj(var1, var2){
  var obj = {
     instancevar1: var1,
     instancevar2: var2,
     someMethod: function(param)
     {  
          //stuff; 
     }
  };
  return obj;
}

var myobj = getSomeObj("var1", "var2");
myobj.someMethod("bla");

मुझे यकीन नहीं है कि बड़े ऑब्जेक्ट्स के लिए प्रदर्शन हिट क्या है।


विरासत के साथ वस्तु आधारित वर्ग

var baseObject = 
{
     // Replication / Constructor function
     new : function(){
         return Object.create(this);   
     },

    aProperty : null,
    aMethod : function(param){
      alert("Heres your " + param + "!");
    },
}


newObject = baseObject.new();
newObject.aProperty = "Hello";

anotherObject = Object.create(baseObject); 
anotherObject.aProperty = "There";

console.log(newObject.aProperty) // "Hello"
console.log(anotherObject.aProperty) // "There"
console.log(baseObject.aProperty) // null

सरल, मीठा, और 'एर किया जाता है।


MooTools (मेरा ऑब्जेक्ट ओरिएंटेड टूल्स) classes के विचार पर केंद्रित है। आप विरासत के साथ भी विस्तार और कार्यान्वित कर सकते हैं।

जब महारत हासिल की जाती है, तो यह हास्यास्पद रूप से पुन: प्रयोज्य, शक्तिशाली जावास्क्रिप्ट के लिए बनाता है।


var Animal = function(options) {
    var name = options.name;
    var animal = {};

    animal.getName = function() {
        return name;
    };

    var somePrivateMethod = function() {

    };

    return animal;
};

// usage
var cat = Animal({name: 'tiger'});




class