Property inheritance involving objects and prototypes

I'm a newbie at JS and in one of my tests I've been trying to figure out how the following code works in terms of property inheritance.

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype

let anInstance = new doSomething();

anInstance.prop = "value"; //Add "prop" property to object "anInstance"

doSomething.prop = "another value"; //Add "prop" property to "doSomething"

let anotherInstance = new doSomething();



console.log(doSomething.prop);

console.log(anInstance);

console.log(anotherInstance.prop);

This is the above script's output in the console:

another value



doSomething{prop: "value"}

  prop: "value"

  __proto__:

    foo: "bar"

    constructor: ƒ doSomething()

    __proto__: Object



undefined

As you can see, printing doSomething's prop property after being added to it returns expected another value, but accessing anotherInstance's prop returns undefined.

Isn't that anotherInstance supposed to "inherit" such prop property since it's defined within the function from which it was created?

Thanks in advance.

asked Nov 21 '18 at 8:05

Jax Logan

add a comment |

I'm a newbie at JS and in one of my tests I've been trying to figure out how the following code works in terms of property inheritance.

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype

let anInstance = new doSomething();

anInstance.prop = "value"; //Add "prop" property to object "anInstance"

doSomething.prop = "another value"; //Add "prop" property to "doSomething"

let anotherInstance = new doSomething();



console.log(doSomething.prop);

console.log(anInstance);

console.log(anotherInstance.prop);

This is the above script's output in the console:

another value



doSomething{prop: "value"}

  prop: "value"

  __proto__:

    foo: "bar"

    constructor: ƒ doSomething()

    __proto__: Object



undefined

As you can see, printing doSomething's prop property after being added to it returns expected another value, but accessing anotherInstance's prop returns undefined.

Isn't that anotherInstance supposed to "inherit" such prop property since it's defined within the function from which it was created?

Thanks in advance.

asked Nov 21 '18 at 8:05

Jax Logan

add a comment |

I'm a newbie at JS and in one of my tests I've been trying to figure out how the following code works in terms of property inheritance.

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype

let anInstance = new doSomething();

anInstance.prop = "value"; //Add "prop" property to object "anInstance"

doSomething.prop = "another value"; //Add "prop" property to "doSomething"

let anotherInstance = new doSomething();



console.log(doSomething.prop);

console.log(anInstance);

console.log(anotherInstance.prop);

This is the above script's output in the console:

another value



doSomething{prop: "value"}

  prop: "value"

  __proto__:

    foo: "bar"

    constructor: ƒ doSomething()

    __proto__: Object



undefined

As you can see, printing doSomething's prop property after being added to it returns expected another value, but accessing anotherInstance's prop returns undefined.

Isn't that anotherInstance supposed to "inherit" such prop property since it's defined within the function from which it was created?

Thanks in advance.

asked Nov 21 '18 at 8:05

Jax Logan

I'm a newbie at JS and in one of my tests I've been trying to figure out how the following code works in terms of property inheritance.

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype

let anInstance = new doSomething();

anInstance.prop = "value"; //Add "prop" property to object "anInstance"

doSomething.prop = "another value"; //Add "prop" property to "doSomething"

let anotherInstance = new doSomething();



console.log(doSomething.prop);

console.log(anInstance);

console.log(anotherInstance.prop);

This is the above script's output in the console:

another value



doSomething{prop: "value"}

  prop: "value"

  __proto__:

    foo: "bar"

    constructor: ƒ doSomething()

    __proto__: Object



undefined

As you can see, printing doSomething's prop property after being added to it returns expected another value, but accessing anotherInstance's prop returns undefined.

Isn't that anotherInstance supposed to "inherit" such prop property since it's defined within the function from which it was created?

Thanks in advance.

javascript object properties prototype

asked Nov 21 '18 at 8:05

Jax Logan

asked Nov 21 '18 at 8:05

Jax Logan

asked Nov 21 '18 at 8:05

Jax Logan

asked Nov 21 '18 at 8:05

Jax Logan

asked Nov 21 '18 at 8:05

Jax Logan

add a comment |

1 Answer
1

active

oldest

votes

Adding a property to a function is not the same as adding a property to the function's prototype object. Instances of the function inherit the function's prototype properties, not the function's own properties:

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype



doSomething.prop = "another value"; //Add "prop" property to "doSomething" but no the prototype



let anotherInstance = new doSomething();



// only has foo:

console.log(doSomething.prototype)



// this is the object it will inherit from

// only has foo

console.log(Object.getPrototypeOf(anotherInstance))



//they are the same object:

console.log(doSomething.prototype === Object.getPrototypeOf(anotherInstance))

In the code above doSomething.prop is just a property of the function, it plays no role in prototype inheritance.

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

Thanks, it's now clearer for me. Yet I still don't get a grasp on why you cannot add a new property directly to a constructor function, as explained here in section "Adding a Property to a Constructor"; the explanation given is "This way object properties can have default values.". You stated that only prototypes play a role in inheritance. But why? Wouldn't it be more easy and straightforward to add a property with a default value to a constructor simply by doing Constructor.prop = "value"?

– Jax Logan
Nov 21 '18 at 9:45

Yes @JaxLogan - prototype inheritance in javascript has always been unusual and frustrating if you’re coming from a traditional oop language. Many will tell you that ‘inheritance’ isn’t actuall the right name for what JS does. The article you linked is adding props to this inside the constructor, not directly to the constructor function.

– Mark Meyer
Nov 21 '18 at 16:54

Yep, that sounds right @JaxLogan.

– Mark Meyer
Nov 21 '18 at 21:01

Ah, I see. Then I guess you cannot add a new property to a constructor because you would need this to do so, referring to whatever instance is created when calling the function. So you could do person.newProp = "magic" because it's an already created object, but for doing something similar with the Person constructor you would have to necessarily add newProperty to its prototype.

– Jax Logan
Nov 21 '18 at 21:06

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407615%2fproperty-inheritance-involving-objects-and-prototypes%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype



doSomething.prop = "another value"; //Add "prop" property to "doSomething" but no the prototype



let anotherInstance = new doSomething();



// only has foo:

console.log(doSomething.prototype)



// this is the object it will inherit from

// only has foo

console.log(Object.getPrototypeOf(anotherInstance))



//they are the same object:

console.log(doSomething.prototype === Object.getPrototypeOf(anotherInstance))

In the code above doSomething.prop is just a property of the function, it plays no role in prototype inheritance.

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

Thanks, it's now clearer for me. Yet I still don't get a grasp on why you cannot add a new property directly to a constructor function, as explained here in section "Adding a Property to a Constructor"; the explanation given is "This way object properties can have default values.". You stated that only prototypes play a role in inheritance. But why? Wouldn't it be more easy and straightforward to add a property with a default value to a constructor simply by doing Constructor.prop = "value"?

– Jax Logan
Nov 21 '18 at 9:45

Yes @JaxLogan - prototype inheritance in javascript has always been unusual and frustrating if you’re coming from a traditional oop language. Many will tell you that ‘inheritance’ isn’t actuall the right name for what JS does. The article you linked is adding props to this inside the constructor, not directly to the constructor function.

– Mark Meyer
Nov 21 '18 at 16:54

Yep, that sounds right @JaxLogan.

– Mark Meyer
Nov 21 '18 at 21:01

Ah, I see. Then I guess you cannot add a new property to a constructor because you would need this to do so, referring to whatever instance is created when calling the function. So you could do person.newProp = "magic" because it's an already created object, but for doing something similar with the Person constructor you would have to necessarily add newProperty to its prototype.

– Jax Logan
Nov 21 '18 at 21:06

add a comment |

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype



doSomething.prop = "another value"; //Add "prop" property to "doSomething" but no the prototype



let anotherInstance = new doSomething();



// only has foo:

console.log(doSomething.prototype)



// this is the object it will inherit from

// only has foo

console.log(Object.getPrototypeOf(anotherInstance))



//they are the same object:

console.log(doSomething.prototype === Object.getPrototypeOf(anotherInstance))

In the code above doSomething.prop is just a property of the function, it plays no role in prototype inheritance.

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

Thanks, it's now clearer for me. Yet I still don't get a grasp on why you cannot add a new property directly to a constructor function, as explained here in section "Adding a Property to a Constructor"; the explanation given is "This way object properties can have default values.". You stated that only prototypes play a role in inheritance. But why? Wouldn't it be more easy and straightforward to add a property with a default value to a constructor simply by doing Constructor.prop = "value"?

– Jax Logan
Nov 21 '18 at 9:45

Yes @JaxLogan - prototype inheritance in javascript has always been unusual and frustrating if you’re coming from a traditional oop language. Many will tell you that ‘inheritance’ isn’t actuall the right name for what JS does. The article you linked is adding props to this inside the constructor, not directly to the constructor function.

– Mark Meyer
Nov 21 '18 at 16:54

Yep, that sounds right @JaxLogan.

– Mark Meyer
Nov 21 '18 at 21:01

Ah, I see. Then I guess you cannot add a new property to a constructor because you would need this to do so, referring to whatever instance is created when calling the function. So you could do person.newProp = "magic" because it's an already created object, but for doing something similar with the Person constructor you would have to necessarily add newProperty to its prototype.

– Jax Logan
Nov 21 '18 at 21:06

add a comment |

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype



doSomething.prop = "another value"; //Add "prop" property to "doSomething" but no the prototype



let anotherInstance = new doSomething();



// only has foo:

console.log(doSomething.prototype)



// this is the object it will inherit from

// only has foo

console.log(Object.getPrototypeOf(anotherInstance))



//they are the same object:

console.log(doSomething.prototype === Object.getPrototypeOf(anotherInstance))

In the code above doSomething.prop is just a property of the function, it plays no role in prototype inheritance.

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype



doSomething.prop = "another value"; //Add "prop" property to "doSomething" but no the prototype



let anotherInstance = new doSomething();



// only has foo:

console.log(doSomething.prototype)



// this is the object it will inherit from

// only has foo

console.log(Object.getPrototypeOf(anotherInstance))



//they are the same object:

console.log(doSomething.prototype === Object.getPrototypeOf(anotherInstance))

In the code above doSomething.prop is just a property of the function, it plays no role in prototype inheritance.

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype



doSomething.prop = "another value"; //Add "prop" property to "doSomething" but no the prototype



let anotherInstance = new doSomething();



// only has foo:

console.log(doSomething.prototype)



// this is the object it will inherit from

// only has foo

console.log(Object.getPrototypeOf(anotherInstance))



//they are the same object:

console.log(doSomething.prototype === Object.getPrototypeOf(anotherInstance))

function doSomething(){}



doSomething.prototype.foo = "bar"; //Add "foo" property to doSomething's prototype



doSomething.prop = "another value"; //Add "prop" property to "doSomething" but no the prototype



let anotherInstance = new doSomething();



// only has foo:

console.log(doSomething.prototype)



// this is the object it will inherit from

// only has foo

console.log(Object.getPrototypeOf(anotherInstance))



//they are the same object:

console.log(doSomething.prototype === Object.getPrototypeOf(anotherInstance))

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

answered Nov 21 '18 at 8:19

Mark Meyer

38.4k33159

Thanks, it's now clearer for me. Yet I still don't get a grasp on why you cannot add a new property directly to a constructor function, as explained here in section "Adding a Property to a Constructor"; the explanation given is "This way object properties can have default values.". You stated that only prototypes play a role in inheritance. But why? Wouldn't it be more easy and straightforward to add a property with a default value to a constructor simply by doing Constructor.prop = "value"?

– Jax Logan
Nov 21 '18 at 9:45

Yes @JaxLogan - prototype inheritance in javascript has always been unusual and frustrating if you’re coming from a traditional oop language. Many will tell you that ‘inheritance’ isn’t actuall the right name for what JS does. The article you linked is adding props to this inside the constructor, not directly to the constructor function.

– Mark Meyer
Nov 21 '18 at 16:54

Yep, that sounds right @JaxLogan.

– Mark Meyer
Nov 21 '18 at 21:01

Ah, I see. Then I guess you cannot add a new property to a constructor because you would need this to do so, referring to whatever instance is created when calling the function. So you could do person.newProp = "magic" because it's an already created object, but for doing something similar with the Person constructor you would have to necessarily add newProperty to its prototype.

– Jax Logan
Nov 21 '18 at 21:06

add a comment |

Thanks, it's now clearer for me. Yet I still don't get a grasp on why you cannot add a new property directly to a constructor function, as explained here in section "Adding a Property to a Constructor"; the explanation given is "This way object properties can have default values.". You stated that only prototypes play a role in inheritance. But why? Wouldn't it be more easy and straightforward to add a property with a default value to a constructor simply by doing Constructor.prop = "value"?

– Jax Logan
Nov 21 '18 at 9:45

Yes @JaxLogan - prototype inheritance in javascript has always been unusual and frustrating if you’re coming from a traditional oop language. Many will tell you that ‘inheritance’ isn’t actuall the right name for what JS does. The article you linked is adding props to this inside the constructor, not directly to the constructor function.

– Mark Meyer
Nov 21 '18 at 16:54

Yep, that sounds right @JaxLogan.

– Mark Meyer
Nov 21 '18 at 21:01

Ah, I see. Then I guess you cannot add a new property to a constructor because you would need this to do so, referring to whatever instance is created when calling the function. So you could do person.newProp = "magic" because it's an already created object, but for doing something similar with the Person constructor you would have to necessarily add newProperty to its prototype.

– Jax Logan
Nov 21 '18 at 21:06

Thanks, it's now clearer for me. Yet I still don't get a grasp on why you cannot add a new property directly to a constructor function, as explained here in section "Adding a Property to a Constructor"; the explanation given is "This way object properties can have default values.". You stated that only prototypes play a role in inheritance. But why? Wouldn't it be more easy and straightforward to add a property with a default value to a constructor simply by doing Constructor.prop = "value"?

– Jax Logan
Nov 21 '18 at 9:45

Yes @JaxLogan - prototype inheritance in javascript has always been unusual and frustrating if you’re coming from a traditional oop language. Many will tell you that ‘inheritance’ isn’t actuall the right name for what JS does. The article you linked is adding props to this inside the constructor, not directly to the constructor function.

– Mark Meyer
Nov 21 '18 at 16:54

Yep, that sounds right @JaxLogan.

– Mark Meyer
Nov 21 '18 at 21:01

Ah, I see. Then I guess you cannot add a new property to a constructor because you would need this to do so, referring to whatever instance is created when calling the function. So you could do person.newProp = "magic" because it's an already created object, but for doing something similar with the Person constructor you would have to necessarily add newProperty to its prototype.

– Jax Logan
Nov 21 '18 at 21:06

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu