JavaScript Inheritance Learning Notes "novice must see" _javascript skills

JavaScript as an object-oriented language (JS is object-based), you can implement inheritance is essential, but because it does not have the concept of class, so does not like the real object-oriented programming language through the class implementation of inheritance, but can be implemented in other ways inheritance. There are many ways to implement inheritance, and here are just a few of them.

I. Prototype chain inheritance

function person () {  //inherited functions are called supertype (parent, base class)
      this.name= ' Mumu ';
      This.age= ';
    }
    
    Person.prototype.name= ' susu '/////When attribute names need to be nearest to the principle, look in the instance first, not find the function in the prototype
       
    Worker () {//inherited functions are called subtypes (subclasses, derived classes)
      this.job= ' student ';
    }

    Worker.prototype=new person ()//through the prototype chain inheritance, the superclass instantiation of the object instance, assigned to the subclass of the prototype property
    var p2=new Worker (); 

    Console.log (p2.name);
    Console.log (P2 instanceof object);//ture all constructors inherit from object

The key to the implementation of the above is: worker.prototype=new person (); A worker's prototype becomes an instance of person, inherited through a prototype chain.

Note: When using a prototype chain to implement inheritance, you cannot use object literals to create a prototype method, because it breaks the relationship and rewrites the prototype chain.

Prototype chain inheritance problem:

1. There are reference sharing issues, they still share a space, subclasses affect the parent class

function person () {  
      this.bodys=[' eye ', ' foot '];
    }
    
    function Worker () { 
    }

    worker.prototype=new person ();
    var p1=new Worker ();
    P1.bodys.push (' hand ');
    var p2=new Worker (); 
    Console.log (P1.bodys);
    Console.log (P2.bodys);

2. When you create an instance of a subtype, you cannot pass parameters like a superclass constructor.

So how to solve the two problems of the prototype chain? Then keep looking at the following inheritance way.

Two. Borrowing constructor inheritance (also called object impersonation, forgery object or classical inheritance)

function Person (name,age) {
    this.name=name;
    This.age=age;
    this.bodys=[' eye ', ' foot '];

  Person.prototype.showname=function () {
    console.log (this.name);
  }

  function Worker (name,age,job) {
    person.call (this,name,age);
    this.job=job;//Subclass add Attribute
  }

  var p1=new Worker (' Mumu ', ' 18 ', ' Student '); 
  P1.bodys.push (' hand ');
  var p2=new Worker ();

  Console.log (p1.name);
  Console.log (P2.bodys);
  Console.log (P1.showname ());

A simple analysis of the use of the borrowed constructor in the following principle: Person.call (this,name,age); This code calls the parent constructor, inherits the parent property, and uses the call method to invoke the person constructor to change this when the function is executed, where the this- > New A Worker object constructor camouflage method: Pass the worker to the person above.

The reference type is not shared when it is placed in the constructor, so P2 is not affected.

It solves the problem that the prototype chain cannot pass parameters and reference type sharing by using the constructor inheritance method.

Small knowledge: Call () and apply () methods can change the scope of function execution, in short, change the content of this point in the function.

Call () and apply () accept two parameters: the first is the scope in which the function is run, and the other is the passed parameter.

The difference between call and apply is the different parameters.
The parameters in call must be enumerated one after the other.
The parameters in apply must be an array or a arguments object

So the question is: why P1.showname () The result is wrong? ----Because borrowing a constructor inherits only the properties and methods in the constructor. A problem with the use of constructors is also found here.

Note: Because the method is placed in the constructor, each time we instantiate the memory space will be allocated to the waste of resources, so we usually put the method in the prototype, attributes in the constructor.

To borrow a constructor inheritance problem:

Because borrowing constructors can only inherit properties and methods from constructors, methods defined in the superclass stereotype are not visible to the subclass, so they are equivalent to the absence of a prototype. As a result, all methods are defined only in the constructor, so there is no function reuse.

So how do you solve the problem of borrowing a constructor? That depends on the way it's inherited.

Three. Combinatorial inheritance (pseudo-classical inheritance)

function Person (name,age) {
    this.name=name;
    this.age=age;
  }

  Person.prototype.showname=function () {
    console.log (this.name);
  }

  function Worker (name,age,job) {
    person.call (this,name,age);//borrow constructor
    this.job=job;
  }
  
  Worker.prototype=new person ()//prototype chain inherits
  var p1=new Worker (' Mumu ', ' 18 ', ' Student '); 

  Console.log (p1.age);
  P1.showname ();

Combinatorial inheritance: Combining a prototype chain with a borrowed constructor.

Idea: By using the prototype chain to implement the property and method inheritance on the prototype, we can use the constructor to implement the inheritance of the instance property.

The above example Person.call (this,name,age); The borrowed constructor inherits the property

Worker.prototype=new person (); The prototype chain inherits the method, avoids both disadvantages, blends their advantages and becomes the most common inheritance pattern.

Problems with combinatorial inheritance:

Call the two-time superclass constructor, one time when you are creating the subtype prototype, and the other is inside the constructor of the subtype.

To solve this problem, we need to use the parasitic modular inheritance method.

Four. Prototype inheritance

Function Object (proto) {
    function F () {}
    f.prototype = Proto;
    return new F ();
  }

  var person = {
    name: ' Mumu ',
    friends: [' xiaxia ', ' Susu ']
  };

  var Anotherperson = object (person);
  AnotherPerson.friends.push (' Wen ');
  var Yetanotherperson = object (person);
  AnotherPerson.friends.push (' Tian ');
  Console.log (person.friends);//["Xiaxia", "Susu", "Wen", "Tian"]
console.log (anotherperson.__proto__)//object {name: ' Mumu ', Friends:array[4]}

Simple analysis: Function object (proto) is a temporary transfer function in which the parameter proto represents an object that will be passed in, and the F () constructor is a temporary new object that stores the objects passed over, F.prototype = Proto; Assigns an object instance to the prototype object of the F constructor, and finally returns an object instance of the object passed over. Stereotype inheritance or a property that shares a reference type.

Five. Parasitic inheritance

Temporary relay functions function  
Object (proto) {function
    F () {}
    f.prototype = Proto;
    return new F ();
  }

  Parasitic function function
  Create (proto) {
    var f=object (proto);
    F.love=function () {return
      this.name;
    }
    return f;
  }

  var person = {
    name: ' Mumu ',
    friends: [' xiaxia ', ' Susu ']
  };

  var Anotherperson = create (person);
  Console.log (Anotherperson.love ()); Parasitic modular inheritance

Six. Parasitic Modular inheritance

Function Object (proto) {
    function F () {}
    f.prototype = Proto;
    return new F ();
  }

  Parasitic function function Create
  (person,worker) {
    var f=object (person.prototype);//Create Object
    f.constructor=worker;// Adjusts the prototype construction pointer to enhance the object
    worker.prototype=f;//the specified object
  }
  
  function Person (name,age) {
    this.name=name;
    this.age=age;
  }
  Person.prototype.showname=function () {
    console.log (this.name);
  }
  function Worker (name,age,job) {
    person.call (this,name,age);
    this.job=job;
  }
  
  Create (Person,worker);//Parasitic modular inheritance
  var p1=new person (' Mumu ', ' 18 ', ' Student ');
P1.showname ();

This is also the most perfect and ideal way to implement the inheritance method now.

The above JavaScript inheritance learning notes "novice must see" is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.