Home >Web Front-end >JS Tutorial >What are the inheritance methods of js? Introduction to several ways to implement inheritance in js
What this article brings to you is what are the inheritance methods of js? An introduction to several ways to implement inheritance in js has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. The way js implements inheritance: prototype chain
Implementation method: The instance of A prototype is the attribute of B prototype
No Forget that Object exists by default in the prototype chain
Adding methods to subclasses or overriding superclass methods must be placed after replacing the prototype statement
After inheritance is implemented through the prototype chain, object literals cannot be used Create methods and properties, because the prototype chain will be rewritten
After inheritance is implemented through the prototype chain, the reference type properties of the super class will be shared by all instances
function SuperType() { this.property = true; this.arr=[1,2,3] } SuperType.prototype.getSuperValue = function() { return this.property; } function SubType() { this.sub = false; } SubType.prototype = new SuperType(); //继承SuperType,即以superType的实例为中介,使subType。prototype指向superType的原型 SubType.prototype.getSubValue = function() { //添加新方法 return this.sub; } SubType.prototype.getSuperValue = function() { // 重写超类中的方法 return this.sub; } var instance1 = new SubType(); instance1.arr.push(4); console.log(instance1.arr); //1,2,3,4 var instance2 = new SubType(); console.log(instance2.arr); //1,2,3,4
2. js implementation inheritance Method: Borrow the constructor
Implementation method: Call the superclass constructor within the constructor of the subclass, that is, use call() or apply(), so that the scope of the superclass constructor changes.
You can pass parameters to the constructor, but you cannot reuse functions
function SuperType(name,age){ this.name = name; this.age = age; } function SubType() { SuperType.call(this,'i','21')//继承SuperType,并传递参数 this.job = 'actor' }
3. The way js implements inheritance: combined inheritance
Implementation method: Use the prototype chain to realize the inheritance of prototype properties and methods, and use the constructor to realize the inheritance of instance properties
Hidden danger: Call the parent class constructor twice (1call() method, 2new SuperType() )
function SuperType(name,age){ this.name = name; this.age = age; this.f = [1,2,3,4] } SuperType.prototype.sayName = function() { console.log(this.name) } function SubType(name,age) { SuperType.call(this,name,age)//继承SuperType,并传递参数 this.job = 'actor' } SubType.prototype=new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayHello=function() { console.log('hello') } var h = new SubType('hua', 18); h.sayName()//haha h.f.push(5) console.log(h.f)//1,2,3,4,5 var n = new SubType(); console.log(n.f)//1,2,3,4
4. The way js implements inheritance: prototypal inheritance
Based on an object, generate a new object, and then modify the new object
Attributes of super class reference types are still shared
var person = { name:'lily', age:'21', friends:[1,2,3] } var people = Object.create(person); people.friends.push(4); var human = Object.create(person); console.log(human.friends)//1,2,3,4
5. The way js implements inheritance: parasitic inheritance
Creation A function only used to implement the inheritance process, extend the object inside the function, and then return the object
At this time, the reference type attribute of the parent class is still shared by all instances
function anotherFunction(original) { var clone = Object(original); clone.sayHi = function() { console.log('hi') } return clone; } var person = { name:'lili', age:'21', f: [1,2,3] } var people1 = anotherFunction(person); people1.f.push(4) console.log(people1.f);// 1,2,3,4 var people2 = anotherFunction(person); console.log(people2.f);// 1,2,3,4
6. The way js implements inheritance: parasitic combined inheritance
Inherits properties by borrowing constructors, and inherits methods through prototype chain mixing
Reduces one parent During the execution of the class constructor, the attributes of the parent class reference type are not shared
function SuperType(name,age){ this.name = name; this.age = age; this.f = [1,2,3,4] } SuperType.prototype.sayName = function() { console.log(this.name) } function SubType(name,age) { SuperType.call(this,name,age) this.job = 'actor' } function inherit(superType,subType) { var property = Object.create(superType.property);// 创建父类原型的一个副本,并没有调用父类构造函数 property.constructor = subType;// 使父类原型副本的constructor属性指向子类 subType.property = property;// 子类的原型指向父类原型副本 } inherit(SuperType,SubType) var instance = new SubType('haha', 18); instance.sayName()//haha instance.f.push(5); console.log(instance.f);//1,2,3,4,5 var ins = new SubType(); console.log(ins.f);//1,2,3,4
Related recommendations:
JS Inheritance--Prototype Chain Inheritance and Class Inheritance_Basic Knowledge
Detailed explanation of examples of inheritance methods in JS
Several ways to implement inheritance in JS
The above is the detailed content of What are the inheritance methods of js? Introduction to several ways to implement inheritance in js. For more information, please follow other related articles on the PHP Chinese website!