Detailed explanation of javascript inheritance mechanism examples_javascript skills

The examples in this article describe the JavaScript inheritance mechanism. Share it with everyone for your reference. The specific analysis is as follows:

It is generally difficult for beginners to understand the inheritance mechanism of Javascript language. There is no concept of "subclass" and "parent class", and there is no distinction between "class" and "instance". It all relies on one A very peculiar "prototype chain" model to implement inheritance.

I spent a lot of time studying this part and took a lot of notes. But they are all forced memories and cannot be understood fundamentally.

1. How to create a class

Suppose there is a class called Person as follows:

Copy code The code is as follows:

var Person = function(name, age) {
This.name = name;
This.age = age;
}
Person.prototype.getName = function() {
Return this.name;
}

As above: Person represents all people on the earth, and everyone has these two basic attributes: name and age; now we have to implement a student class, and then we know; a student is also a person, and students also have attributes such as name and age. ;The question now is how to establish this relationship?
Let’s first take a look at how a pure object-oriented language does it (such as: Actionscrpt3)

Copy code The code is as follows:

class Students extend Person {}; //Very simple, one line of code; more precise Say it is a word--extend

2. How to do it by switching to js

Before explaining the implementation of the inheritance mechanism of js, let’s first understand the prototype chain of js:

Copy code The code is as follows:

var person = new Person('Poised-flw', 21);
person.getName(); // "Poised-flw"

As for the getName() method above, how is it executed? First, I will look for the getName() method in the Person function and find that there is not; then I will go to Person.prototype to search and find that there is! Then call it, what if not? Continue searching along the prototype in the same way until you find a method or reach the top of the prototype chain!

For example, there is now a constructor called DOG, which represents the prototype of the dog object.

Copy code The code is as follows:

Function DOG(name){
　　this.name = name;
}

Using new on this constructor will generate an instance of the dog object.

Copy code The code is as follows:

　var dogA = new DOG('Big Hair');
alert(dogA.name); // Da Mao

Pay attention to the this keyword in the constructor, which represents the newly created instance object.

3. Disadvantages of new operator

Using a constructor to generate instance objects has a disadvantage, that is, properties and methods cannot be shared.
For example, in the constructor of the DOG object, set the common attributes species of an instance object.

Copy code The code is as follows:

Function DOG(name){
　　this.name = name;
　　this.species = 'Canidae';
}

Then, generate two instance objects:

Copy code The code is as follows:

　var dogA = new DOG('Big Hair');
var dogB = new DOG('二毛');

The species attributes of these two objects are independent, and modifying one will not affect the other.

Copy code The code is as follows:

dogA.species = 'Feline';
alert(dogB.species); // Display "canine", not affected by dogA

Each instance object has its own copy of properties and methods. This not only fails to achieve data sharing, but is also a huge waste of resources.

So: The idea of ​​inheritance: Implement the inheritance mechanism through the unique prototype chain of js!

4. Inheritance based on prototype chain

1. Direct inheritance implementation

Copy code The code is 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 student scores
}

Be sure not to miss the line Students.prototype.constructor = Students! , when defining a constructor, its default prototype is an Object instance, and then the constructor property 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 property needs to be reset. Such as:

Copy code The code is 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 attribute of Test
Test.prototype = {
SomeFunc: function() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// Then you will find that you pointed it completely wrong, so when you manually change the prototype attribute, you need to change its constructor pointer;

After the above test, you will know why the constructor value needs to be modified.

2. Encapsulate inherited functions extend

Copy code The code is 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. 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 that it reduces the cost of creating a new constructor!
Of course, the subsequent problem is that subClass cannot inherit all attributes of superClass through this function alone
Improvements:

Copy code The code is as follows:

// Continue to add a line of code in the Students constructor:
Person.call(this, name, age);

5. Summary

Using the prototype chain principle of js, we can easily implement the inheritance mechanism of js. Although it is not very strict, my goal has been achieved: repeated code should appear once as much as possible!

I hope this article will be helpful to everyone’s JavaScript programming design.