JS: Object.create

By Xah Lee. Date: . Last updated: .

The most general way to create a object is using Object.create(…). It lets you specify its parent object, and also specify the new object's properties, and each property's attributes.

Syntax:

Object.create(obj)

Object.create(obj, {k1:descriptor_1, k2:descriptor_2, …})

Object.create(‹o›)

Object.create(o)

Return a new object such that its parent is o.

// Example of using Object.create(obj)
const o1 = {b:7};
const o2 = Object.create(o1); // o2 is now child of o1
console.log(Object.getPrototypeOf(o2) === o1); // true

You can write Object.create(null) to create a object that has no parent. Note: it won't have basic methods such as toString().

// create a object with no parent
const xx = Object.create(null);

Object.create(‹o›, {…})

Object.create(o, {k1:descriptor_1, k2:descriptor_2, …})

Return a new object such that its prototype (parent) is o. Also defines the new object's properties and their attributes.

Property Descriptor is the syntax for a property's value and attributes. It has the form:

{ value: value, writable: boolean, enumerable: boolean, configurable: boolean }

[see JS: Property Descriptor]

[see JS: Property Attributes, writable, enumerable, configurable]

// using Object.create() to create a object with specific parents, properties, and property attributes

const o1 = {p1:1};

// create a object o2, with parent o1, and also with property “p2”, and also set p2's value and attributes
const o2 = Object.create( o1,
                        {"p2":
                         { value : 2,
                           writable: true,
                           enumerable: true,
                           configurable: true
                         }
                        }
                      );

console.log(o2["p1"]); // prints 1
console.log(o2["p2"]); // prints 2

Create Getter/Setter Properties

Property Descriptor for getter property is: { get: function, enumerable: boolean, configurable: boolean }

Property Descriptor for setter property is: { set: function, enumerable: boolean, configurable: boolean }

// define getter and setter properties using Object.create

const obj = Object.create (
    Object.prototype,
    {
        "a": { get : function (x) { console.log ( "getter called" ) },
               enumerable: false,
               configurable: false },
        "b": { set : function (x) { console.log ( "setter called with arg "+x ) },
               enumerable: false,
               configurable: false }
    });

obj.a;
// prints
// getter called

obj.b = 3;
// prints
// setter called with arg 3

Default Values of Property Descriptor

The default values of {writable, enumerable, configurable} are all false, and default value of value is undefined.

[see JS: Property Descriptor]

Use Object.create() to Emulate Constructor

JS: How to Use Object.create() to Emulate Constructor?

Reference

ECMAScript® 2016 Language Specification#sec-object.create

JS Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Prototype and Inheritance
  4. Create Object
  5. Object Literal Expression
  6. Create Object with Parent X
  7. Get/Set Prototype
  8. Prevent Adding Property
  9. Determine Type of Object
  10. Clone Object
  11. Test Object Equality
  12. Add Method to Prototype
  13. Object Object
  14. Object.prototype
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog