Understanding the JavaScript create object method

JavaScript create object (Object.create()) is introduced in JavaScript version 1.8.5 is simply a method that creates a new object using an existing object as the prototype of the newly created object. For example:-

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

// creating a new object 
const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

In the above example we have an object called person and has two properties isHuman is a boolean and printIntroduction is a function.

Then we created a new object called me using Object.create().

Then defined the name and isHuman property of newly created object called me , but not on person.

As isHuman is false in person object and we assign true to isHuman property of me object, it will become true because inherited properties can be overwritten.

And finally, call the function me.printIntroduction()

Expected output: My name is Matthew. Am I human? true

Syntax

Object.create(proto, [propertiesObject])

Object.create() method can receive two parameters.

proto: The object which should be the prototype of the newly-created object.

propertiesObject: This is the optional parameter but If specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names. These properties correspond to the second argument of Object.defineProperties().

The return value of Object.create() method is a new object with the specified prototype object and properties.

Second Argument

Here I’m gonna show you an example of the second argument of JavaScript create object method

var superPower = {
    usePower: function () {
        console.log(this.power + "!");
    }
};

Above we created an object called superPower and has a property name usePower that is a function that prints power property. but we did not define the power property above. Let’s do it with using the second argument of Object.create() method in the below example:

var newSuperPower = Object.create(superPower, {
    power: { value: "sonic speed" }
});

// Outputs: "sonic speed!"
newSuperPower.usePower();

In the above example, we created a new object called newSuperPower by using Object.create() method and also assign power property in the second argument. That second argument might look a little strange to you, but it’s just a simple property descriptor object. In this case, you must have to assign value as a object else, it will give you Uncaught TypeError: Property description must be an object: sonic speed

Polyfill

Polyfill is a piece of code that mimics the modern functionality to older browsers.

if (typeof Object.create !== "function") {
    Object.create = function (proto, propertiesObject) {
        if (typeof proto !== 'object' && typeof proto !== 'function') {
            throw new TypeError('Object prototype may only be an Object: ' + proto);
        } else if (proto === null) {
            throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
        }

        if (typeof propertiesObject != 'undefined') {
            throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
        }

        function F() {}
        F.prototype = proto;

        return new F();
    };
}

For now, that’s all. Thanks for reading. Share if you find helpful.