This article describes the JavaScript inheritance mechanism. Share it for your reference. The specific analysis is as follows:
It is generally difficult for beginners to understand the inheritance mechanism of the Javascript language. It does not have the concept of "subclass" and "parent class", nor does it have the distinction between "class" and "instance". It relies entirely on a very strange "prototype chain" model to achieve inheritance.
I spent a lot of time studying this part and taking a lot of notes. But they are all forced memory and cannot be understood fundamentally.
1. How to create a class
Suppose there is a class called Person as follows:
Copy the code as follows: var Person = function(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
As mentioned above: Person represents all people on the earth, and everyone has these two basic attributes: name and age; now we want to implement a student class, and then we know; students are also a person, and students also have attributes such as name and age; the question now is how can we build this relationship?
Let’s first look at how pure object-oriented languages do it (such as Actionsscript3)
Copy the code as follows: class Students extend Person {}; //It's very simple, one line of code; to be more precise, one word--extend
2. How can I do it if I change it to js
Before explaining the implementation of js inheritance mechanism, let’s first understand the prototype chain of js:
The code copy is as follows: var person = new Person('Poised-flw', 21);
person.getName(); // "Poised-flw"
As for the above getName() method, how is it executed? First, you will find whether there is a getName() method in the Person function and find no; then go to Person.prototype to search and find there is! Then call it, what if it doesn't? Continue to follow the same method and search along the prototype until you find the method or reach the top of the prototype chain!
For example, there is now a constructor called DOG that represents the prototype of a dog object.
Copy the code as follows: function DOG(name){
this.name = name;
}
Using new for this constructor will generate an instance of the dog object.
The code copy is as follows: var dogA = new DOG('big hair');
alert(dogA.name); // Big hair
Pay attention to this keyword in the constructor, which represents the newly created instance object.
3. Disadvantages of new operator
There is one disadvantage in using constructors to generate instance objects, that is, the ability to share attributes and methods.
For example, in the constructor of the DOG object, set the common attribute species of an instance object.
Copy the code as follows: function DOG(name){
this.name = name;
this.species = 'Canidae';
}
Then, two instance objects are generated:
The code copy is as follows: var dogA = new DOG('big hair');
var dogB = new DOG('Eimao');
The species attributes of these two objects are independent, modifying one will not affect the other.
The code copy is as follows: dogA.species = 'Female';
alert(dogB.species); // Show "canine family", not affected by dogA
Each instance object has its own copy of its properties and methods. This not only fails to share data, but also a huge waste of resources.
So: Inheritance idea: Implement the inheritance mechanism through js' unique prototype chain!
4. Inheritance based on prototype chain
1. Direct inheritance and implementation
Copy the code as follows: var Students = function(name, age, sid) {
Person.call(this, name, age);
this.sid = sid;
}
Students.prototype = new Person(); //Put Person on the prototype chain of Students to implement the inheritance mechanism
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
// Get the students' grades
}
It is necessary not to miss Students.prototype.constructor = Students line! , when defining a constructor, its default prototype is an Object instance, and then the constructor attribute of the prototype is automatically set to the function itself! ! ! If the prototype is manually set to another object, the new object will naturally not have the constructor value of the original object, so its constructor attribute needs to be reset. like:
Copy the code as follows: var Test = function() {
this.time = "now";
}
console.log(Test.prototype); // Object {} An empty object
console.log(Test.prototype.constructor); // function() {this.time = "now";}, and the function itself
// If you manually change the prototype property of Test
Test.prototype = {
someFunc: function() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// Then you will find that the pointing is completely wrong, so when manually changing the prototype property, you need to change its constructor pointing;
After the above test, you will know why you need to modify the constructor value.
2. Encapsulate inherited function extend
Copy the code as follows: function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
In fact, the function of this function is just an encapsulation of the above inheritance process, and the differences are:
It only inherits the prototype attribute of superClass, and does not inherit the attributes in the superClass constructor;
The advantage of this is to reduce the overhead of new constructor!
Of course, the subsequent problem is that you cannot simply pass this function to allow subClass to inherit all the properties of superClass
improve:
Copy the code as follows: // Continue to add a line of code to the Students constructor:
Person.call(this, name, age);
5. Summary
Using the prototype chain principle of js, we can easily implement the js inheritance mechanism. Although it is not very strict, my goal has been achieved: try to appear repetitive code once!
I hope this article will be helpful to everyone's JavaScript programming.