The summer vacation also made the EXT4 Web desktop, more is also the javascript thing. For JavaScript, it's only document.getElementById () and alert (), and now it's getting closer. If there is anything wrong with this article, please point out.
As for Javasript, it is object-based, so it has no concept of class, so if you want to implement inheritance, you can only use JavaScript's prototype mechanism prototype to implement it. (In fact, this is wrong, thank you @ Memory of the forest tips, you can use apply and call to achieve)
Because JavaScript does not have a special mechanism to implement classes, it is only possible to simulate the implementation class with a mechanism that can be nested using its functions. In JavaScript, a function can contain variables or other functions, so, in this case, we can take the variable as the property of the class, and the internal function as the member method. The outer function, then, can be viewed as a class.
1, first we write an animal class, in fact he is a function, but we can think of it as the constructor of this class
Copy Code code 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 ();
So we create an instance of obj, run it, and use the relevant debugging tools to see the debug information for call the constructor. It also proves that we created the class successfully.
3, then, next, we can also add parameters to the constructor, such as:
Copy Code code as follows:
function Animal (name) {
THIS.name = name;
}
In this way, we can create an instance and access the properties of the class.
Copy Code code as follows:
function MyClass (name) {
THIS.name = name;
}
var cat = new MyClass ("Kate");
alert (cat.name);
This way, you can access the property name of the instance cat.
4, we all know that animals can jump will eat, so how can we add a method to him? Look underneath.
Method One: Declare the method directly inside the constructor
Copy Code code as follows:
function Animal (name) {
THIS.name = name; This.jump = function () {
Alert (THIS.name + "is jumping ...");
};
This.eat = function () {
Alert (THIS.name + "is eatting ...");
};
}
var cat = new Animal ("Kate");
alert (cat.name);
Cat.jump ();
Cat.eat ();
Method Two: Add method to class with prototype
Copy Code code 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 eatting ...");
}
}
var cat = new Animal ("Kate");
alert (cat.name);
alert (Cat.type);
Cat.jump ();
Cat.eat ();
Similarly, we can add new attributes to the class in the same way, such as type ....
5, the above we talked about is javascipt, how to create a class, and how to add attributes and methods for the class, next, we talk about how to implement the inheritance of the class.
To implement inheritance, we can implement the inheritance of the class by prototype, first of all, we must first declare a dog class (if not, please look back at the relevant content), and let it inherit the animal class.
Copy Code code as follows:
function Dog () {};
Dog.prototype = new Animal ("Henry");
Then we can instantiate a new dog dog out, try to call it the way, see success?
Copy Code code 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 see the prompt "Henry is jumping ...", "Henry is eatting ...".
6, since the implementation of the class inheritance, it will inevitably think of another problem, that is the problem of polymorphism.
Polymorphism refers to the same operations or functions, processes can be used on multiple types of objects and obtain different results. Different objects, receive the same message can produce different results, this phenomenon is called polymorphism.
By inheriting, subclasses have inherited the methods of the parent class, but to implement polymorphism, it is bound to override the methods of the subclass.
To express it more clearly, we create a pig class and inherit the animal class. How to create I will not say. The code that was created should be the same as it is now.
Copy Code code 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 the reason that inherits the animal class, the result must be "xx is jumping ...", "XX is eatting ...", so what we want to achieve is to rewrite the method. We can implement a method rewrite in the following way.
Copy Code code as follows:
function Dog () {};//Create Dog subclass
Dog.prototype = new Animal ("Henry");
Ways to Rewrite Dog
Dog.prototype.jump = function () {
Alert ("Hi, this is" + THIS.name + ", I ' m jumping ...")
};
Dog.prototype.eat = function () {
Alert ("Henry is eatting a bone now.");
};
function Pig () {};//Create Pig subclass
Pig.prototype = new Animal ("Coco");
Ways to rewrite Pig
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 eatting something delicious.");
}
var dog = new Dog ();
Dog.jump ();
Dog.eat ();
var pig = new Pig ();
Pig.jump ();
Pig.eat ();
Run, is not the implementation of the method of rewriting it??
6. Then, if I instantiate a dog, I want to add properties and methods for this dog alone, how do I do that? Look underneath.
Copy Code code as follows:
var dog = new Dog ();
Adding Properties and methods
Dog.type = "Doberman Pinscher";
Dog.shout = function () {
Alert ("I ' m a" + This.type + ".");
}
Dog.jump ();
Dog.eat ();
Calling a new method
Dog.shout ();
7, OK, 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. Thank you for your advice.
