How to Create an inheritance in javascript using functions and classes - javascript

I want to create an inheritance where I have class defined and creating inheritance using function
class ClassA{
constructor(){
this.name = "Kanike"
}
}
function ClassB(jkk){
new ClassA()
this.last = jkk
}
ClassB.prototype = ClassA.prototype
var myClassB = new ClassB("kel");
alert(myClassB.name)//cant be accessed here

This is what the extends keyword is for. Extend the class and you can access both the name and last fields:
class ClassA {
constructor() {
this.name = "Kanike";
}
}
class ClassB extends ClassA {
constructor(last) {
super();
this.last = last;
}
}
let classB = new ClassB("Kel");
console.log(classB.name, classB.last);

Related

Multiple classes that have a different name but extends the same class

I have for example this class:
abstract class MyClass {
abstract myProp: number;
constructor() {
// Some code
}
}
So I want to create multiple classes that extends this class. But I don't want to repeat it multiple times as I will have a lot of classes. So the purpose is that each class has a different name and myProp.
For example:
class FirstClass extends MyClass {
myProp = 1;
constructor() {
super();
// Some code
}
}
class SecondClass extends MyClass {
myProp = 2;
constructor() {
super();
// Some code
}
}
So I want to generate these classes (with for example a function) but the problem is that I will have to use the new keyword.
So the usage for each of these classes should be like this:
const myConst = new FirstClass();
const myConst2 = new SecondClass();
I hope this makes some sense. I just don't want to repeat every class because it has a different name and myProp.
You can create classes through a function that returns an anonymous class.
const createClass = ( prop: number ) => {
return class extends MyClass {
myProp: number;
constructor () {
super();
this.myProp = prop;
}
}
}
const FirstClass = createClass(1);
const x = new FirstClass();
console.log(x.myProp);
Or check out the answers to these questions for ideas:
ES6 Dynamic class names
Create object from class name in JavasScript ECMAScript 6
If I understand your problem correctly, you could just pass the variable that's different as an argument in the constructor.
class MyClass {
myProp: number;
constructor(myProp: number) {
this.myProp = myProp
// Some code
}
}
And then create the class instances you want.
const myConst = new MyClass(1);
const myConst2 = new MyClass(2);
Personally, I would only extend a class if I want to add some methods or properties that aren't shared. Since myProp exists in both classes, it's probably better to just pass the value to the constructor.

Why I can't access a property of parent class from child class instance in JS inheritance?

I have two classes. I want to access type property of Parent from instance:
// Parent class
function Animal() { this.type = 'animal' }
// Child class
function Rabbit(name) { this.name = name }
// I inherit from Animal
Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit; // I want to keep Rabbit constructor too
// I instantiate my Rabbit and am trying to access rabbit.type
const rabbit = new Rabbit('Bunny');
rabbit.name // => Bunny
rabbit.type // => undefined. WHY?
I know how to solve it and access type, but...
// all is the same
// Child class
function Rabbit(name) {
Animal.apply(this, arguments); // Just need to add this line in Rabbit class
this.name = name
}
// all is the same
rabbit.name // => Bunny
rabbit.type // => animal
...but why it doesn't work in the first example? Is it possible to achieve it without using Animal.apply?
Yes, if you would add type to the prototype:
Animal.prototype.type = "animal";
Or you could hide the Animal.apply call behind the class sugar:
class Animal {
constructor() {
this.type = "animal";
}
}
class Rabbit {
constructor(name) {
super(); // <<<
this.name = name;
}
}
Rabbit.prototype = Object.create(Animal.prototype); only extends the properties defined in the prototype chain. The properties defined within the constructor won't get extended.
Try this,
...
Rabbit.prototype = new Animal();
...
Updated Example:
// Parent class
function Animal() { this.type = 'animal' }
// Child class
function Rabbit(name) { this.name = name }
Rabbit.prototype = new Animal();
Rabbit.prototype.constructor = Rabbit;
const rabbit = new Rabbit('Bunny');
console.log(rabbit.name);
console.log(rabbit.type);

Create object of class within a class but not using the name

I am sorry if the heading is misleading, I can't think of a better heading.
so I have two classes like this :
class ClassA{
getObject(){
return new this(with some parameters)
}
}
class ClassB extends classA{
}
let a = new ClassB();
a.getObject();
I know I can always return new ClassB() with some parameters. But ClassA is extended by some hundred classes and it will be a lot of change in every class.
So Is there a way to return object of self class in getObject method of ClassA?
You can use polymorphic this to return an instance of the same type as the current class:
class ClassA {
getObject(): this {
// not really type safe, not really recomnded
return new (this as any).constructor()
}
}
class ClassB extends ClassA {
}
let a = new ClassB();
let b = a.getObject(); // ClassB
console.log(a.getObject() instanceof ClassB); // true
You can also infer the type of this using a type parameter and use that as the return type:
class ClassA {
getObject<T>(this:T) : T {
// not really type safe
return new (this as any).constructor()
}
}
class ClassB extends ClassA {
}
let a = new ClassB();
let b = a.getObject(); // ClassB
console.log(a.getObject() instanceof ClassB); // true

Javascript ES2015 : Instanciate a class and use variables from class

I have a class B which implements another class A.
In the class A I need to use variables defined in class B
class classA {
methodA() {
console.log(parentClass.variableToRetrieve);
}
}
class classB {
constructor() {
this.variableToRetrieve = 1;
this.A = new classA();
}
}
var B = new classB();
B.A.methodA();
Whats should I use in classA.methodA ans see 1 in the console ?
Edit
I already thougth to pass the B object in the classA constructor, or pass values, but as I can have hundreds variables and (potentially) millions classA, it will fuck the server quickly
You should extend classB with classA
class classA {
methodA() {
console.log('parentClass.variableToRetrieve');
}
}
class classB extends classA {
constructor() {
super()
this.variableToRetrieve = 1;
}
method() {
this.A = new classA();
}
}
var B = new classB();
B.methodA();
Updated:
I think binding the classB will solve will problem.
class classA {
methodA() {
console.log(this.variableToRetrieve);
}
}
class classB {
constructor() {
this.variableToRetrieve = 4;
}
}
var B = new classB();
var A = new classA();
A.methodA.bind(B)();
Your class A must extend class class B to do that

Promoting object in JavaScript

So I have a class and another class that extends the first one.
I would like to know if it's possible to promote the extended class from the first one in JavaScript.
class Class1 {
constructor(data) {
this.var1 = data.var1
this.var2 = data.var2
}
}
class Class2 extends Class1 {
constructor(o) {
this = o
this.var3 = '!!!'
}
}
const o = new Class1({var1: 'HELLO', var2: 'WORLD'})
const o2 = new Class2(o)
console.log(o2.var1)
console.log(o2.var2)
I know that this = o is going to throw an error. But is there a way to accomplish the task without having to assign every field from the old object to a new one?
You can use the super() function:
class Class1 {
constructor(data) {
this.var1 = data.var1
this.var2 = data.var2
}
}
class Class2 extends Class1 {
constructor(o) {
super(o)
this.var3 = '!!!'
}
}
const o = new Class1({var1: 'HELLO', var2: 'WORLD'})
const o2 = new Class2(o)
console.log(o2.var1) // -> HELLO
console.log(o2.var2) // -> WORLD
More info on super(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
You can call super(o) at the beginning of the constructor on class2
Demo fiddle

Categories

Resources