Object inheritance for front-end development

Several classic object inheritance methods common in js:

Inheritance is mentioned in front-end development, so what is inheritance? What is object inheritance? What does it do? How to achieve inheritance?

Preface: When learning object-oriented languages ​​before, you will find that there is a sign that they all have the concept of classes, and through classes, you can create any number of objects with the same properties and methods.

But there is no concept of class in JavaScript, and its objects are also different from class-based objects. In fact, the JavaScript language implements object-oriented programming through a method called prototype.

Inheritance: In the vernacular, the method instantiated by the descendant can use the existing properties and methods of the parent type.

Object inheritance: the inherited individual is based on the object as the unit.

Function: One of the biggest benefits of implementing inheritance is that the child object can use the properties and methods of the parent object, which simplifies some codes.

Several classic object inheritance methods common in js:

• Prototype chain inheritance
• Inheritance with Borrowing Constructor
• Combined inheritance (higher frequency of use

1. Prototype chain inheritance

Core idea: The prototype of a subtype is an instance object of the parent type

Basic method:

• First define the parent type constructor
• Add methods to the prototype of the parent type
• Redefine the constructor of the subtype
• Create an object of the supertype and assign it to the prototype of the subtype
• Sets the constructor property of the subtype's prototype to the subtype
• Add methods to subtype prototypes
• Create an object of a subtype: You can call methods of the supertype

// 首先定义父类型构造函数
function fatherType() {
    
    
    this.fatherProp = 'father property';
}

// 给父类型的原型添加方法
fatherType.prototype.showfatherProp = function () {
    
    
    console.log(this.supProp);
};

// 定义子类型的构造函数
function SubType() {
    
    
    this.subProp = 'Sub property';
}

// 创建父类型的对象赋值给子类型的原型
fatherType.prototype = newfather1Type();

// 将子类型原型的构造属性设置为子类型
fatherType.prototype.constructor = SubType;

// 给子类型原型添加方法
SubType.prototype.showSubProp = function () {
    
    
    console.log(this.subProp)
};

// 创建子类型的对象: 可以调用父类型的方法
var subType = new SubType();
subType.showfather1Prop();
subType.showSubProp();

But such an inheritance model also has disadvantages:

1. The prototype chain inherits the reference type attributes of multiple instances pointing to the same point. If one instance modifies the prototype attribute, the prototype attribute of the other instance will also be modified. 2. Cannot
pass parameters
3. Single inheritance

2. Borrow constructor inheritance

Core idea: Use .call() and .apply() to introduce the parent class constructor into the subclass function, and use the parent class constructor to enhance the subclass instance, which is equivalent to copying the parent class instance to the subclass

Basic method:

• First define the parent type constructor
• Define a subtype's constructor
• Add methods to subtype's prototype
• Create an object of the subtype and then call

// 定义父类型构造函数
function SuperType(name) {
    
    
    this.name = name;
    this.showSupperName = function () {
    
    
        console.log(this.name);
    };
}

// 定义子类型的构造函数
function SubType(name, age) {
    
    
    // 在子类型中调用call方法继承自SuperType
    SuperType.call(this, name);
    this.age = age;
}

// 给子类型的原型添加方法
SubType.prototype.showSubName = function () {
    
    
    console.log(this.name);
};

// 创建子类型的对象然后调用
var subType = new SubType("孙悟空", 20);
subType.showSupperName();
subType.showSubName();
console.log(subType.name);
console.log(subType.age);

This method has a better sense of logic, but it also has some disadvantages:

Only the instance properties and methods of the parent class can be inherited, but the prototype properties and methods cannot be inherited. The
reuse of constructors cannot be realized. Each subclass has a copy of the instance function of the parent class, which affects performance and the code will be bloated

3. Combination inheritance (five-star important)

Core idea: Combination inheritance of prototype chain + borrowing constructor

Basic method:

• Use the prototype chain to realize the method inheritance of the parent type object
• Use super() to borrow the parent type constructor to initialize the same property

function Person(name, age) {
    
    
    this.name = name;
    this.age = age;
}

Person.prototype.setName = function (name) {
    
    
    this.name = name;
};

function Student(name, age, price) {
    
    
    Person.call(this, name, age); // 为了得到父类型的实例属性和方法
    this.price = price; // 添加子类型私有的属性
}

Student.prototype = new Person(); // 为了得到父类型的原型属性和方法
Student.prototype.constructor = Student; // 修正constructor属性指向
Student.prototype.setPrice = function (price) {
    
     // 添加子类型私有的方法 
    this.price = price;
};

var s = new Student("赵子龙", 24, 15000);
console.log(s.name, s.age, s.price);
s.setName("赵云");
s.setPrice(16000);
console.log(s.name, s.age, s.price);

Disadvantages of this mode:

The instance properties and methods in the parent class exist both in the instance of the subclass and in the prototype of the subclass, but only occupy memory. Therefore, when using a subclass to create an instance object, there will be two identical copies in its prototype properties and methods.