javascript - How to console.log all inherited properties? - Stack Overflow

admin管理员组

文章数量:1388822

Sorry for noob question. I'm just learning JavaScript.

I have an easy Object.

var bike = {
  wheels: 2,
};

I create a new one that inherits all the bike values via create() and add some new properties to new Object.

var raleigh = Object.create(bike);
raleigh.color = 'red';

When I do console.log on new raleigh Object I can't see propeties inherited from bike Object.

console.log(raleigh);

The log is:

{ color: 'red' }

How to log to console all properties including these inherited?

Sorry for noob question. I'm just learning JavaScript.

I have an easy Object.

var bike = {
  wheels: 2,
};

I create a new one that inherits all the bike values via create() and add some new properties to new Object.

var raleigh = Object.create(bike);
raleigh.color = 'red';

When I do console.log on new raleigh Object I can't see propeties inherited from bike Object.

console.log(raleigh);

The log is:

{ color: 'red' }

How to log to console all properties including these inherited?

• javascript
• object
• inheritance

Share Improve this question Follow asked Jun 28, 2015 at 13:33 Paweł GrzybekPaweł Grzybek 1,11388 silver badges1414 bronze badges 3

• 2 You need to follow prototype chain in console – Tushar Commented Jun 28, 2015 at 13:34
• see this: developer.mozilla/en/docs/Web/JavaScript/Reference/… – Sajal Commented Jun 28, 2015 at 13:36
• In chrome you can expand the faded __proto__ – Paul S. Commented Jun 28, 2015 at 13:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

When an object is printed through console.log, it is printed with all its own properties and a link to the object it inherits from. You can see all the inherited properties in console, you just need to follow the prototype chain of the displayed object (typically using __proto__ or [[prototype]] keys).

When you use Object.create then your prototype will be the same the object that you are inheriting, so, to show "father" properties you could see the prototype:

console.log(raleigh);
console.log(Object.getPrototypeOf(raleigh));

Maybe you will expect something more but I think that is the fast way to show that properties.

Would this help? I'm throwing an alert, u can check the console as well!

 var bike = {
      wheels: 2,
    };
    var raleigh = Object.create(bike);
    raleigh.color = 'red';
    function getAllProperties( obj ) {
        var properties = [];
    
        do {
            properties= properties.concat(Object.getOwnPropertyNames( obj ));
        } while ( obj = Object.getPrototypeOf( obj ) );
    
        return properties;
    }
    alert(getAllProperties(raleigh));
    console.log(getAllProperties(raleigh));

You could create a new Object especially for your log which has everything as own properties

function flatten_inheritance(e) {
    var o = Object.create(null), i, prop;
    do {
        prop = Object.getOwnPropertyNames(e);
        for (i = 0; i < prop.length; ++i)
            if (!(prop[i] in o))
                o[prop[i]] = e[prop[i]];
    } while (e = Object.getPrototypeOf(e));
    return o;
}

flatten_inheritance(raleigh); // Object {color: "red", wheels: 2, valueOf, toString, etc..}

If you want to stop at Object.prototype or some other prototype you can do this in the while condition for example;

while (e = Object.getPrototypeOf(e) && e !== Object.prototype);

I would remend you only do this when debugging rather than moving all your code away from inheritance though

本文标签： javascriptHow to consolelog all inherited propertiesStack Overflow