Sharing several js inheritance styles

This article mainly shares with you several js inheritance styles, includingprototypal inheritance,borrowed constructor inheritance,combination inheritance,parasitic style Inheritance,parasitic combination inheritance, I hope it can help everyone.

Prototypal inheritance

Inheritance can be implemented without having to define a constructor in advance. Its essence is to perform a shallow copy of a given object. The copied copy can also be further transformed

function parent(o) { this.username = 'father'; this.array = [1,2,3] }function child() { this.age = 20} child.prototype = new Parent();

Disadvantages:
1. The reference variables on the common prototype chain of the parent class and the subclass.
2. When creating a subclass instance, you cannot pass parameters to the constructor of the parent class

Borrow constructor inheritance

Borrow the constructor of the parent class to enhance the instance of the subclass, that is , which is equivalent to copying a copy of the attributes or methods of the parent class to the subclass

function Parent(name,arr) { this.name = name; this.arr = arr; this.run = function() { console.log('run function') } }function Child(name, arr) { this.age = 20; Parent.call(this,name,arr); }var obj1 = new Child('zhang san', [1,2,3]);var obj2 = new Child('zhang san', [1,2,3]); obj1.arr[0] = 'hello'console.log(obj1.arr[0]); // helloconsole.log(obj2.arr[0]); // 1

Advantages:
1. Solve the problem of subclass instances sharing parent class reference attributes
2. Create subclasses When creating an instance, you can pass parameters to the parent class constructor.
Disadvantages:
1. Reuse cannot be achieved. Each subclass instance has a new run function. If there are too many objects in the instance, the memory consumption will be too large.

Combined inheritance

Combined inheritance avoids the shortcomings of prototype chains and borrowed constructors and combines their advantages.

function Parent(name,arr) { this.name = name; this.arr = arr; } Parent.prototype.run = function() { console.log('run function'); }function Child(naem,arr) { this.age = '20'; Parent.call(this,name,arr); // 借用构造函数 ==》 核心语句 1》不能复用} Child.prototype = new Parent(); // 原型链 ==》 核心语句 1》父构造函数不能传递参数 2》arr是引用属性，一个改变，互相影响

Advantages:
1. There is no problem of sharing reference attributes
2. Passable parameters
3. Methods can be reused
Disadvantages:
On the subclass prototype Right copy of the redundant attributes of the parent class instance

Parasitic inheritance

is very similar to prototypal inheritance. It also creates an object based on an object or some information, then enhances the object, and finally Return object.

function createAnother(original) { var clone = Object.create(original); // clone.sayHi = function() { console.log(Hi) } return clone;var Person = { name: 'Blob', friends: ['Shelby', 'Court', 'Van']; }var anotherPerson = createAnother(person); anotherPerson.sayHi(); // Hi

Parasitic combined inheritance

Combined inheritance is the most commonly used inheritance pattern in js. The biggest problem with combined inheritance is that no matter what the circumstances, the constructor will be called twice: once when creating The other time is inside the subtype constructor when prototyping a subtype.

function beget(obj){ // 生孩子函数 beget：龙beget龙，凤beget凤。 var F = function(){}; F.prototype = obj; return new F(); }function Super(){ // 只在此处声明基本属性和引用属性 this.val = 1; this.arr = [1]; }// 在此处声明函数Super.prototype.fun1 = function(){}; Super.prototype.fun2 = function(){};//Super.prototype.fun3...function Sub(){ Super.call(this); // 核心 // ...}var proto = beget(Super.prototype); // 核心proto.constructor = Sub; // 核心Sub.prototype = proto; // 核心var sub = new Sub(); alert(sub.val); alert(sub.arr);

Related recommendations:

Details on js inheritance

js inheritance implementation code_javascript skills

JS Inheritance--Prototype Chain Inheritance and Class Inheritance_Basic Knowledge

The above is the detailed content of Sharing several js inheritance styles. For more information, please follow other related articles on the PHP Chinese website!