This article describes the principle and implementation methods of object-oriented inheritance of JavaScript. Share it for your reference, as follows:
1. The relationship between constructor, prototype and instance
The constructor has a prototype propertyprototypePoint to a prototype object.
The prototype object contains a pointer to the constructorconstructor 。
The instance contains an internal pointer to the prototype object[[prototype]] 。
2. Inheritance through prototype chain
Basic idea: Use prototypes to allow one reference type to inherit the properties and methods of another reference type, and subtypes can access all properties and methods of supertypes. The construction of a prototype chain is implemented by assigning an instance of one type to a prototype of another constructor. The essence of implementation is to rewrite the prototype object and replace it with a new type of instance.
function Person(name) {
= name;
}
= function() {
alert("Hello, " + );
}
var person = new Person("Alice");
(); // Hello, Alice
function Student() {
}
= new Person("Bruce");
= 16;
= function() {
alert();
}
var student = new Student();
(); // Hello, Bruce
(); // 16
Note: You cannot create prototype methods with object literals, as this will override the prototype chain and cause inheritance to be invalid.
function Person(name) {
= name;
}
= function() {
alert("Hello, " + );
}
var person = new Person("Alice");
(); // Hello, Alice
function Student() {
}
= new Person("Bruce");
= 16;
= {
showId: function() {
alert();
}
};
var student = new Student();
(); // Error: is not a function(); // 16
Student points to the Student's prototype, and Student's prototype points to the Person's prototype.
()Prototype chain search mechanism:
1) Search for whether there is any student instancesayHello()
2) SearchIs there anysayHello()
3) SearchIs there anysayHello()
Subtypes sometimes need to override a method of the supertype, or need to add a method that does not exist in the supertype.
function Person(name) {
= name;
}
= function() {
alert("Hello, " + );
}
var person = new Person("Alice");
(); // Hello, Alice
function Student() {
}
= new Person("Bruce");
= 16;
= function() {
alert();
}
= function() {
alert("Hi, " + );
}
var student = new Student();
(); //Hi, Bruce
(); // 16
Note: The code that overwrites or adds methods to the prototype must be placed after the statement that replaces the prototype.
function Person(name) {
= name;
}
= function() {
alert("Hello, " + );
}
var person = new Person("Alice");
(); // Hello, Alice
function Student() {
}
= function() {
alert("Hi, " + );
}
= new Person("Bruce");
= 16;
= function() {
alert();
}
var student = new Student();
(); // Hello, Bruce
(); // 16
Determine the relationship between an instance and a prototype:
（1）instanceof
alert(student instanceof Object); // true alert(student instanceof Student); // true alert(student instanceof Person); // true
（2）isProtptypeOf
alert((student)); // true alert((student)); // true alert((student)); // true
（3）getPrototypeOf
(student1) ==
Issues of using prototype chains to achieve inheritance:
(1) The attributes of the reference type will be shared by the instance. When the prototype implements inheritance, the prototype will become another type instance, and the attributes of the instance will become the current prototype attribute, thus being shared.
function Person(name, age) {
= ["Cindy","David"];
}
function Student() {
}
= new Person();
var student1 = new Student();
("Bruce");
alert(); // "Cindy","David","Bruce"
var student2 = new Student();
alert(); // "Cindy","David","Bruce"
(2) When creating a subtype instance, parameters cannot be passed to the supertype constructor. In fact, there should be no way to pass parameters to the supertype constructor without affecting all object instances.
In reality, it is rare to use prototype chains alone to achieve inheritance.
3. Implement inheritance through constructors
Basic idea: Call the supertype constructor inside the subtype constructor. By usingapply()andcall()Methods can also execute constructors on newly created objects.
function Person(name, age) {
= name;
= age;
}
function Student() {
(this,"Alice",22); // Inherit the constructor Person, and also pass parameters = 16; // Instance properties}
var student = new Student();
alert(); // "Alice"
alert(); // 22
alert(); // 16
Issues of using constructors to implement inheritance:
(1) Methods defined in supertype prototypes are invisible to subtypes, and as a result, all types can only use constructor patterns.
(2) If a subclass can access the methods defined by the superclass, the method can only be defined in the constructor, but when the method is defined in the constructor, function reuse is impossible.
function Person(name, age) {
= name;
= age;
}
= function() {
alert();
};
function Student() {
(this,"Alice",22);
= 16;
}
var student = new Student();
alert(()); // Error: is not a function
In practice, inheritance is rarely achieved using constructors alone.
4. Use prototype chains and constructors in combination to achieve inheritance
Idea: Use the prototype chain to inherit shared attributes and methods, and use the constructor to inherit instance attributes.
Effect: Function multiplexing is achieved by defining methods on the prototype, and it can also ensure that each instance has its own attributes.
function Person(name, age) {
= name;
= age;
= ["Cindy","David"];
}
= function() {
alert("Hello, " + );
}
function Student(name, age, id) {
(this, name, age);
= id;
}
= new Person();
= function() {
alert();
}
var student1 = new Student("Alice", 22, 16);
("Emy");
alert(); // "Cindy","David","Emy"
(); // Hello, Alice
(); // 16
var student2 = new Student("Bruce", 23, 17);
alert(); // "Cindy","David"
(); // Hello, Bruce
(); // 17
For more information about JavaScript, readers who are interested in reading this site's special topic:JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.