Introduction to javascript prototypal inheritance_javascript skills-JS Tutorial-php.cn

Introduction to javascript prototypal inheritance_javascript skills

WBOY

Release： 2016-05-16 18:02:51

Original

1130 people have browsed it

During the summer vacation, I also worked on an ext4 web desktop, and more JavaScript stuff. For javascript, I only knew document.getElementById() and alert() before, but now I am starting to understand it more deeply. If there is anything wrong with this article, please point it out.
Regarding JavaScript, it is based on objects, so it does not have the concept of classes. Therefore, if you want to implement inheritance, you can only use JavaScript's prototype mechanism to achieve it. (Actually, this is wrong. Thanks to @Memory Forest’s tip, you can also use apply and call to achieve it)
Because JavaScript does not have a special mechanism to implement classes, so it can only be nested with the help of its functions. Mechanism to simulate implementation classes. In JavaScript, a function can contain variables or other functions. In this case, we can use variables as attributes of the class and internal functions as member methods. Then, the outer function can be regarded as a class.
1. First, let’s write an animal class. In fact, it is a function, but we can regard it as the constructor of this class

Copy code The code is as follows:

 
function Animal(){ 
console.log('Call the constuctor.'); 
} 

2. Then we can use the new keyword to create an instance of the myClass class
var cat = new Animal();
In this way, we have created an instance obj. Run it and use the relevant The debugging tool can see the debugging information of Call the constructor. This proves that we successfully created the class.
3. Then, next, we can also add parameters to the constructor, such as:

Copy code The code is as follows :

 
function Animal(name){ 
this.name = name; 
} 

In this way, we can create instances and access classes The attributes are

Copy the code The code is as follows:

 
function myClass(name){ 
 this.name = name; 
} 
var cat = new myClass("Kate"); 
alert(cat.name); 

In this way, you can access The attribute name of instance cat is.
4. Everyone knows that animals can jump and eat, so how do we add methods to them? See below
Method 1: Declare the method directly in the constructor

Copy the code The code is as follows:

 
function Animal(name){ 
this.name = name; this.jump = function(){ 
alert (this.name " is jumping..."); 
}; 
this.eat = function(){ 
alert (this.name " is eating..."); 
}; 
} 
var cat = new Animal("Kate"); 
alert(cat.name); 
cat.jump(); 
cat.eat(); 

Method 2: Use prototype to add methods to the class

Copy code The code is as follows:

 
function Animal(name){ 
this.name = name; 
} 
Animal.prototype = { 
type : 'cat', 
jump : function(){ 
alert (this.name " is jumping..."); 
}, 
eat : function(){ 
alert (this.name " is eating..."); 
} 
} 
var cat = new Animal("Kate"); 
alert(cat.name); 
alert(cat.type); 
cat.jump(); 
cat.eat(); 

Similarly, we also You can use the same method to add new attributes to a class, such as type....
5. What we talked about above is how to create a class in javascript and how to add attributes and methods to the class. Next, Let's talk about how to implement class inheritance.
To achieve inheritance, we can implement class inheritance through prototype. First, we must declare a Dog class (if you still don’t understand, please re-read the relevant content above) and let it inherit the Animal class.

Copy code The code is as follows:

 
function Dog(){}; 
Dog. prototype = new Animal("Henry"); 

Then we can instantiate a new dog and try to call its method to see if it succeeds?

Copy code The code is as follows:

 
function Dog(){}; 
Dog.prototype = new Animal("Henry"); 
var dog = new Dog(); 
dog.jump(); 
dog.eat(); 

Obviously, if the code is correct, you should be able to see the prompts "Henry is jumping...", "Henry is eating...".
6. Now that class inheritance has been implemented, another problem must come to mind, and that is the problem of polymorphism.
Polymorphism means that the same operation, function, or process can be applied to multiple types of objects and obtain different results. Different objects can produce different results when receiving the same message. This phenomenon is called polymorphism.
Through inheritance, the subclass has inherited the methods of the parent class, but to achieve polymorphism, the methods of the subclass must be rewritten.
In order to express it more clearly, we create another Pig class and inherit the Animal class. I won’t tell you how to create it. The created code should look like this.

Copy code The code is as follows:

 
function Dog(){}; 
Dog. prototype = new Animal("Henry"); 
function Pig(){}; 
Pig.prototype = new Animal("Coco"); 
var dog = new Dog(); 
dog .jump(); 
dog.eat(); 
var pig = new Pig(); 
pig.jump(); 
pig.eat(); 

After running, because it inherits the Animal class, the result will definitely be "XX is jumping...", "XX is eating...", then what we want to achieve is to rewrite the method. We can implement method overriding in the following ways.

Copy code The code is as follows:

 
function Dog(){};//Create dog Class
Dog.prototype = new Animal("Henry"); 
//Override dog method
Dog.prototype.jump = function(){ 
alert("Hi, this is " this.name ", I'm jumping...") 
}; 
Dog.prototype.eat = function(){ 
alert("Henry is eating a bone now."); 
}; 
function Pig(){};//Create pig subclass
Pig.prototype = new Animal("Coco"); 
//Override pig method
Pig.prototype .jump = function(){ 
alert("I'm sorry. " this.name " can not jump."); 
}; 
Pig.prototype.eat = function(){ 
alert("Hi, I'm " this.name ", I'm eating something delicious."); 
} 
var dog = new Dog(); 
dog.jump(); 
dog.eat(); 
var pig = new Pig(); 
pig.jump(); 
pig.eat(); 

Run it, yes Isn't it possible to rewrite the method? ?
6. So, if I instantiate a dog, I want to add attributes and methods to this dog separately. How should I do it? Look below

Copy code The code is as follows:

 
var dog = new Dog(); 
//Add attributes and methods 
dog.type = "Doberman Pinscher"; 
dog.shout = function(){ 
alert("I'm a " this.type "."); 
} 
dog.jump(); 
dog.eat(); 
//Call new method 
dog.shout(); 

7. Well, this article is written here. I believe that beginners should have a certain understanding of class creation and inheritance. If you have any questions, you can leave a message. Thanks for the advice.