CODEWITHSUNDEEP
javascriptreactjs
Alwaysblue
Alwaysblue

Reputation: 11830

Wrapper Classes

I am trying to understand the wrapper classes in Javascript.

Based on my understanding, I think wrapper element is something like this (Is div a wrapper here?) 

<div> 
<!--- content and tags here ---> 
</div>

but Wrapper class seems to be new, Will it be something like this?

Consider this 

class myClass {
//Some content
}

export default myClass

if I wrap something in export statement with High Order component (HOC is related to react but you can probably ignore) 

export default something (myClass)

Will this be considered as wrapped class? or wrapper class is something else?

Upvotes: 1

Views: 10609

Answers (3)

AliakbarETH
AliakbarETH

Reputation: 35

Rohit you have asked 3 questions so, let me answer them one by one.

  1. Is div a wrapper here?
  2. Wrapper class seems to be new, Will it be something like this?
  3. Will this be considered a wrapper class? or wrapper class is something else?

To the best of my knowledge, a wrapper class is one that adds functionality to a class. Similarly, a wrapper function is one that adds functionality to a function.

Click here to see about reference functions in javascript.

Now let us answer your questions one by one:

  1. A div is an tag in HTML and not a class. So, it is not a wrapper class.

  2. Your second and third question seems to be a bit confusing. It is a rule of thumb that anything which adds functionality to a class/function is called a wrapper class/function respectively. Since you have not provided any clear code related to your problem and just wrote "// some content". Then, if you add functionality to this class and achieve a layer of abstraction then yes, it is a wrapper class and vice versa.

Taking advantage of this, I would like to draw your attention to wrapper functions.

These are the functions that add to the functionality of already existing functions.

For example, if you want to call 10 functions simultaneously to achieve some functionality according to your logic then instead of calling them one by one, you can make a wrapper function that wraps all the 10 functions and when invoked, calls all inner functions by itself.

Let's see the code.

Function Add(x, y) {
 return x + y
}

const wrapper = function(func) {
  return function(x, y) {
     console.log("The arguments are " + x + " " + y)
     return func(x, y)


     }


}

Add = wrapper(Add)

console.log(Add(11, 44))

We have made a function called Add. Then we declared a variable named as wrapper( Can be any name) to hold the output of function. IT is returning an anonymous function( a function that has no name) which in turn prints a statement and returns a function called as func(x,y).

Now, what's the story behind the code.

Add = wrapper(Add)

is wrapping the functionality of Add and adding more features into it.

So, I am sure this surely helps in understanding in wrapper class and wrapper functions.

Upvotes: 0

Willem van der Veen
Willem van der Veen

Reputation: 36590

There is no such thing a 'wrapper' class in vanilla javascript. There are just classes which are inherently wrappers for a certain bit of functionality. For example, if we are coding a chessboard we might have a class Pawn which 'wraps' all the functionality of the pawns:

class Pawn {

  constructor(position) {
    this.position = position;
  }

  move() { 
  // some code
    }
  }
  
  
let pawn = new Pawn('A1');

In the above example the Pawn class 'wraps' all the functionality for the pawn objects. This is useful because now we can use these objects without having to look at its implementation details, we just need to know how this object behaves. The main things that classes do are:

  1. Hiding implementation details.
  2. Reducing naming conflicts by acting as a wrapper of a certain piece of functionality. I think that your source was referring to the term 'wrapper class' just because classes inherently have this functionality.

Upvotes: 3

Sammy Taylor
Sammy Taylor

Reputation: 291

Generally in Object Oriented Programming, behavior of a class can be passed to a less general class through inheritance. In ES6 terms, we would most likely use the extends keyword in our class definition.

Take this example of extends from MDN:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

Another important note from MDN regarding this:

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

Upvotes: 0

Related Questions