Mixing
Property inheritance involving objects and prototypes
1
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 LoganJax Logan
86
add a comment |
1
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 LoganJax Logan
86
add a comment |
1
1
1
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 LoganJax Logan
86
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
javascript object properties prototype
asked Nov 21 '18 at 8:05
Jax LoganJax Logan
86
asked Nov 21 '18 at 8:05
Jax LoganJax Logan
86
asked Nov 21 '18 at 8:05
Jax LoganJax Logan
86
asked Nov 21 '18 at 8:05
Jax LoganJax Logan
86
asked Nov 21 '18 at 8:05
Jax LoganJax Logan
86
86
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
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 MeyerMark 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 doingConstructor.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 tothisinside 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 needthisto do so, referring to whatever instance is created when calling the function. So you could doperson.newProp = "magic"because it's an already created object, but for doing something similar with thePersonconstructor you would have to necessarily addnewPropertyto 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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 MeyerMark 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 doingConstructor.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 tothisinside 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 needthisto do so, referring to whatever instance is created when calling the function. So you could doperson.newProp = "magic"because it's an already created object, but for doing something similar with thePersonconstructor you would have to necessarily addnewPropertyto its prototype.
– Jax Logan
Nov 21 '18 at 21:06
add a comment |
1
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 MeyerMark 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 doingConstructor.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 tothisinside 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 needthisto do so, referring to whatever instance is created when calling the function. So you could doperson.newProp = "magic"because it's an already created object, but for doing something similar with thePersonconstructor you would have to necessarily addnewPropertyto its prototype.
– Jax Logan
Nov 21 '18 at 21:06
add a comment |
1
1
1
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 MeyerMark Meyer
38.4k33159
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.
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 MeyerMark Meyer
38.4k33159
answered Nov 21 '18 at 8:19
Mark MeyerMark Meyer
38.4k33159
answered Nov 21 '18 at 8:19
Mark MeyerMark Meyer
38.4k33159
answered Nov 21 '18 at 8:19
Mark MeyerMark Meyer
38.4k33159
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 doingConstructor.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 tothisinside 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 needthisto do so, referring to whatever instance is created when calling the function. So you could doperson.newProp = "magic"because it's an already created object, but for doing something similar with thePersonconstructor you would have to necessarily addnewPropertyto 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 doingConstructor.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 tothisinside 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 needthisto do so, referring to whatever instance is created when calling the function. So you could doperson.newProp = "magic"because it's an already created object, but for doing something similar with thePersonconstructor you would have to necessarily addnewPropertyto 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
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
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
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
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
