Home > Web Front-end > JS Tutorial > Summary of inheritance examples in Javascript programming_javascript skills

Summary of inheritance examples in Javascript programming_javascript skills

WBOY
Release: 2016-05-16 15:29:18
Original
1052 people have browsed it

The examples in this article describe the inheritance of Javascript programming. Share it with everyone for your reference, the details are as follows:

This text is a summary after reading "The Return of the Javascript King". The detailed chapters of the article are in Chapter 21 P537

Inheritance generally implements the following three levels of meaning:

1) Subclass instances can share methods of the parent class;
2) Subclasses can override parent class methods or extend new methods;
3) Both the subclass and the parent class are types of subclass instances.

1. Structural inheritance method

The subclass calls the constructor of the parent class to maintain it. This inheritance method can achieve multiple inheritance, but it can only inherit the common methods of the parent class, cannot inherit static methods, and instanceof cannot be used to verify the instance.

function a(){
  this.say=function(){
  alert("happy new year!");
  }
}
function b(){
  a.apply(this,arguments);
}
a.prototype.fuck=function(){
  alert("%^&%^&%&^%&");
}
var oB=new b();
alert(oB instanceof a);// false
oB.say();       // happy new year
oB.fuck();       // 读不到

Copy after login

2. Prototypal inheritance/classic inheritance

This inheritance method achieves behavior reuse by copying an existing prototype object, allowing object instances to share the properties of the prototype object. Supports multiple inheritance, inherits prototype static methods, and can use instanceof to verify instances.

function a(){
 this.say=function(){
 alert("happy new year!");
 }
}
function b(){}
a.prototype.fuck=function(){
  alert("%^&%^&%&^%&");
}
a.prototype.z=123;
b.prototype=new a();
var oB=new b();
alert(oB instanceof a); // true
alert(oB.z);      // 123
oB.say();        // happy new year
oB.fuck();       // %^&%^&%&^%&

Copy after login

3. Instance inheritance/parasitic constructor pattern

The construction method cannot inherit the static methods of the type, and the prototype inheritance is incomplete (the non-enumerable methods of some core objects cannot be inherited), while the instance inheritance method can inherit the native core objects or DOM objects. It uses the type Inheritance is implemented by constructing an object and returning it, so the instanceof verification will be false and multiple inheritance is not supported.

function a(){
 var oA=new Array();
 oA.say=function(){
   alert("hello A!");
 }
 return oA;
}
var obj=new a();
alert(obj instanceof a); // false
obj.say();

Copy after login

4. Copy inheritance method

This method simulates inheritance by copying all enumerable properties and methods of the base class object, so it can simulate multiple inheritance, but those that cannot be enumerated cannot be inherited; it can inherit the static methods of the parent class;

function a(){
  this.num=123;
  this.say=function(){
  alert("happy new year!");
  }
}
function b(){
  this.extends=function(obj){
    for(each in obj){
      this[each]=obj[each];
    }
  }
}
var oB=new b();
oB.extends(new a());
alert(oB instanceof a); // false
alert(oB.num);     // 123
oB.say();        // happy new year

Copy after login

5. Mixed inheritance method

As the name suggests, it is to combine the above inheritance methods to learn from each other's strengths and make the inheritance more perfect. Common ones include structural prototypal inheritance: pseudo-classical inheritance

function a(){
  this.num=123;
  this.say=function(){
  alert("happy new year!");
  }
}
function b(){
  a.apply(this);
}
b.prototype=new a();
b.prototype.z=123;
var oB=new b();
alert(oB instanceof a); // true
alert(oB.num);     // 123
oB.say();        // happy new year

Copy after login

6. Advantages and Disadvantages of Various Inheritance Laws

I hope this article will be helpful to everyone in JavaScript programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template