JavaScript Simple inheritance

Many C # or C + + developers are accustomed to using inheritance to develop projects, so when they want to learn the JavaScript language, the first question is generally: "How do I use inheritance in JavaScript?" ”。

In fact, JavaScript uses a method different from C # or C + + to create an object-oriented language. It is based on the prototype language. The prototype concept indicates that the behavior can be reused as a prototype using the object that the clone already exists. Each object in JavaScript has a prototype that defines the methods and members that a series of objects can use. There is no class, only objects. Each object can be used as a prototype for another object.

This concept is very flexible and we can use it to simulate OOP inheritance.

Implementing inheritance

Let's imagine that we use JavaScript to create this hierarchical structure:

First, we can simply create ClassA. Because there is no explicit class, we simply create a function that defines a set of behaviors:

var function () {    this. Name = "Class A";} 

Use the New keyword to instantiate this "class":

var New  function() {    Console.log (this. name);}

Then use the object to use it:

A.print ()

It's simple, right?

The full style uses only 8 lines of code:

var function () {    this. Name = ' classA 'function() {    Console.log (this  . Name);} var New ClassA (); A.print ();

Now let's create an "inheritance" between classes. This tool only does one simple thing: Clone a prototype:

var function (Child, parent) {    = object.create (parent,prototype);};

The miracle happened! With the clone prototype, we pass all the members and functions to the new class.

So if we want to add a subclass of the first class, we just need to use this code:

var function () {    this. Name = "Class B";      this. Surname = "I ' m the Child";} Inheritsfrom (ClassB, ClassA);

So CLASSB inherits the ClassA print function, so the following code is valid:

var New ClassB (); B.print ();

So the following output is generated:

Class B

We can even overwrite ClassB's print function:

function () {    ClassA.prototype.print.call (this);    Console.log (this. surname);}

In this case, the output is this:

Class B I ' m The child

The trick here is to call Classa.prototype to get the print function. Because of the call function, we can invoke the basic function on the current object (this).

The creation of CLASSC is obvious:

varClassC =function () {     This. Name = "Class C";  This. Surname = "I ' m The grandchild";} Inheritsfrom (ClassC, ClassB); ClassC.prototype.foo=function() {    //Do some funky stuff ...}classc.prototype.print=function() {ClassB.prototype.print.call ( This); Console.log ("Sounds" is working! ");}varc =NewClassC (); C.print ();

Output:

 This is working!

Summarize

Finally, I want to explain that JavaScript is not C # or C + +. It has its own philosophy. If you say C + + or C # programmers, and you really want to learn all about JavaScript, I'll give you the best tip: Don't try to copy your language to JavaScript. No best language or worst language. Just a different philosophy!

Links: http://www.sitepoint.com/simple-inheritance-javascript/

JavaScript Simple inheritance