Inheritance and the prototype chain in ES6 classes
3
I have the following classes
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
area() {
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
and thei I create an instance of the class Square
var square = new Square(2);
My expectations were to find in the square object (directly in it and not in its prototype) the area and sideLength methods. Differently I find them in the __proto__ object.
I don't understand why it happens.
Could you "translate" this same code using a constructor rather than a class? Maybe I will more easily get the point in this way...
javascript ecmascript-6 es6-class
asked Nov 26 '18 at 10:15
marcomarco
329212
add a comment |
3
I have the following classes
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
area() {
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
and thei I create an instance of the class Square
var square = new Square(2);
My expectations were to find in the square object (directly in it and not in its prototype) the area and sideLength methods. Differently I find them in the __proto__ object.
I don't understand why it happens.
Could you "translate" this same code using a constructor rather than a class? Maybe I will more easily get the point in this way...
javascript ecmascript-6 es6-class
asked Nov 26 '18 at 10:15
marcomarco
329212
1
That's one of the points of having classes - to have objects share a common single internal prototype object (here,Square.prototype, which is the same assquare.__proto__orObject.getPrototypeOf(square)) - rather than every new object having its own methods
– CertainPerformance
Nov 26 '18 at 10:17
2
ES6 still uses prototype chaining, classes are just syntactically sugar. Edit: please read stackoverflow.com/questions/36419713/… for more information.
– GuyT
Nov 26 '18 at 10:37
add a comment |
3
3
3
I have the following classes
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
area() {
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
and thei I create an instance of the class Square
var square = new Square(2);
My expectations were to find in the square object (directly in it and not in its prototype) the area and sideLength methods. Differently I find them in the __proto__ object.
I don't understand why it happens.
Could you "translate" this same code using a constructor rather than a class? Maybe I will more easily get the point in this way...
javascript ecmascript-6 es6-class
asked Nov 26 '18 at 10:15
marcomarco
329212
I have the following classes
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
area() {
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
and thei I create an instance of the class Square
var square = new Square(2);
My expectations were to find in the square object (directly in it and not in its prototype) the area and sideLength methods. Differently I find them in the __proto__ object.
I don't understand why it happens.
Could you "translate" this same code using a constructor rather than a class? Maybe I will more easily get the point in this way...
javascript ecmascript-6 es6-class
javascript ecmascript-6 es6-class
asked Nov 26 '18 at 10:15
marcomarco
329212
asked Nov 26 '18 at 10:15
marcomarco
329212
asked Nov 26 '18 at 10:15
marcomarco
329212
asked Nov 26 '18 at 10:15
marcomarco
329212
asked Nov 26 '18 at 10:15
marcomarco
329212
329212
1
That's one of the points of having classes - to have objects share a common single internal prototype object (here,Square.prototype, which is the same assquare.__proto__orObject.getPrototypeOf(square)) - rather than every new object having its own methods
– CertainPerformance
Nov 26 '18 at 10:17
2
ES6 still uses prototype chaining, classes are just syntactically sugar. Edit: please read stackoverflow.com/questions/36419713/… for more information.
– GuyT
Nov 26 '18 at 10:37
add a comment |
1
That's one of the points of having classes - to have objects share a common single internal prototype object (here,Square.prototype, which is the same assquare.__proto__orObject.getPrototypeOf(square)) - rather than every new object having its own methods
– CertainPerformance
Nov 26 '18 at 10:17
2
ES6 still uses prototype chaining, classes are just syntactically sugar. Edit: please read stackoverflow.com/questions/36419713/… for more information.
– GuyT
Nov 26 '18 at 10:37
1
1
That's one of the points of having classes - to have objects share a common single internal prototype object (here,
Square.prototype, which is the same as square.__proto__ or Object.getPrototypeOf(square)) - rather than every new object having its own methods– CertainPerformance
Nov 26 '18 at 10:17
That's one of the points of having classes - to have objects share a common single internal prototype object (here,
Square.prototype, which is the same as square.__proto__ or Object.getPrototypeOf(square)) - rather than every new object having its own methods– CertainPerformance
Nov 26 '18 at 10:17
2
2
ES6 still uses prototype chaining, classes are just syntactically sugar. Edit: please read stackoverflow.com/questions/36419713/… for more information.
– GuyT
Nov 26 '18 at 10:37
ES6 still uses prototype chaining, classes are just syntactically sugar. Edit: please read stackoverflow.com/questions/36419713/… for more information.
– GuyT
Nov 26 '18 at 10:37
add a comment |
1 Answer
1
active
oldest
votes
3
The method defined in the class are transformed as protoType method in order for all instances of the class to share the same method. A functional component version of your case would be
function Polygon(height, width) {
this.height = height;
this.width = width;
}
function Square(sideLength){
Polygon.call(this, sideLength);
}
Square.prototype.area = function() {
return this.height * this.width;
}
Square.prototype.sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
However if you define the function in the class constructor or using arrow functions they would belong to the class instance like
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
this.getArea = function() {
return this.height * this.width;
}
this.sideLengthWithBind = this.sideLength.bind(this);
}
area =() =>{
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
const square = new Square(5);
console.log(square);answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
1
So, am I wrong if I said that every function defined inside a class becomes part of the prototype object of the instances created with that class?
– marco
Nov 26 '18 at 10:39
1
Yes, unless the function is defined inside the class constructor likethis.getArea = function() { return this.height * this.width; }or using arrow function likearea = () => {}
– Shubham Khatri
Nov 26 '18 at 10:43
1
oh, this is a very important clarification. Thank you!
– marco
Nov 26 '18 at 10:48
1
Glad to have helped
– Shubham Khatri
Nov 26 '18 at 10:51
@ShubhamKhatri: Class properties are not restricted to arrow functions.area = function() {}orarea = 42;would also createareaon the object itself.
– Felix Kling
Nov 26 '18 at 18:32
|
show 2 more comments
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%2f53478928%2finheritance-and-the-prototype-chain-in-es6-classes%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
3
The method defined in the class are transformed as protoType method in order for all instances of the class to share the same method. A functional component version of your case would be
function Polygon(height, width) {
this.height = height;
this.width = width;
}
function Square(sideLength){
Polygon.call(this, sideLength);
}
Square.prototype.area = function() {
return this.height * this.width;
}
Square.prototype.sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
However if you define the function in the class constructor or using arrow functions they would belong to the class instance like
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
this.getArea = function() {
return this.height * this.width;
}
this.sideLengthWithBind = this.sideLength.bind(this);
}
area =() =>{
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
const square = new Square(5);
console.log(square);answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
1
So, am I wrong if I said that every function defined inside a class becomes part of the prototype object of the instances created with that class?
– marco
Nov 26 '18 at 10:39
1
Yes, unless the function is defined inside the class constructor likethis.getArea = function() { return this.height * this.width; }or using arrow function likearea = () => {}
– Shubham Khatri
Nov 26 '18 at 10:43
1
oh, this is a very important clarification. Thank you!
– marco
Nov 26 '18 at 10:48
1
Glad to have helped
– Shubham Khatri
Nov 26 '18 at 10:51
@ShubhamKhatri: Class properties are not restricted to arrow functions.area = function() {}orarea = 42;would also createareaon the object itself.
– Felix Kling
Nov 26 '18 at 18:32
|
show 2 more comments
3
The method defined in the class are transformed as protoType method in order for all instances of the class to share the same method. A functional component version of your case would be
function Polygon(height, width) {
this.height = height;
this.width = width;
}
function Square(sideLength){
Polygon.call(this, sideLength);
}
Square.prototype.area = function() {
return this.height * this.width;
}
Square.prototype.sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
However if you define the function in the class constructor or using arrow functions they would belong to the class instance like
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
this.getArea = function() {
return this.height * this.width;
}
this.sideLengthWithBind = this.sideLength.bind(this);
}
area =() =>{
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
const square = new Square(5);
console.log(square);answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
1
So, am I wrong if I said that every function defined inside a class becomes part of the prototype object of the instances created with that class?
– marco
Nov 26 '18 at 10:39
1
Yes, unless the function is defined inside the class constructor likethis.getArea = function() { return this.height * this.width; }or using arrow function likearea = () => {}
– Shubham Khatri
Nov 26 '18 at 10:43
1
oh, this is a very important clarification. Thank you!
– marco
Nov 26 '18 at 10:48
1
Glad to have helped
– Shubham Khatri
Nov 26 '18 at 10:51
@ShubhamKhatri: Class properties are not restricted to arrow functions.area = function() {}orarea = 42;would also createareaon the object itself.
– Felix Kling
Nov 26 '18 at 18:32
|
show 2 more comments
3
3
3
The method defined in the class are transformed as protoType method in order for all instances of the class to share the same method. A functional component version of your case would be
function Polygon(height, width) {
this.height = height;
this.width = width;
}
function Square(sideLength){
Polygon.call(this, sideLength);
}
Square.prototype.area = function() {
return this.height * this.width;
}
Square.prototype.sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
However if you define the function in the class constructor or using arrow functions they would belong to the class instance like
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
this.getArea = function() {
return this.height * this.width;
}
this.sideLengthWithBind = this.sideLength.bind(this);
}
area =() =>{
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
const square = new Square(5);
console.log(square);answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
The method defined in the class are transformed as protoType method in order for all instances of the class to share the same method. A functional component version of your case would be
function Polygon(height, width) {
this.height = height;
this.width = width;
}
function Square(sideLength){
Polygon.call(this, sideLength);
}
Square.prototype.area = function() {
return this.height * this.width;
}
Square.prototype.sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
However if you define the function in the class constructor or using arrow functions they would belong to the class instance like
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
this.getArea = function() {
return this.height * this.width;
}
this.sideLengthWithBind = this.sideLength.bind(this);
}
area =() =>{
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
const square = new Square(5);
console.log(square);class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
this.getArea = function() {
return this.height * this.width;
}
this.sideLengthWithBind = this.sideLength.bind(this);
}
area =() =>{
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
const square = new Square(5);
console.log(square);class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
this.getArea = function() {
return this.height * this.width;
}
this.sideLengthWithBind = this.sideLength.bind(this);
}
area =() =>{
return this.height * this.width;
}
sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
const square = new Square(5);
console.log(square);answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
edited Nov 26 '18 at 11:02
answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
answered Nov 26 '18 at 10:25
Shubham KhatriShubham Khatri
94.4k15119160
94.4k15119160
1
So, am I wrong if I said that every function defined inside a class becomes part of the prototype object of the instances created with that class?
– marco
Nov 26 '18 at 10:39
1
Yes, unless the function is defined inside the class constructor likethis.getArea = function() { return this.height * this.width; }or using arrow function likearea = () => {}
– Shubham Khatri
Nov 26 '18 at 10:43
1
oh, this is a very important clarification. Thank you!
– marco
Nov 26 '18 at 10:48
1
Glad to have helped
– Shubham Khatri
Nov 26 '18 at 10:51
@ShubhamKhatri: Class properties are not restricted to arrow functions.area = function() {}orarea = 42;would also createareaon the object itself.
– Felix Kling
Nov 26 '18 at 18:32
|
show 2 more comments
1
So, am I wrong if I said that every function defined inside a class becomes part of the prototype object of the instances created with that class?
– marco
Nov 26 '18 at 10:39
1
Yes, unless the function is defined inside the class constructor likethis.getArea = function() { return this.height * this.width; }or using arrow function likearea = () => {}
– Shubham Khatri
Nov 26 '18 at 10:43
1
oh, this is a very important clarification. Thank you!
– marco
Nov 26 '18 at 10:48
1
Glad to have helped
– Shubham Khatri
Nov 26 '18 at 10:51
@ShubhamKhatri: Class properties are not restricted to arrow functions.area = function() {}orarea = 42;would also createareaon the object itself.
– Felix Kling
Nov 26 '18 at 18:32
1
1
So, am I wrong if I said that every function defined inside a class becomes part of the prototype object of the instances created with that class?
– marco
Nov 26 '18 at 10:39
So, am I wrong if I said that every function defined inside a class becomes part of the prototype object of the instances created with that class?
– marco
Nov 26 '18 at 10:39
1
1
Yes, unless the function is defined inside the class constructor like
this.getArea = function() { return this.height * this.width; } or using arrow function like area = () => {}– Shubham Khatri
Nov 26 '18 at 10:43
Yes, unless the function is defined inside the class constructor like
this.getArea = function() { return this.height * this.width; } or using arrow function like area = () => {}– Shubham Khatri
Nov 26 '18 at 10:43
1
1
oh, this is a very important clarification. Thank you!
– marco
Nov 26 '18 at 10:48
oh, this is a very important clarification. Thank you!
– marco
Nov 26 '18 at 10:48
1
1
Glad to have helped
– Shubham Khatri
Nov 26 '18 at 10:51
Glad to have helped
– Shubham Khatri
Nov 26 '18 at 10:51
@ShubhamKhatri: Class properties are not restricted to arrow functions.
area = function() {} or area = 42; would also create area on the object itself.– Felix Kling
Nov 26 '18 at 18:32
@ShubhamKhatri: Class properties are not restricted to arrow functions.
area = function() {} or area = 42; would also create area on the object itself.– Felix Kling
Nov 26 '18 at 18:32
|
show 2 more comments
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%2f53478928%2finheritance-and-the-prototype-chain-in-es6-classes%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
1
That's one of the points of having classes - to have objects share a common single internal prototype object (here,
Square.prototype, which is the same assquare.__proto__orObject.getPrototypeOf(square)) - rather than every new object having its own methods– CertainPerformance
Nov 26 '18 at 10:17
2
ES6 still uses prototype chaining, classes are just syntactically sugar. Edit: please read stackoverflow.com/questions/36419713/… for more information.
– GuyT
Nov 26 '18 at 10:37