JavaScript: Creating Object with 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's attributes.

ECMAScript 2015 §Fundamental Objects#sec-object.create

Syntax:

1 Argument Form 「Object.create(‹o›)」

Object.create(o) → return a new object such that its parent is o.

// Example of using Object.create(obj)
var o1 = {b:7};
var 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
var xx = Object.create(null);

2 Argument Form 「Object.create(‹o›, {…})」

Object.create(o, {p1:property_descriptor_1, p2:property_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 JavaScript: Property Attributes: Writable, Enumerable, Configurable

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

var o1 = {p1:1};

// create a object o2, with parent o1, and also with property “p2”, and also set p2's value and attributes
var 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

Creating 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

var 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.

ECMAScript 2015 §ECMAScript Data Types and Values#table-4

//  default values of property attributes

var xx = Object.create( Object.prototype, { "p":{value:1} } );

console.log(  Object.getOwnPropertyDescriptor(xx, "p") );
// prints
// { value: 1,
//   writable: false,
//   enumerable: false,
//   configurable: false }

〔➤see JavaScript: Property Attributes: Writable, Enumerable, Configurable

Object and Inheritance Topic

  1. JavaScript: Object System Overview
  2. JavaScript: What's Object?
  3. JavaScript: Prototype and Inheritance
  4. JavaScript: Creating Object
  5. JavaScript: Object Literal Expression {…}
  6. JavaScript: Creating Object with Object.create()
  7. JavaScript: Find Object's Prototype/Parent
  8. JavaScript: How to Create Object with Parent X?
  9. JavaScript: Prevent Adding/Deleting/Modifying Object Properties
  10. JavaScript: Determine Type of Object
  11. JavaScript: Primitive Types Object Wrapper
  12. JavaScript: Clone Object
  13. JavaScript: Test Equality of Objects
  14. JavaScript: Boolean() Constructor Object
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.