A good programmer's web front-end tutorial JS inheritance implementation analysis, JS is one of the three elements of the web front-end, and is the first roadblock encountered by every beginner front-end classmate. Many people report that learning JS is not easy, and the concepts and applications of various knowledge points often make people scratch their heads. In the next advanced course of the Beijing Web front end, the good programmer Xiaobian will give you a brief introduction to the inheritance method of JS.
What is inheritance?
Inheritance is to allow objects of a type (which can be defined by a constructor or class) to access the properties and methods of another type. It is a relationship between classes and classes. Generally speaking, subclasses inherit from parent . But there is a misunderstanding here: it is wrong to think that the instance inherits a certain class, and that someone has the attributes and methods to respond because he inherits humans.
There are many ways to achieve inheritance. In this course, the editor will share with you four types: the use of constructors to implement inheritance, prototype inheritance, combined inheritance, and ES6 inheritance.
1. Implement the inheritance
function Person (name, age) with the help of a constructor {// Define a parent class
this.name = name;
this.age = age;
this.sayHello = function () {
console.log (this.name) ;
}
}
function Male (name, age) {// Define a subclass male class
// inherit the parent class, let the subclass have corresponding properties and methods
// usage of call or apply
// this in the constructor points to this Example
Person.call (this, name, age);
this.hx = "true"; // In addition to inherited properties and methods, you can also add properties and methods specific to the subclass itself
}
function FeMale (name, age) {// Define a subclass female class
Person.call (this, name, age);
this.hj = "no";
}
var male = new Male ("chenjinfeng", 20);
male.sayHello ();
2, prototype inheritance
function Person () {
}
Person.prototype.name = "john";
Person. prototype.age = 20;
Person.prototype.sayHello = function () {
console.log (this.name);
}
function Male () {
}
Male.prototype = new Person (); // Male.prototype. proto == Person.prototype by this line of code inheritance
// Find the flow of male proto there sayHello (Male.prototype) above,
// if not continue to look for male. proto . proto (Male.prototype. proto ) is to find Person.prototype
var male = new Male ();
male.sayHello ();
3. Combination inheritance
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function () {
console.log (this.name);
}
function Male (name, age) {
Person.call (this, name, age); // Only inherit the instance attribute
}
// Only consider whether inheriting the prototype method is enough to make the Male prototype object also have the Person prototype object Method
/ Male.prototype = Person.prototype;
// sayHi method is a unique method of my subclass
Male.prototype.sayHi = function () {
console.log ("hi");
}
var male = new Male (" john ", 20);
male.sayHello ();
var person = new Person (" aa ", 22);
person.sayHi (); // The end, the parent class can actually access the subclass method, inheritance is completely messy, the reason is that Male.prototype and Person.prototype point to the same, any one change will affect the other party /
for (let attr in Person.prototype) {
Male.prototype [attr] = Person.prototype [attr];
}
Male.prototype.sayHi = function () {
console.log ("hi");
}
var male = new Male ("john" , 20);
male.sayHello ();
male.sayHi ();
var person = new Person ("aa", 22);
person.sayHi ();
4, ES6 inherits
class Person {
constructor (name, age) {
this .name = name;
this.age = age;
}
sayHello () {
console.log (this.name);
}
// Extend, define class method
static foo () {
console.log ("This is a class method, not an instance method");
}
}
// The inheritance is achieved through the keyword
extends class Male extends Person {
constructor (name, age) {
super (name, age); // 1. Create this object 2. super points to the constructor of the parent class
this.sexy = "Male"; // Add the instance attribute of the subclass
}
// The prototype method of the parent class is used in the prototype method of the subclass
sayHi () {
console .log ("hi");
super.sayHello (); // Who does super point to? The prototype object of the parent class
}
static foo1 () {
super.foo (); // super points to the parent class
}
}
var male = new Male ("john", 20);
//male.sayHello ();
male.sayHi ();
Male.foo1 ();