Legend https://www.xs86.com
In the previous article, we talked about JS objects, constructors, and prototype patterns. This article discusses the inheritance of JavaScript
Inheritance is one of the most popular concepts in OO language. Many OO languages support two kinds of inheritance: interface inheritance and implementation inheritance. Interface inheritance only inherits method signature, while implementation inheritance inherits the actual method. As mentioned before, interface inheritance cannot be implemented in ECMAScript because the function is not signed. ECMAScript only supports implementation inheritance, and its implementation inheritance mainly depends on prototype chain.
1, Use call or apply
If there is a "person" object, there is also a "student" object.
function Person(name, age) {
this.name = name
this.age = age
}
function Student(subject) {
this.subject = "Chinese"
}How can we make "human" object inherit the attribute or method of "student" object. The first, and simplest, method is to use call or apply to change this to point to the property or method of the calling object.
function Person(name, age) {
this.name = name
this.age = age
Student.call(this, name, age)
}
var person1 = new Person("Zhang San", "18")
console.log(person1.subject) // Chinese2, prototype
The second method is to use the prototype property. That is to say, use the prototype object of "human" to point to the instance object of Student, then all instances of "human" can inherit "Student".
1. First point the prototype object of Person to an instance of Student object
Person.prototype = new Student() // Equal to overwrite or delete the value of the original prototype object, and then give a new value.
2. Refer the constructor property of the prototype object of Person back to Person
Person.prototype.constructor = Person; // Any prototype object has a constructor property that points to its constructor. // If you do not add the next line of code, Person.prototype.constructor will point to Student
3. Each instance will also have a constructor property, which by default calls the constructor property of the prototype object.
var person1 = new Student("Zhang San","18");
alert(person1.constructor == Person.prototype.constructor); // true
// Therefore, when running person. Prototype = new student(), person1. Constructor also points to constructor
// So it's time to manually change the direction of the constructor// Master code
function Person(name, age) {
this.name = name
this.age = age
}
function Student(subject) {
this.subject = "Chinese"
}
Person.prototype = new Student()
Person.prototype.constructor = Person;
var person1 = new Student("Zhang San","18");
console.log(person1.subject) // Chinese3, Inherit prototype
Directly inherit the prototype. First, we need to modify the code of the Student object and add the prototype
function Student(){}
Student.prototype.project = "Chinese"Then point the Person's prototype object to the Student's prototype, which completes the inheritance.
Person.prototype = Student.prototype
Person.prototype.constructor = Person;
var person1 = new Student("Zhang San","18");
console.log(person1.subject) // ChineseAlthough this is efficient, the permissions obtained by the lower level are too heavy, and the constructor point will be modified
Person.prototype.constructor = Person; // This line of code directly changes the direction of Student.prototype.constructor (Person)
4, Find a middle ground
Use an empty object with the following code
var middle = function(){}
middle.prototype = Student.prototype;
Person.prototype = new middle();
Person.prototype.constructor = Person;
console.log(Student.prototype.constructor) // StudentBecause middle is an empty object, modifying the prototype object of Person will not affect the prototype object of Student.
