This article mainly shares with you several js inheritance styles, including prototypal inheritance, borrowed constructor inheritance, combination inheritance, parasitic style Inheritance, parasitic combination inheritance, I hope it can help everyone.
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 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 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
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
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:
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!