We Keep Coding

Does Child Class Inherited their parent class prototype in the following example (JS)

the follwoing code:
class Rectangle {
constructor(w, h) {
this.w = w;
this.h = h;
}
}
Rectangle.prototype.area = function () {
return (this.w * this.h);
};
class Square extends Rectangle {
constructor(w, h) {
super(w, h);
// this.w = w;
// this.h = h;
}
}
Do I have problems with my inheritance?
I'm trying to use:
const rec = new Rectangle(3, 4);
const sqr = new Square(3);
console.log(rec.area());
console.log(sqr.area());
rec prints the correct answer but sqr print's out: NaN
I also tried maybe adding a Square prototype:
Square.prototype.area = function () {
return (this.w * this.w);
};
but the output is:
-1
-1
so this also affected area for rec.area()

Since the Square constructor will be called with only one argument (since its size is equal at all sides), you need to "translate" this to a Rectangle constructor call that needs 2 arguments (width and height). Since both are equal for the square, you need to pass that single argument twice to the Rectangle constructor:
class Rectangle {
constructor(w, h) {
this.w = w;
this.h = h;
}
area() { // Use this notation for prototype methods
return this.w * this.h;
}
};
class Square extends Rectangle {
constructor(w) { // One argument...
super(w, w); // ...Two arguments, but width == height
}
}
let square = new Square(10);
console.log(square.area());

best design practice to separate common code?

I have a card class:
function Card() {
this.image = new Image();
this.x = 0;
this.y = 400;
this.initialX = 0;
this.initialY = 0;
this.scaleFactor = 4;
this.setImage = function(ii){
this.image.src = ii;
};
this.getWidth = function(){
if (this.image == null){
return 0;
}
return this.image.width / this.scaleFactor;
}
this.getHeight = function(){
if (this.image == null){
return 0;
}
return this.image.height / this.scaleFactor;
}
this.pointIsInCard = function(mx, my){
if (mx >= this.x && mx <= (this.x + this.getWidth()) && my >= this.y && my <= (this.y + this.getHeight()))
{
return true;
}
else{
return false;
}
};
};
I then have a deck class:
function Deck(x, y, w, h){
this.x = x;
this.y = y;
this.width = w;
this.height = h;
this.cards = [];
}
I need to add a method in Deck class similar to pointIsInCard instead it will be called pointIsInDeck. The logic will be same i.e to check whether the passed in point falls in the boundary of the object. So seeing this duplication of code I wanted to know what is a good design practice to avoid this duplication? One option I thought of was to extract the method out and create a function for generic object with x, y, width, height but again from OOP principles I thought this method should belong to the class/object. I appreciate any help! Thanks!

A common approach for what you're doing is to attach a Rectangle or similar instance with that functionality to both of your objects, that is:
class Rectangle {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
containsPoint(x, y) {
return x >= this.x && x =< this.width &&
y >= this.y && y =< this.height;
}
}
Then just add it to Card and Deck:
function Card() {
this.rect = new Rectangle(/* Your card shape */);
// ...
}
function Deck() {
this.rect = new Rectangle(/* Your deck shape */);
// ...
}
And you can do:
card.rect.containsPoint();
deck.rect.containsPoint();

If these are classes related to drawing, they would both inherit from something like Rectangle, which they would both inherit this behaviour from.
If they are gameplay-related, I would prefer them each referencing a Rectangle (or its subclass) that they would delegate all UI-related tasks to; then reduce this to the previous paragraph's solution.

You can use Function.prototype.call() to set this at a function call
function Card() {
this.x = 1; this.y = 2;
};
function Deck() {
this.x = 10; this.y = 20;
}
function points(x, y) {
// do stuff
console.log(x, this.x, y, this.y); // `this`: `c` or `d`
}
var c = new Card();
var d = new Deck();
points.call(c, 3, 4); // `this`: `c` within `points` call
points.call(d, 100, 200); // `this`: `d` within `points` call

JS: EcmaScript6 how to pass different number of parameters to extended class

I'm having a little problem with my class. It got to be something very easy, but I just cant find out the solution. Class Cuboid works well, but the class Cube is just not okey, I think I've used the super method in a wrong way.
Just give me a little hint. Thank you in advance.
class Cuboid {
constructor(length, width, height) {
this.length = length;
this.width = width;
this.height = height;
}
get surfaceArea() {
return (this.length * this.width + this.length * this.height + this.height * this.width) * 2;
}
get volume() {
return this.length * this.width * this.height;
}
}
class Cube extends Cuboid {
constructor(length) {
super(length);
this.height = length;
}
}
Guys, why do you downvote my question? It's not really nice...

As I suggesting Cube is Cuboid with all 3 dimension equal. So there is 2 options to do it:
1.
class Cube extends Cuboid {
constructor(length) {
super(length, length, length);
}
}
2.
class Cuboid {
constructor(length, width, height) {
this.length = length || 0;
this.width = width || this.length;
this.height = height || this.width;
}
// ....

Wrong return value when multiplying

The output of console.log() is the value of width when I use the getRatioValue() function to multiply the inserted value of height and the calculated ratio. I cannot find why this is happening.
var soFunction = function(args) {
this.width = args.width || 0;
this.height = args.height || 0;
this.getRatioValue = function(value) {
var ratio = this.width / this.height;
return value * ratio;
};
console.log(this.getRatioValue(this.height)); // returns 1200
}
// Initialize object
var test = new soFunction({width: 1200, height: 980});

It is an simple mathematic operation. If you will write your function on one line you will get.
value is equal to height, so
return this.height * this.width / this.height
this.height's destroy each other and it returns the this.width

Can i invoke this.method within constructor function

Im trying to invoke method inside constructor, is it not possible or have i missed something?
function Rectangle(height, width) {
this.height = height;
this.width = width;
this.calcArea = function() {
console.log(this.height);
return this.height * this.width;
};
this.calcArea(); // trying to do it here, its invoked but no result
}
var newone = new Rectangle(12,24);

You can try something like this:
function Rectangle(height, width) {
var self = this;
self.height = height;
self.width = width;
self.calcArea = (function() {
console.log(this.height);
return self.height * self.width;
})();
}
var newone = new Rectangle(12,24)
console.log(newone.calcArea);

Its working just fine. You are not using the returned value.
function Rectangle(height, width) {
this.height = height;
this.width = width;
this.calcArea = function() {
console.log(this.height);
return this.height * this.width;
};
var area =this.calcArea(); // trying to do it here, its invoked but no result
console.log(area); //288
}
var newone = new Rectangle(12,24);