Speaking of Object.create, we are often used when implementing native inheritance in ES5, but are not familiar with the entire API. Let’s take a closer look at the API

Object. The create definition

Create a new object, using an existing object to provide the __proto__ of the newly created object

The basic grammar

Object.create(proto, [propertiesObject])

  • Proto: The prototype object of the newly created object
  • PropertiesObject :(optional), passing in an Object whose one of its property values is a property description Object. See the second argument to object.defineproperties (). The Object’s own enumerable properties (that is, its own defined properties, Instead of enumerating properties on its stereotype chain) adds the specified property value and the corresponding property descriptor to the newly created object.

The propertiesObject, the second parameter, is a bit of a puzzle. Let’s take a look at the following example and summarize the Enumerable property in the property description object.

The sample

var person = {
    address: "world"
}

var son = Object.create(person, {
    name: {
        value: "min".writable: true.enumerable: true
    },
    sex: {
        value: "men".enumerable: false.writable: true
    },
    age: {
        value: 23}});console.log(son);  // node: { name: 'min' } chrome: {name: "min", sex: "men", age: 23}
console.log(son.__proto__);  // person
console.log(son.address);    // world
console.log(son.age);  / / 23
Copy the code

You can see it in the example above:

  1. The son Object created by object. create has its own properties name,sex, and age. Of course, these properties are displayed slightly differently in Node and Chrome
  2. The prototype of the newly created object son points to Person

enumerable

This is a very fancy property, and we’re going to look at this property again and look at an example

/* enumerable */
var person = {
    name: "min"
}

Object.defineProperty(person,"age", {value: 23.enumerable: false
})

console.log(person);  // node: { name: 'min' } chrome: {name: "min", age: 23}
console.log(Object.keys(person));  // [ 'name' ]
for(var i in person){
    console.log(i)
}               // name
console.log(Object.getOwnPropertyNames(person))  // [ 'name', 'age' ]
console.log(person.age);  / / 23
Copy the code

To sum up the following points:

  1. There is a difference between Node and Chrome when printing person. Chrome prints non-enumerable properties as well, whereas Node does not
  2. Attribute key value not under Symbol: object. keys,for… In prints out all enumerable properties and getOwnPropertyNames prints out all properties
  3. In both Node and Chrome, the Person. age method can also fetch non-enumerable property values

application

  • Implementation inheritance
function Super(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        console.log("hello,"+ this.name)
    }
}

function Sub(name,age,habit){
    this.habit = habit;
    Super.call(this, name, age);
}

Sub.prototype = Object.create(Super.prototype, {
    constructor: {// Constructor fix
        value: Sub    // No enumeration required}})var sub = new Sub("min".23."sleep");
console.log(sub instanceof Sub); // true
console.log(sub instanceof Super); // true
console.log(sub.constructor);  // Sub
Copy the code

You can see that using Object.create makes it easy to implement inheritance of stereotypes and constructor’s alliteration.

Thank you for reading this article. I hope it will be helpful to you. If you have any questions, please point out.

I’m HIM8 (✿◡ ◡), give me a like if you think it’s ok ❤.