How to create object which inherits from a parent object?

Question

I have this object:

var A = {
  headers: {
    'a property' : 'a value'
  }
};

How I can create another object like this?

I do not want to type the whole parent object? My new object should contain the parent object, so when I console.log var A, B, and C it should produce different results.

var B = {
  headers: {
    'a property' : 'a value',
    'b property' : 'b value'
  }
};

var C = {
  headers: {
    'a property' : 'a value',
    'b property' : 'b value'
  },
  other: {
    other2: {
      'other2 property' : 'other2 property'
    }
  }
};

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create — Teemu, Dec 31 '16 at 10:01
@Teemu little bit confuse on how to use it, may be you could answer it. — Dark Cyber, Dec 31 '16 at 10:09
If you need a deep clone of the previous object when you extend it, you can use one of the many deep merge solutions posted for [this question](http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically/41407737#41407737), for example the function I [posted there](http://stackoverflow.com/a/41407737/5459839). — trincot, Dec 31 '16 at 11:20

Saeed · Answer 1 · 2016-12-31T10:53:13.887

2

You can use create function:

var B = Object.create(A);
B.headers['b property'] = 'b value';

var C = Object.create(B);
C.others = {
    other2: {
      'other2 property' : 'other2 property'
    }
  }

edited Dec 31 '16 at 10:53

answered Dec 31 '16 at 10:16

Saeed

572
2
7
19

Should be `var C = Object.create(B)` no? – Dan Prince Dec 31 '16 at 10:41
Just be aware that B and C share the `headers` object with A. If you change them via one, the change will be visible in the other as well. Note how this code adds the `b property` to `A.headers`. – trincot Dec 31 '16 at 11:23

Supradeep · Answer 2 · 2016-12-31T10:26:04.807

0

If your question is to extend the object B with the values already in A, you can use javascript object method Object.assign to do that like below :

var A = {
  headers: {
    'a property' : 'a value'
  }
};


var B = Object.assign(A);
B.headers['b property'] = 'b value';

This will copy the contents of source object i.e A.headers here into B.headers resulting below :

{
  headers: {
    'a property' : 'a value',
    'b property' : 'b value'
  }
};

edited Dec 31 '16 at 10:26

answered Dec 31 '16 at 10:15

Supradeep

3,246
1
14
28

Note how this code adds the `b property` to `A.headers` – trincot Dec 31 '16 at 11:25

score 0 · Answer 3 · answered Dec 31 '16 at 10:21

I always use Simple JavaScript Inheritance by John Resig in my projects. It is a simple yet an elegant solution for the inheritance.

By using foregoing solution you can define your classes as follows. All you need to do is extending the classes.

var Person = Class.extend({
    init: function(isDancing) {
        this.dancing = isDancing;
    }
});

var Ninja = Person.extend({
    init: function() {
        this._super(false); // => Overrides the superior constructor
    }
});

var p = new Person(true);
p.dancing; // => true

var n = new Ninja();
n.dancing; // => false

It is also helpful since there is going to be an init method for all your classes so you are going to know where to bootstrap things, and how to override things properly.

How to create object which inherits from a parent object?

3 Answers3