What are the inheritance methods of js? Introduction to several ways to implement inheritance in js-JS Tutorial-php.cn

What are the inheritance methods of js? Introduction to several ways to implement inheritance in js

不言

Release： 2018-08-11 16:40:08

Original

6106 people have browsed it

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

Copy after login

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,&#39;i&#39;,&#39;21&#39;)//继承SuperType，并传递参数
  this.job = &#39;actor&#39;
}

Copy after login

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 = &#39;actor&#39;
}
SubType.prototype=new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayHello=function() {
  console.log(&#39;hello&#39;)
}

var h = new SubType(&#39;hua&#39;, 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

Copy after login

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:&#39;lily&#39;,
  age:&#39;21&#39;,
  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

Copy after login

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(&#39;hi&#39;)
  }
  return clone;
}
var person = {
  name:&#39;lili&#39;,
  age:&#39;21&#39;,
  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

Copy after login

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 = &#39;actor&#39;
}
function inherit(superType,subType) {
  var property =  Object.create(superType.property);// 创建父类原型的一个副本，并没有调用父类构造函数
  property.constructor = subType;// 使父类原型副本的constructor属性指向子类
  subType.property = property;// 子类的原型指向父类原型副本
}
inherit(SuperType,SubType)
var instance = new SubType(&#39;haha&#39;, 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

Copy after login

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!