Talk about a variety of ways of inheritance in javascript

  • 2020-12-22 17:34:15
  • OfStack

JS does not inherit, but it can save the country by curve, using constructors, prototypes and other methods to achieve the function of inheritance.


 var o=new Object();

Instantiating an object with a constructor is inheritance, using all of the attributes and methods found in Object. So why can you access the methods of an Object object, when you're actually accessing the methods of its prototype object, all the methods are in the prototype and not in the class.


console.log(o.__proto__ === Object.prototype) // true  Nature of inheritance 
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);

object is the ancestor of all things, Everything is object.

1. Built-in objects inherit from object


var myNumber = new Number(10); // instantiation 1 Number object 

The string object is actually an instance of the String object


var s =  ' str';

In addition to having access to its own property methods, you can also access superclass property methods


console.log(s.toUpperCase());
console.log(s.toString());
 

2. Inheritance of custom objects


//  The parent class 
  var Person = function(){
   this.name='AV The teacher ';
   this.test=' Bi Fujian in the test ';
  } 
  Person.prototype={
   say:function(){
    console.log(' O buy dish ');
   }
  }
  //  The constructor 
  var Canglaoshi = function(name,age,cup){
   this.name=name;
   this.age=age;
   this.cup=cup;
  }
  //  inheritance person, has person Methods in prototype 
  Canglaoshi.prototype=new Person();
  Canglaoshi.prototype.ppp=function(){
   console.log(' Spluttered pa ');
  }
  //  The cang teacher has person The methods in 
  var xiaocang=new Canglaoshi(' empty ',18,'E');
  xiaocang.say();
  console.log(xiaocang.name);
  console.log(xiaocang.age);
  console.log(xiaocang.cup);
  console.log(xiaocang.test);

3, custom object inheritance prototype chain demonstration


(function() {
   // The parent class 
   function SuperParent() {
    this.name = 'mike';
   }

   // Subclass inherits its father  - 2 Inheritance: 
   function Parent() {
    this.age = 12;
   }
   Parent.prototype = new SuperParent(); // Through the prototype, the chain is formed 

   var parent = new Parent();
   console.log(" Test father can access grandpa attributes: " + parent.name);
   console.log(" The test father has access to his own properties: " + parent.age);

   // Continuation of the prototype chain  - 3 Time to inherit 
   function Child() { //brother structure 
    this.weight = 60;
   }
   Child.prototype = new Parent(); // Continuation of the prototype chain 


   // Prototype chain test 2
   // Son Integrated Grandpa 
   var child = new Child();
   console.log(" Test son can access grandpa's properties: " + child.name); // inherited Parent and Child, The pop-up mike
   console.log(" Test son can access father's attributes: " + child.age); // The pop-up 12
   console.log(" Test sons can access their own unique attributes: " + child.weight); // The pop-up 12

   // Prototype chain test 
   // Grandpa can visit Object The methods in 
   var test = new SuperParent();
   console.log(test.name);
   console.log(test.toString());
   // Access to the chain:  SuperParent Construct object -- " SuperParent A prototype object -- " Object object -- " Obect Prototype object (find toString Methods) -- " null

   console.log(child.name);
   // Prototype chain: Accessed first Child Constructor, found no name attribute -- "Looking for __proto__ , to determine whether the pointer is null -- "Pointing to the Child The prototype function, look for any name attribute -- " 
   //--- "Did not find, then judge it __proto__ Whether the attribute is null If not null Continue searching -- "Find parent Object to check if there is one name Attributes, no... 
  })()

4. Constructor inheritance


(function() {
   function People() {
    this.race = ' human ';
   }
   People.prototype = {
    eat: function() {
     alert(' Just eat ');
    }
   }

   /* Transvestite object */
   function Shemale(name, skin) {
    People.apply(this, arguments); //  with call Is also 1 Kind, pay attention to the number 2 A parameter 
    this.name = name;
    this.skin = skin;
   }
   // instantiation  
   var zhangsan = new Shemale(' zhang 3', ' Yellow skin ')
   console.log(zhangsan.name); // zhang 3
   console.log(zhangsan.skin); // Yellow skin 
   console.log(zhangsan.race); // human 
  })()

5. Combination inheritance


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

   function Man(name, age, no) {
    /* Will automatically call Person The method of while will name age Transfer the past */
    Person.call(this, name, age);
    // Own attributes 
    this.no = no;
   }
   Man.prototype = new Person();

   var man = new Man(" zhang 3", 11, "0001");
   console.log(man.name);
   console.log(man.age);
   console.log(man.no);
  })()

Copy inheritance


<script>
  +(function() {
   var Chinese = {
    nation: ' China '
   };
   var Doctor = {
    career: ' The doctor '
   };
   //   How can I make it " The doctor " Go to inherit " Chinese " In other words, how can I generate 1 a " Chinese doctor " The object? 
   //   Note here that both objects are normal objects, not constructors, and cannot be implemented using constructor methods " inheritance " . 
   function extend(p) {
    var c = {};
    for (var i in p) {     
     c[i] = p[i];    
    }
    c.uber = p;
    return c;
   }
   var Doctor = extend(Chinese);
   Doctor.career = ' The doctor ';
   alert(Doctor.nation); //  China 
  })()
 </script>

7. Parasitic combination inheritance


console.log(o.__proto__ === Object.prototype) // true  Nature of inheritance 
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);
0

8. Implement inheritance using the third party framework


console.log(o.__proto__ === Object.prototype) // true  Nature of inheritance 
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);
1

Hope to learn javascript program design to help you.


Related articles: