कैसे जावास्क्रिप्ट में एक वर्ग से विरासत में मिला?


99

PHP / Java में कोई भी कर सकता है:

class Sub extends Base
{
}

और स्वचालित रूप से सुपर वर्ग के सभी सार्वजनिक / संरक्षित तरीके, गुण, क्षेत्र, आदि सब क्लास का एक हिस्सा बन जाते हैं जिन्हें आवश्यक होने पर ओवरराइड किया जा सकता है।

जावास्क्रिप्ट में इसके लिए क्या समान है?



1
यहाँ एक नज़र डालें: stackoverflow.com/questions/1908443/…
डारिन दिमित्रोव


क्या वह क्रॉकफोर्ड तरीका अभी भी काम करता है? ZParenizor.inherits (Parenizor);
लोरेन शकीपोग्जा

जवाबों:


80

मैंने बदल दिया है कि मैं अब यह कैसे करता हूं, मैं निर्माण कार्यों और उनकी prototypeसंपत्ति का उपयोग करने से बचने की कोशिश करता हूं, लेकिन 2010 से मेरा पुराना जवाब अभी भी नीचे है। मैं अब पसंद करता हूं Object.create()Object.createसभी आधुनिक ब्राउज़रों में उपलब्ध है।

मुझे ध्यान देना चाहिए कि Object.createआमतौर पर फ़ंक्शन कंस्ट्रक्टर के साथ उपयोग करने की तुलना में बहुत धीमा है new

//The prototype is just an object when you use `Object.create()`
var Base = {};

//This is how you create an instance:
var baseInstance = Object.create(Base);

//If you want to inherit from "Base":
var subInstance = Object.create(Object.create(Base));

//Detect if subInstance is an instance of Base:
console.log(Base.isPrototypeOf(subInstance)); //True

jsfiddle

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

var Base = {};

function createBase() {
  return Object.create(Base, {
    doSomething: {
       value: function () {
         console.log("Doing something");
       },
    },
  });
}

var Sub = createBase();

function createSub() {
  return Object.create(Sub, {
    doSomethingElse: {
      value: function () {
        console.log("Doing something else");
      },
    },
  }); 
}

var subInstance = createSub();
subInstance.doSomething(); //Logs "Doing something"
subInstance.doSomethingElse(); //Logs "Doing something else"
console.log(Base.isPrototypeOf(subInstance)); //Logs "true"
console.log(Sub.isPrototypeOf(subInstance)); //Logs "true

jsfiddle

यह 2010 से मेरा मूल उत्तर है:

function Base ( ) {
  this.color = "blue";
}

function Sub ( ) {

}
Sub.prototype = new Base( );
Sub.prototype.showColor = function ( ) {
 console.log( this.color );
}

var instance = new Sub ( );
instance.showColor( ); //"blue"

5
कैसे के बारे में sub.prototyp.constructor मूल्य? मुझे लगता है कि इसे उप मूल्य पर भी सेट किया जाना चाहिए।
मैक्सिमस

इसके अलावा, आप आरक्षित कीवर्ड ('सुपर') का उपयोग क्लास के नाम के रूप में कर रहे हैं, मैं आपका उदाहरण नहीं पा रहा था: jsbin.com/ixiyet/8/edit
MOnsDaR

@MOnsDaR मैंने इसका नाम बदलकर बेस
ब्योर्न

यदि मैं alert()यह देखने के लिए उपयोग करता हूं कि instance.showColor()मुझे अभी भी क्या रिटर्न मिलता है undefinedjsbin.com/uqalin/1
MOnsDaR

1
@MOnsDaR क्योंकि यह सांत्वना लॉग है, यह दिखाने के लिए चेतावनी के लिए कुछ भी वापस नहीं करता है। क्या आप शो-कॉर्नर में एक वापसी बयान देखते हैं?
ब्योर्न

190

जावास्क्रिप्ट में आपके पास कक्षाएं नहीं हैं लेकिन आप कई तरीकों से विरासत और व्यवहार का पुन: उपयोग कर सकते हैं:

छद्म-शास्त्रीय विरासत (प्रोटोटाइप के माध्यम से):

function Super () {
  this.member1 = 'superMember1';
}
Super.prototype.member2 = 'superMember2';

function Sub() {
  this.member3 = 'subMember3';
  //...
}
Sub.prototype = new Super();

newऑपरेटर के साथ इस्तेमाल किया जाना चाहिए :

var subInstance = new Sub();

समारोह आवेदन या "निर्माता जंजीर":

function Super () {
  this.member1 = 'superMember1';
  this.member2 = 'superMember2';
}


function Sub() {
  Super.apply(this, arguments);
  this.member3 = 'subMember3';
}

इस दृष्टिकोण का उपयोग newऑपरेटर के साथ भी किया जाना चाहिए :

var subInstance = new Sub();

पहला उदाहरण के साथ अंतर यह है कि जब हम है करने के लिए निर्माता ऑब्जेक्ट के अंदर है, यह करने के लिए आवंटित गुण जुड़ जाते हैं पर सीधे नया उदाहरण पर, जैसे गुण होता है और सीधे (applySuperthisSubthisSupersubInstancemember1member2subInstance.hasOwnProperty('member1') == true; )।

पहले उदाहरण में, उन गुणों को प्रोटोटाइप श्रृंखला के माध्यम से पहुंचा जाता है , वे एक आंतरिक [[Prototype]]वस्तु पर मौजूद होते हैं ।

परजीवी विरासत या पावर कंस्ट्रक्टर:

function createSuper() {
  var obj = {
    member1: 'superMember1',
    member2: 'superMember2'
  };

  return obj;
}

function createSub() {
  var obj = createSuper();
  obj.member3 = 'subMember3';
  return obj;
}

यह दृष्टिकोण मूल रूप से "ऑब्जेक्ट संवर्द्धन" पर आधारित है, आपको newऑपरेटर का उपयोग करने की आवश्यकता नहीं है , और जैसा कि आप देख सकते हैं, thisकीवर्ड शामिल नहीं है।

var subInstance = createSub();

ECMAScript 5 वीं एड। Object.createतरीका:

// Check if native implementation available
if (typeof Object.create !== 'function') {
  Object.create = function (o) {
    function F() {}  // empty constructor
    F.prototype = o; // set base object as prototype
    return new F();  // return empty object with right [[Prototype]]
  };
}

var superInstance = {
  member1: 'superMember1',
  member2: 'superMember2'
};

var subInstance = Object.create(superInstance);
subInstance.member3 = 'subMember3';

उपरोक्त विधि क्रोकफोर्ड द्वारा प्रस्तावित एक प्रोटोटाइप इनहेरिटेंस तकनीक है

ऑब्जेक्ट इंस्टेंस अन्य ऑब्जेक्ट इंस्टेंस से विरासत में मिला है, बस।

इस तकनीक को सरल "वस्तु वृद्धि" की तुलना में बेहतर हो सकता है क्योंकि विरासत में मिला गुण सब कुछ खत्म नई वस्तु उदाहरणों, के बाद से कॉपी नहीं किया गया आधार वस्तु के रूप में सेट किया गया है [[Prototype]]की विस्तारित वस्तु, में ऊपर के उदाहरण subInstanceशारीरिक रूप से ही शामिल member3संपत्ति।


3
विरासत के लिए उदाहरणों का उपयोग न करें - ईएस 5 Object.create()या एक कस्टम clone()फ़ंक्शन (जैसे mercurial.intuxication.org/hg/js-hacks/raw-file/tip/clone.js ) का उपयोग सीधे प्रोटोटाइप ऑब्जेक्ट से विरासत में प्राप्त करने के लिए करें; एक स्पष्टीकरण के लिए stackoverflow.com/questions/1404559/… पर टिप्पणियाँ देखें
Christoph

धन्यवाद @Christoph, मैं Object.createविधि का उल्लेख करने वाला था :)
CMS

1
यह उचित उत्तराधिकार नहीं है, क्योंकि आपके पास सब के प्रोटोटाइप पर सुपर के उदाहरण सदस्य होंगे। इसलिए सब के उदाहरणों में एक ही member1चर होगा, जो बिल्कुल भी वांछनीय नहीं है। बेशक वे इसे फिर से लिख सकते हैं, लेकिन इसका कोई मतलब नहीं है। github.com/dotnetwise/Javascript-FastClass एक बेहतर चीनी समाधान है।
आदापाबी

नमस्कार @CMS, क्या आप कृपया बता सकते हैं, मुझे प्रथम श्रेणी में मूल वर्ग के उदाहरण को उप-वर्ग के लिए विरासत सेट करने की आवश्यकता क्यों है? मैं इस लाइन के बारे में बात कर रहा हूँ Sub.prototype = new Super();:। क्या होगा यदि स्क्रिप्ट निष्पादन के दौरान दोनों वर्गों का उपयोग कभी नहीं किया जाएगा? यह प्रदर्शन के मुद्दे की तरह दिखता है। अगर चाइल्ड क्लास का वास्तव में उपयोग नहीं किया जाता है तो मुझे पैरेंट क्लास बनाने की क्या आवश्यकता है? क्या आप कृपया विस्तार से बता सकते हैं? यहाँ मुद्दे का सरल प्रदर्शन है: jsfiddle.net/slavafomin/ZeVL2 धन्यवाद!
स्लाव फोमिन II

सभी उदाहरणों में - पिछले एक को छोड़कर - सुपर के लिए एक "क्लास" और सब के लिए एक "क्लास" है, और फिर आप सब का एक उदाहरण बनाते हैं। क्या आप Object.create उदाहरण के लिए एक तुलनीय उदाहरण जोड़ सकते हैं?
ल्यूक

49

उन लोगों के लिए जो 2019 में या उसके बाद इस पृष्ठ पर पहुंचते हैं

ECMAScript मानक (ES6) के नवीनतम संस्करण के साथ , आप कीवर्ड का उपयोग कर सकते हैं class

ध्यान दें कि वर्ग परिभाषा नियमित नहीं है object; इसलिए कक्षा के सदस्यों के बीच कोई अल्पविराम नहीं है। कक्षा का एक उदाहरण बनाने के लिए, आपको newकीवर्ड का उपयोग करना होगा । बेस क्लास से विरासत में, उपयोग करें extends:

class Vehicle {
   constructor(name) {
      this.name = name;
      this.kind = 'vehicle';
   }
   getName() {
      return this.name;
   }   
}

// Create an instance
var myVehicle = new Vehicle('rocky');
myVehicle.getName(); // => 'rocky'

बेस क्लास से विरासत में, उपयोग करें extends:

class Car extends Vehicle {
   constructor(name) {
      super(name);
      this.kind = 'car'
   }
}

var myCar = new Car('bumpy');

myCar.getName(); // => 'bumpy'
myCar instanceof Car; // => true
myCar instanceof Vehicle; // => true

व्युत्पन्न वर्ग से, आप किसी भी निर्माता या विधि से सुपर का उपयोग उसके बेस क्लास तक पहुँचने के लिए कर सकते हैं:

  • मूल निर्माता को कॉल करने के लिए, का उपयोग करें super().
  • किसी अन्य सदस्य को कॉल करने के लिए, उदाहरण के लिए, का उपयोग करें super.getName()

कक्षाओं का उपयोग करने के लिए और अधिक है। यदि आप इस विषय में गहराई से खुदाई करना चाहते हैं, तो मैं डॉ। एक्सल रौशमेयर द्वारा " ECMAScript 6 में कक्षाएं " सुझाता हूं। *

स्रोत


1
हुड के तहत, classऔर extendsप्रोटोटाइप श्रृंखला के लिए (अल्ट्रा उपयोगी) सिंटैक्स चीनी है: stackoverflow.com/a/23877420/895245
Ciro Santilli 郝海东 is is 事件

आपकी जानकारी के लिए 'example.name' यहाँ 'mycar.name' वर्ग का नाम लौटाएगा। यह ES6 और ESnext का एक डिफ़ॉल्ट व्यवहार है। यहाँ mycar.name के लिए 'वाहन'
Shiljo Paulson

7

खैर, जावास्क्रिप्ट में "क्लास इनहेरिटेंस" नहीं है, बस "प्रोटोटाइप इनहेरिटेंस" है। तो आप एक वर्ग "ट्रक" नहीं बनाते हैं और फिर इसे "ऑटोमोबाइल" के उपवर्ग के रूप में चिह्नित करते हैं। इसके बजाय, आप एक ऑब्जेक्ट "जैक" बनाते हैं और कहते हैं कि यह एक प्रोटोटाइप के रूप में "जॉन" का उपयोग करता है। अगर जॉन जानता है, "4 + 4" कितना है, तो जैक यह भी जानता है।

मेरा सुझाव है कि आप यहां प्रोटोटाइप प्रोटोटाइप के बारे में डगलस क्रॉकफोर्ड का लेख पढ़ते हैं: http://javascript.crockford.com/prototypal.html वह यह भी दिखाता है कि आप जावास्क्रिप्ट कैसे बना सकते हैं जैसे अन्य ओओ भाषाओं में "लुक-अलाइक" विरासत है और फिर बताते हैं कि यह वास्तव में javaScript तोड़ने का मतलब एक तरह से इसका उपयोग करने के लिए नहीं था।


मान लेते हैं कि जैक का प्रोटोटाइप जॉन है। रन-टाइम के दौरान मैंने जॉन के साथ एक संपत्ति / व्यवहार जोड़ा। क्या मुझे वह संपत्ति / व्यवहार जैक से मिलेगा?
राम बावड़ीदी

आपको यकीन होगा। उदाहरण के लिए, यह है कि लोग आमतौर पर सभी स्ट्रिंग ऑब्जेक्ट्स में "ट्रिम ()" विधि जोड़ते हैं (यह अंतर्निहित नहीं है) यहां एक उदाहरण देखें: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ …
भक्तों ने

6

मुझे यह उद्धरण सबसे ज्ञानवर्धक लगता है:

संक्षेप में, एक जावास्क्रिप्ट "क्लास" सिर्फ एक फ़ंक्शन ऑब्जेक्ट है जो एक कंस्ट्रक्टर प्लस संलग्न प्रोटोटाइप ऑब्जेक्ट के रूप में कार्य करता है। ( स्रोत: गुरु काट्ज )

मुझे ऑब्जेक्ट के बजाय कंस्ट्रक्टर का उपयोग करना पसंद है, इसलिए मैं सीएमएस द्वारा यहां वर्णित "छद्म-शास्त्रीय विरासत" विधि के लिए आंशिक हूं । यहाँ एक प्रोटोटाइप श्रृंखला के साथ कई विरासत का एक उदाहरण है :

// Lifeform "Class" (Constructor function, No prototype)
function Lifeform () {
    this.isLifeform = true;
}

// Animal "Class" (Constructor function + prototype for inheritance)
function Animal () {
    this.isAnimal = true;
}
Animal.prototype = new Lifeform();

// Mammal "Class" (Constructor function + prototype for inheritance)
function Mammal () {
    this.isMammal = true;
}
Mammal.prototype = new Animal();

// Cat "Class" (Constructor function + prototype for inheritance)
function Cat (species) {
    this.isCat = true;
    this.species = species
}
Cat.prototype = new Mammal();

// Make an instance object of the Cat "Class"
var tiger = new Cat("tiger");

console.log(tiger);
// The console outputs a Cat object with all the properties from all "classes"

console.log(tiger.isCat, tiger.isMammal, tiger.isAnimal, tiger.isLifeform);
// Outputs: true true true true

// You can see that all of these "is" properties are available in this object
// We can check to see which properties are really part of the instance object
console.log( "tiger hasOwnProperty: "
    ,tiger.hasOwnProperty("isLifeform") // false
    ,tiger.hasOwnProperty("isAnimal")   // false
    ,tiger.hasOwnProperty("isMammal")   // false
    ,tiger.hasOwnProperty("isCat")      // true
);

// New properties can be added to the prototypes of any
// of the "classes" above and they will be usable by the instance
Lifeform.prototype.A    = 1;
Animal.prototype.B      = 2;
Mammal.prototype.C      = 3;
Cat.prototype.D         = 4;

console.log(tiger.A, tiger.B, tiger.C, tiger.D);
// Console outputs: 1 2 3 4

// Look at the instance object again
console.log(tiger);
// You'll see it now has the "D" property
// The others are accessible but not visible (console issue?)
// In the Chrome console you should be able to drill down the __proto__ chain
// You can also look down the proto chain with Object.getPrototypeOf
// (Equivalent to tiger.__proto__)
console.log( Object.getPrototypeOf(tiger) );  // Mammal 
console.log( Object.getPrototypeOf(Object.getPrototypeOf(tiger)) ); // Animal
// Etc. to get to Lifeform

यहाँ MDN से एक और अच्छा संसाधन है , और यहाँ एक jsfiddle है ताकि आप इसे आज़मा सकें


4

जावास्क्रिप्ट वंशानुक्रम जावा और PHP से थोड़ा अलग है, क्योंकि इसमें वास्तव में कक्षाएं नहीं हैं। इसके बजाय इसमें प्रोटोटाइप ऑब्जेक्ट हैं जो विधियों और सदस्य चर प्रदान करते हैं। आप ऑब्जेक्ट इनहेरिटेंस प्रदान करने के लिए उन प्रोटोटाइप को चेन कर सकते हैं। इस सवाल पर शोध करने पर मुझे जो सबसे सामान्य पैटर्न मिला, वह मोज़िला डेवलपर नेटवर्क पर वर्णित है । मैंने एक सुपरक्लास पद्धति में कॉल शामिल करने और चेतावनी संदेश में लॉग दिखाने के लिए उनका उदाहरण अपडेट किया है:

// Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

// superclass method
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  log += 'Shape moved.\n';
};

// Rectangle - subclass
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

// Override method
Rectangle.prototype.move = function(x, y) {
  Shape.prototype.move.call(this, x, y); // call superclass method
  log += 'Rectangle moved.\n';
}

var log = "";
var rect = new Rectangle();

log += ('Is rect an instance of Rectangle? ' + (rect instanceof Rectangle) + '\n'); // true
log += ('Is rect an instance of Shape? ' + (rect instanceof Shape) + '\n'); // true
rect.move(1, 1); // Outputs, 'Shape moved.'
alert(log);

व्यक्तिगत रूप से, मुझे जावास्क्रिप्ट में विरासत में अजीब लगता है, लेकिन यह सबसे अच्छा संस्करण है जो मैंने पाया है।


3

आप (शास्त्रीय अर्थ में) नहीं कर सकते। जावास्क्रिप्ट एक प्रोटोटाइप भाषा है। आप देखेंगे कि आप जावास्क्रिप्ट में कभी भी "क्लास" घोषित नहीं करते हैं; आप केवल एक वस्तु की स्थिति और तरीकों को परिभाषित करते हैं। विरासत का उत्पादन करने के लिए, आप कुछ ऑब्जेक्ट लेते हैं और इसे प्रोटोटाइप करते हैं। प्रोटोटाइप को नई कार्यक्षमता के साथ बढ़ाया गया है।


1

आप .inheritWithऔर पुस्तकालय का उपयोग कर सकते हैं.fastClass । यह सबसे लोकप्रिय पुस्तकालयों से तेज है और कभी-कभी देशी संस्करण की तुलना में भी तेज है।

उपयोग करने के लिए बहुत आसान है:

function Super() {
   this.member1 = "superMember";//instance member
}.define({ //define methods on Super's prototype
   method1: function() { console.log('super'); } //prototype member
}.defineStatic({ //define static methods directly on Super function 
   staticMethod1: function() { console.log('static method on Super'); }
});

var Sub = Super.inheritWith(function(base, baseCtor) {
   return {
      constructor: function() {//the Sub constructor that will be returned to variable Sub
         this.member3 = 'subMember3'; //instance member on Sub
         baseCtor.apply(this, arguments);//call base construcor and passing all incoming arguments
      },
      method1: function() { 
         console.log('sub'); 
         base.method1.apply(this, arguments); //call the base class' method1 function
      }
}

प्रयोग

var s = new Sub();
s.method1(); //prints:
//sub 
//super

1
function Person(attr){
  this.name = (attr && attr.name)? attr.name : undefined;
  this.birthYear = (attr && attr.birthYear)? attr.birthYear : undefined;

  this.printName = function(){
    console.log(this.name);
  }
  this.printBirthYear = function(){
    console.log(this.birthYear);
  }
  this.print = function(){
    console.log(this.name + '(' +this.birthYear+ ')');
  }
}

function PersonExt(attr){
  Person.call(this, attr);

  this.print = function(){
    console.log(this.name+ '-' + this.birthYear);
  }
  this.newPrint = function(){
    console.log('New method');
  }
}
PersonExt.prototype = new Person();

// Init object and call methods
var p = new Person({name: 'Mr. A', birthYear: 2007});
// Parent method
p.print() // Mr. A(2007)
p.printName() // Mr. A

var pExt = new PersonExt({name: 'Mr. A', birthYear: 2007});
// Overwriten method
pExt.print() // Mr. A-2007
// Extended method
pExt.newPrint() // New method
// Parent method
pExt.printName() // Mr. A

1

कई पोस्ट पढ़ने के बाद, मैं इस समाधान ( यहाँ jsfiddle ) के साथ आया । ज्यादातर समय मुझे कुछ अधिक परिष्कृत करने की आवश्यकता नहीं होती है

var Class = function(definition) {
    var base = definition.extend || null;
    var construct = definition.construct || definition.extend || function() {};

    var newClass = function() { 
        this._base_ = base;        
        construct.apply(this, arguments);
    }

    if (definition.name) 
        newClass._name_ = definition.name;

    if (definition.extend) {
        var f = function() {}       
        f.prototype = definition.extend.prototype;      
        newClass.prototype = new f();   
        newClass.prototype.constructor = newClass;
        newClass._extend_ = definition.extend;      
        newClass._base_ = definition.extend.prototype;         
    }

    if (definition.statics) 
        for (var n in definition.statics) newClass[n] = definition.statics[n];          

    if (definition.members) 
        for (var n in definition.members) newClass.prototype[n] = definition.members[n];    

    return newClass;
}


var Animal = Class({

    construct: function() {        
    },

    members: {

        speak: function() {
            console.log("nuf said");                        
        },

        isA: function() {        
            return "animal";           
        }        
    }
});


var Dog = Class({  extend: Animal,

    construct: function(name) {  
        this._base_();        
        this.name = name;
    },

    statics: {
        Home: "House",
        Food: "Meat",
        Speak: "Barks"
    },

    members: {
        name: "",

        speak: function() {
            console.log( "ouaf !");         
        },

        isA: function(advice) {
           return advice + " dog -> " + Dog._base_.isA.call(this);           
        }        
    }
});


var Yorkshire = Class({ extend: Dog,

    construct: function(name,gender) {
        this._base_(name);      
        this.gender = gender;
    },

    members: {
        speak: function() {
            console.log( "ouin !");           
        },

        isA: function(advice) {         
           return "yorkshire -> " + Yorkshire._base_.isA.call(this,advice);       
        }        
    }
});


var Bulldog = function() { return _class_ = Class({ extend: Dog,

    construct: function(name) {
        this._base_(name);      
    },

    members: {
        speak: function() {
            console.log( "OUAF !");           
        },

        isA: function(advice) {         
           return "bulldog -> " + _class_._base_.isA.call(this,advice);       
        }        
    }
})}();


var animal = new Animal("Maciste");
console.log(animal.isA());
animal.speak();

var dog = new Dog("Sultan");
console.log(dog.isA("good"));
dog.speak();

var yorkshire = new Yorkshire("Golgoth","Male");
console.log(yorkshire.isA("bad"));
yorkshire.speak();

var bulldog = new Bulldog("Mike");
console.log(bulldog.isA("nice"));
bulldog.speak();

1

सीएमएस के उत्तर के लिए धन्यवाद और प्रोटोटाइप और Object.create के साथ थोड़ी देर के लिए फ़िडलिंग के बाद और क्या नहीं, मैं यहां दिखाए गए अनुसार आवेदन का उपयोग करके अपनी विरासत के लिए एक स्वच्छ समाधान के साथ आने में सक्षम था:

var myNamespace = myNamespace || (function() {
    return {

        BaseClass: function(){
            this.someBaseProperty = "someBaseProperty";
            this.someProperty = "BaseClass";
            this.someFunc = null;
        },

        DerivedClass:function(someFunc){
            myNamespace.BaseClass.apply(this, arguments);
            this.someFunc = someFunc;
            this.someProperty = "DerivedClass";
        },

        MoreDerivedClass:function(someFunc){
            myNamespace.DerivedClass.apply(this, arguments);
            this.someFunc = someFunc;
            this.someProperty = "MoreDerivedClass";
        }
    };
})();


1
function Base() {
    this.doSomething = function () {
    }
}

function Sub() {
    Base.call(this); // inherit Base's method(s) to this instance of Sub
}

var sub = new Sub();
sub.doSomething();

2
कृपया केवल कोड पोस्ट न करें, यह बताएं कि यह क्या करता है और यह प्रश्न का उत्तर कैसे देता है।
पैट्रिक हंड

1

ES6 वर्ग:

जावास्क्रिप्ट में कक्षाएं नहीं होती हैं। जावास्क्रिप्ट में कक्षाएं प्रोटोटाइप हेरिटेज पैटर्न के शीर्ष पर सिर्फ चीनी का निर्माण होता है जो जावास्क्रिप्ट होता है। आप classप्रोटोटाइप विरासत को लागू करने के लिए जेएस का उपयोग कर सकते हैं लेकिन यह महसूस करना महत्वपूर्ण है कि आप वास्तव में हुड के तहत निर्माण कार्यों का उपयोग कर रहे हैं।

ये अवधारणाएँ तब भी लागू होती हैं जब आप एक es6'क्लास' से फैली हुई कीवर्ड का उपयोग कर रहे होते हैं । यह सिर्फ प्रोटोटाइप श्रृंखला में एक अतिरिक्त लिंक बनाता है। __proto__

उदाहरण:

class Animal {
  makeSound () {
    console.log('animalSound');
  }
}

class Dog extends Animal {
   makeSound () {
    console.log('Woof');
  }
}


console.log(typeof Dog)  // classes in JS are just constructor functions under the hood

const dog = new Dog();

console.log(dog.__proto__ === Dog.prototype);   
// First link in the prototype chain is Dog.prototype

console.log(dog.__proto__.__proto__ === Animal.prototype);  
// Second link in the prototype chain is Animal.prototype
// The extends keyword places Animal in the prototype chain
// Now Dog 'inherits' the makeSound property from Animal

Object.create ()

Object.create()जावास्क्रिप्ट में जेएस में विरासत बनाने का एक तरीका भी है। Object.create()एक ऐसा कार्य है जो एक नई वस्तु बनाता है, एक मौजूदा वस्तु को एक तर्क के रूप में लेता है। यह उस ऑब्जेक्ट को असाइन करेगा जिसे एक तर्क के रूप में प्राप्त किया गया था__proto__ नए बनाए गए ऑब्जेक्ट संपत्ति के । फिर से यह महसूस करना महत्वपूर्ण है कि हम प्रोटोटाइप वंशानुक्रम प्रतिमान से बंधे हैं जिसे जेएस अवतार लेते हैं।

उदाहरण:

const Dog = {
  fluffy: true,
  bark: () => {
      console.log('woof im a relatively cute dog or something else??');
  }
};

const dog = Object.create(Dog);

dog.bark();


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.