After an in-depth understanding of the object system in JavaScript (based on constructor and prototype), it’s easy to learn about the inheritance mechanism in JS~
Article Directory
1. Prototype chain single inheritance
The first two blogs introduced the constructor ( constructor) and the prototype object ( prototype) in detail . I have already talked about inheritance more or less, so I will list them here.
Speaking before this section, we first define a parent constructor Animal()and its prototype object Animal.prototype-
// 父构造函数
function Animal (name,age){
this.name = name;
this.age = age;
};
// 父构造函数原型对象
Animal.prototype = {
constructor:Animal,
color:"white",
sayName:function(){
console.log("my name is",this.name);
},
sayAge:function(){
console.log("my age is",this.age);
}
};
Here are three ways to write single-inheritance sub-constructors, which are slightly different, depending on needs:
1.1 The first step-the child class inherits the instance of the parent class
It is divided into two steps:
1.1.1 Call the parent constructor
By binding the call()subclass instance object thisto the parent constructor to call, the subclass instance will also have the properties of the parent instance:
// 子构造函数
function Dog(name,age,gender){
Animal.call(this,name,age); // 借用构造函数
this.gender = gender;
};
1.1.2 Set the base attribute
// 子构造函数
function Dog(name,age,gender){
this.base = Animal;
this.base(name,age);
this.gender = gender;
};
1.2 Step Two-Subclass inherits the prototype of the parent class
1.2.1 The clone object of the parent prototype object
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
// 健全关系
Remember here is to make the clone objectDog.prototype equal to the parent prototype object (through Object.create()方法generation), not directly equal Animal.prototype. Otherwise, the subsequent Dog.prototypeoperations will Animal.prototypebe modified along with the prototype of the parent class .
Declaring an Doginstance object wangcai, you can see that it can access Animalthe properties and methods in its ancestor-level constructor normally :
var wangcai = new Dog("wangcai",2,"male");
console.log(wangcai.name);
console.log(wangcai.color);
wangcai.sayName();
——————OUTPUT——————
wangcai
white
my name is wangcai
instanceofThe operator is used to determine whether the current object is an instance of a certain constructor and returns a Boolean value. Wangcai returned true to both Dog and Animal.
console.log(wangcai instanceof Dog);
console.log(wangcai instanceof Animal);
——————OUTPUT——————
true
true
1.2.2 An instance of the parent class
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
// 健全关系
1.3
Two methods: prototype chain inheritance and borrowing constructor.
// 子构造函数
function Dog(name,age,gender){
Animal.call(this,name,age); // 借用构造函数
this.gender = gender;
};
Dog.prototype = new Animal(); // 原型链继承
Dog.prototype.constructor = Dog; // 健全关系
Dog.prototype.sayGender= function (){
console.log("my gender is",this.gender);
};
// 创建实例对象
var dog = new Dog("zevin",21,"male");
console.log(dog.constructor);
dog.sayGender();
dog.sayName();
——————OUTPUT——————
[Function: Dog]
my gender is male
my name is zevin