This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

The object.create () method creates a new Object, using an existing Object to provide the __proto__ of the newly created Object

grammar

 // Returns a new object with the specified prototype object and properties.
ObjectThe create (proto, [propertiesObject])Copy the code
  • Proto: The prototype object of the newly created object, which must benullOr the original wrapped object, otherwise an exception is thrown
  • PropertiesObject: Optional argument. It needs to be an object whose own enumerable properties (that is, properties defined by itself, not enumerated properties in its stereotype chain) will add the specified property value and corresponding property descriptor to the newly created object

Don’t pass propertiesObject

const obj = {
  name: 'nordon'
};

const newObj = Object.create(obj);
Copy the code

NewObj will be printed as a {}, and the passed obj will be treated as a prototype of newObj. The name attribute belongs to newObj. Prototype, not obj.name

Pass propertiesObject

const obj = {
    name: "nordon"};const newObj = Object.create(obj, {
    name: {
        value: "wy".writable: true.configurable: true.enumerable: true
    },
    age: {
        value: 12.writable: true.configurable: true.enumerable: true}});Copy the code

NewObj for at this time

{
  name: 'wy'.age: 12
}
Copy the code

advantage

Why create an Object with object.create instead of using the literal form of an Object or creating an Object with Object?

const obj = {
    name: "nordon"};const newObj = Object.create(obj);
const nweObj2 = Object(obj);
Copy the code

Print obj, newObj, and newObj2 in sequence

You can see from the output that the Object created by the literal is the same as the Object created with Object, and its reference address is the same: obj === newObj2 is true

Create common objects add a layer between obj and newObj, in which case the reference addresses are decoupled: obj === newObj is false. This has the benefit of ensuring that the newly created Object is decoupled from the original Object without affecting the original data when we manipulate newObj

application

Use object.create to implement inheritance

function Person(name) {
  this.name = name;
  this.permission = ["user"."salary"."vacation"];
}

Person.prototype.say = function () {
  console.log(`The ${this.name}Speak `);
};

function Staff(name, age) {
  Person.call(this, name);
  this.age = age;
}

Staff.prototype = Object.create(Person.prototype, {
  constructor: {
      // If Staff constructor is not referred back to Staff, the Staff instance is zs. Constructor points to Person
      value: Staff,
  },
});

Staff.prototype.eat = function () {
  console.log("Eat something!");
};
Copy the code

Create a clean object and pass null as the first argument

const obj = Object.create(null);
Copy the code

As you can see from the console output, OBJ is very clean

Prototype doesn’t have a lot of inherited properties and methods, very concise

implementation

const create = function (proto) {
    if (typeofproto ! = ="object" && typeofproto ! = ="function") {
        // Type verification
        throw new TypeError("Proto must be an object or a function.");
    } else if (proto === null) {
        // null special handling
        throw new Error("Null passing is not currently supported in the browser");
    }

    // Create a constructor
    function F() {}
    // Change its prototype
    F.prototype = proto;

    // Return the constructed instance with an extra layer of F between the returned instance and the proto passed in
    return new F();
};
Copy the code

By implementing a simplified version of Object.create, you can see the differences between Object and its creation