I just noticed that when I log an instance of the object I'm currently working on I see the prototype functions after it's property ( it only has one ). Which makes me think I'm doing something wrong.

This is how I'm setting the prototype.

MF = function(x){
    if(!(this instanceof MF)) return new MF(x);
    this.node = x;
}
MF.prototype = {
    show: function(display){
        display ? this.node.style.display = display : this.node.style.display = 'block';
    },
    hide: function(){
        this.node.style.display = 'none';
    }
}

console.log(MF(window));

I also tried setting it with Object.create(), as suggested in this answer, which doesn't make much sense in my case but desperate times call for desperate attempts.

Why am I seeing the prototype methods in the instance, and how can I fix this?

EDIT:

For example here's how a jQuery object looks like, no prototype functions shown in the log

I just noticed that when I log an instance of the object I'm currently working on I see the prototype functions after it's property ( it only has one ). Which makes me think I'm doing something wrong.

This is how I'm setting the prototype.

MF = function(x){
    if(!(this instanceof MF)) return new MF(x);
    this.node = x;
}
MF.prototype = {
    show: function(display){
        display ? this.node.style.display = display : this.node.style.display = 'block';
    },
    hide: function(){
        this.node.style.display = 'none';
    }
}

console.log(MF(window));

I also tried setting it with Object.create(), as suggested in this answer, which doesn't make much sense in my case but desperate times call for desperate attempts.

Why am I seeing the prototype methods in the instance, and how can I fix this?

EDIT:

For example here's how a jQuery object looks like, no prototype functions shown in the log

• javascript

• It's working for me. MF node: Window proto: Object hide: function (){ show: function (display){ proto: Object – Hoijof Commented Aug 1, 2014 at 7:17
• Well I didn't say it wasn't working :/ – php_nub_qq Commented Aug 1, 2014 at 7:17
• It shows the functions under the prototype. – Hoijof Commented Aug 1, 2014 at 7:18
• But why are they showing up after the property, I notice other native javascript objects don't behave this way, as well as jQuery objects, reference question edit – php_nub_qq Commented Aug 1, 2014 at 7:21
• 2 jQuery is array-like i.e. *.prototype = [] but that's not what you want. Does it really matter how the debugger represents the object? You can determine the properties belonging to the object itself with Object.getOwnPropertyNames - is that not sufficient? – Emissary Commented Aug 1, 2014 at 7:33

2 Answers 2

There doesn't appear anything wrong with your code. I'm sure the prototype properties are only listed as a convenience when there are only a few instance properties. Expanding the logged object reveals that all properties are where they are supposed to be.

Showing the prototype object it's a normal practice. And with jQuery this is also reproduced. Just call console.dir($('div')) and you will see __proto__ object below. You can't hide prototype functions from console showing.

That's how I implement classes with prototype extending in my library:

Pinch.$ = function(selector, parent) {
    if (!(this instanceof arguments.callee)) {
        var callee = arguments.callee,
            newObject = Object.create(callee.prototype);
        callee.apply(newObject, callee.arguments);
        return newObject;
    }

    // --- logic ---

    return this;
}
Pinch.prototype = Object.create({
    is: function() {},
    // --- methods ---
    empty: function() {}
});

And then if you want extend your prototype with new methods:

Pinch.$.prototype = Pinch.Util.extend(Pinch.$.prototype, {
    newMethods: function() {}
}, {
    oneMoreMethod: function() {}
});

extend() realization you can find in many libraries and just googling "extend javascript"

The second way it's using Object.create as extend:

Pinch.$.prototype = Object.create(Pinch.$.prototype, {
    newMethods: function() {}
});

But really, you can't hide prototype object from console. Only if you will start using hacks and tricks based on local scope and more.

UPD: You can use Object.defineProperties() for hiding elements - https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

For example:

var MF = function () {};

MF.prototype = Object.create({});

Object.defineProperties(MF.prototype, {
    thisWillShow: {
        value: function () {},
        enumerable: true
    },
    thisWillNotShow: {
        value: function () {},
        enumerable: false
    }
});
console.log(new MF());

And working example here - http://jsfiddle/uRVFW/