JavaScript-Class inheritance

JavaScript does not have the concept of class, but JavaScript has its own prototype mechanism, we can use the prototype mechanism (Prototype,constructor) to pseudo a class out, commonly known as "pseudo-class."

When a new function object is created, it is given a prototype property whose value is an object that includes the constructor property with the value of the new function, which is interpreted by code:

Cat.prototype.constructor = Cat

Introduction to JavaScript prototype mechanism of the article Blog park there are many, you can find yourself to see OH.

The first step in building a pseudo-class is to define a constructor:

function Animal (kind) {    this. Kind = Kind | | "Mammals"}

The second step is to expand its prototype:

function () {  returnthis. Kind}

Next can be instantiated, is not very simple ah, want to instantiate how many can be OH

var New Animal ("Amphibian")varnew Animal ("Bird Class"// amphibian // bird category) 

Well, after the introduction of how to build pseudo-class to get to the point, then how can we achieve the "successor"?

Step One:

Our aim is to inherit, of course, to give animal a son (no son how to inherit) that Father is a class, son also must be a class, so still is the old step.

function Cat () {  Animal.call (This, "Mammal")} 

Cat is a subclass constructor, so the question is, what is animal.call (this)? In fact, the function here is to call the parent class's constructor.

Step:

New Animal ()

This sentence is the key to class inheritance, the animal instance is assigned to the cat's prototype, so that the cat prototype has a animal prototype method and properties, but does not affect the animal.

Step Three:

Cat.prototype.constructor = Cat

Since Cat.prototype was sold to animal, Cat.prototype's constructor points to animal, which is what the code does to get the cat back.

Above are the basic steps of class-based inheritance, let's take a try for example:

functionAnimal (kind) { This. Kind = Kind | | "Mammals"}animal.prototype.getkind=function() {  return  This. Kind}functionCat () {Animal.call ( This, "Mammals")}cat.prototype=NewAnimal () Cat.prototype.constructor=CatCat.prototype.miao=function() {  return"I am a subclass of the unique method Oh, Meow ~"}varAAA =NewAnimal ("Amphibian")varBBB =NewAnimal ("Bird Class")) Console.log (Aaa.getkind ())//Amphibian TypeConsole.log (Bbb.getkind ())//Bird ClassvarCAT_AAA =NewCat () Console.log (Cat_aaa.getkind ())//Mammal TypeConsole.log (Cat.prototype.constructor)//point to Cat, and if you don't change it back, it will be animal .//Console.log (Aaa.miao ())//undefined is not a function parent class is no use for Miao.Console.log (Cat_aaa.miao ())

Is the result all the expected value?

Interested students can try Console.log (CAT_AAA) and see what will happen.

If there are many places to inherit, it will be cumbersome to write similar inheritance in such a way that we define a inherits method that will make the implementation of the inheritance more concise:

function (func) {    this-new  func (    )this}

The code is easy to read, so let's look at the application:

functionAnimal (kind) { This. Kind = Kind | | "Mammals"}animal.prototype.getkind=function() {  return  This. Kind}functionCat (name) {Animal.call ( This, "Mammals")}cat.inherits (Animal); Cat.prototype.miao=function() {  return"I am a subclass of the unique method Oh, Meow ~"}varCAT_BBB =NewCat () Console.log (Cat_bbb.miao ())

OK, finished, continue to change the bug to ~

JavaScript-Class inheritance