Object.create()

Why Object.create ?

There are many ways to create a JavaScripte object. One of them is using the Object.create () method. The Object.create () method creates a new object using an existing object as the prototype of the newly created object.

Syntax:

Object.create( prototypeObject [, propertiesObject ])

prototypeObject: Newly created objects prototype object. It has to be an object or null.
propertiesObject: Properties of the new object. This argument is optional

---

In the following example, we created a variable named arr. We have synchronized this variable with the help of Object.create (). We’ve typed “null”, which is empty, into Object.create (). And we got this output (output: {}).

Then we entered “arr.name = alex” code. In this way, we have created an object. It output: “name: alex”.

        let arr = Object.create(null);

        console.log(arr);

        arr.name = "alex";
        console.log(arr)

output:

{}
{name: “alex”}

If you are wondering if an object is created, you can look at the “typeof” value.

        let arrType = typeof (arr);
        console.log(arrType);

object

---

Data Descriptors

• writable: Whether the concrete value of the property may be changed. Only applies to data descriptors.
• configurable: Whether the type of descriptor may be changed, or if the property can be removed.
• enumerable: Whether the property is listed in a loop through the properties of the object.
• value: The value of a property. This property only applies to Data descriptors because they reference concrete values, so the value describes the concrete data bound to the property.

---

JavaScript Object.create() Examples

Example 1

I’ve assigned a variable named “myObject” here. And I’ve written certain codes into it. Then I converted it to the object with the help of Object.create. And I assigned values ​​from the outside into this object. Then I output this object.

        myObject = {
            fullName: function() {
                return this.name + " / " + this.surname;
            }
        }

        let person = Object.create(myObject);
        console.log(person)
        // Here we get a blank value for not writing anything in the object


        // Adding properties to the person object
        person.name = "Rick";
        person.surname = "Allen";

        console.log(person.fullName())

output:

{}
Rick Allen

---

Example 2

In the following example, we create an object in the normal way. And we’re assigning certain values ​​to this object.

        function person(name) {
            this.name = name;
            this.surname = "allen";
            this.info = function() {
                return "name: " + this.name + " / " + "surname: " + this.surname;
            }
        }

        let per1 = new person("alex");
        console.log(per1.info());

output:

name: alex / surname: allen

Let’s create this object with the Object.create () method:

        function person(name) {
            this.name = name;
            this.surname = "allen";
        }

        person.prototype = {
            info : function() {
                return "name: " + this.name + " / " + "surname: " + this.surname;
            }
        }

        let per1 = Object.create(person.prototype);
        per1.surname = "quenn"
        console.log(per1.info());

output:

name: undefined / surname: quenn

The description is lost. So why is that? Simple; the create() method only uses the prototype and not the constructor. Hence, Object.create() is an excellent choice for creating an object without going through its constructor.

---

Example 3

        let users = {
            isUser: false,
            getInfo: function() {
                return "username: " + this.username + " / "
                    + "password: " + this.password;
            }
        }

        let user1 = Object.create(users);
        user1.username = "truecodes";
        user1.password = "123456";
        user1.isUser = true;

        console.log(users)
        console.log(user1.getInfo())

output:

{isUser: false, getInfo: ƒ}
username: truecodes / password: 123456

---

Example 4

        let name = {
            firstName: function() {
                return "name: " + this.name;
            }
        }

        let person = Object.create(name, {
            "firstName": {
                value: "alex",
                writable: true,
                enuerable: true,
            }
        })

        console.log(person.firstName)

output:

alex

---

Example 5

        obj1 = Object.create({});
        obj2 = Object.create(null);

        console.log(obj1)
        console.log(obj2)

        obj1.website = "truecodes";
        obj2.insta = "codeblogger";

        console.log(obj1)
        console.log(obj2)

output:

{}
{}
{website: “truecodes”}
{insta: “codeblogger”}

---

Polyfill

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();
    };
}

---

Browser Support

Chrome	5
Edge	yes
Firefox	4
Internet Explorer	9
Opera	11.6
Safari	5
Android webview	yes
Chrome for Android	yes
Edge mobile	yes
Firefox for Android	4
Opera Android	11.5