Understanding the JavaScript create object method
JavaScript 0 CommentsJavaScript 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.