Front End Question summary two (JS prototype inheritance)

Today this article has compiled JS prototype and some of the inheritance of knowledge points, the interview time base! This! are Yes! Ask! Please read the following carefully to see what you still have to know the point of need to master it ~

1. Prototype chain

Basic idea: Use a prototype to have a reference type inherit the properties and methods of another reference type.

Constructors, prototypes, relationships between instances: each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

Prototype chain Implementation Inheritance Example:

function a() { this .name = ‘张三‘ ; } a.prototype.getName = function () { return this .name; } function b() { this .name = ‘李四‘ ; } //继承了a b.prototype = new a(); b.prototype.getName = function (){ return this .name; } var instance = newB (); console.log(instance.getName()); //‘李四‘

Change the simple point

function A () {
THIS.name = ' Zhang San ';
}
A.prototype.getname = function () {
return this.name;
}

var instance = new A ();
Console.log (Instance.getname ());//' Zhang San '

2. Borrowing Constructors

Basic idea: The superclass constructor is called inside the subtype constructor, and the constructor can be executed on the newly created object by using the call () and the Apply () methods.

Example:

function a() { this .colors = [ "red" , "blue" , "green" ]; } function b() { a.call( this ); //继承了a } var instance1 =  new b(); instance1.colors.push( "black" ); console.log(instance1.colors); //"red","blue","green","black" var instance2 =  new b(); console.log(instance2.colors); //"red","blue","green" 3. Combining InheritanceBasic idea: Combine the prototype chain and the technique of borrowing the constructor in one piece, thus play a kind of inheritance pattern of the two long.

function A (name) {
THIS.name = name;
This.colors = ["Red", "Blue", "green"];
}
A.prototype.sayname = function () {
Console.log (this.name);
}
Function B (name, age) {
A.call (this,name);//Inheritance Property
This.age = age;
}
Inheritance method
B.prototype = new A ();
B.prototype.constructor = b;//This is to allow the constructor of B to re-refer to the class itself, otherwise it becomes the constructor of the class that was previously inherited, and may be unexpected when called later.

B.prototype.sayage = function () {
Console.log (This.age);
}
var Instance1 = new B ("Hong", 18);
Instance1.colors.push ("Black");
Console.log (instance1.colors);//"Red", "Blue", "green", "black"
Instance1.sayname ();//"Hong"
Instance1.sayage ();//18
var instance2 = new B ("Su", 20);
Console.log (instance2.colors);//"Red", "Blue", "green"
Instance2.sayname ();//"Su"
Instance2.sayage ();//20

3. Parasitic combination inheritance

functionbeget(obj){   // 生孩子函数 beget：龙beget龙，凤beget凤。

    varF = function(){};

    F.prototype = obj;

    returnnewF();

}

functionSuper(){

    // 只在此处声明基本属性和引用属性

    this.val = 1;

    this.arr = [1];

}

//  在此处声明函数

Super.prototype.fun1 = function(){};

Super.prototype.fun2 = function(){};

//Super.prototype.fun3...

functionSub(){

    Super.call(this);   // 核心

    // ...

}

varproto = beget(Super.prototype); // 核心

proto.constructor = Sub;            // 核心

Sub.prototype = proto;              // 核心

varsub = newSub();

alert(sub.val);

alert(sub.arr);

This way is the best way, but too troublesome, usually just textbook use, not much explanation

 

4 Parasitic inheritance

functionbeget(obj){   // 生孩子函数 beget：龙beget龙，凤beget凤。

     var F =  function (){};      F.prototype = obj;      return new F(); } function Super(){      this .val = 1;      this .arr = [1]; } function getSubObject(obj){      // 创建新对象      var clone = beget(obj);  // 核心      // 增强      clone.attr1 = 1;      clone.attr2 = 2;      //clone.attr3...      return clone; } var sub = getSubObject( new Super()); alert(sub.val);      // 1 alert(sub.arr);      // 1 alert(sub.attr1);    // 1 to learn about inheritance in ES6 please follow the next article

Front End Question summary two (JS prototype inheritance)