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