JavaScript inheritance study notes [must read for newbies]_javascript skills

as an object-oriented language (js is based on objects), javascript is essential to realize inheritance. however, since it does not have the concept of classes, it will not realize inheritance through classes like a real object-oriented programming language. but inheritance can be achieved in other ways. there are many ways to implement inheritance, and here are just a few of them.

1. prototype chain inheritance

function person() {  //被继承的函数叫做超类型（父类，基类）
      this.name='mumu';
      this.age='18';
    }
    
    person.prototype.name='susu';//当属性名相同时需就近原则，先在实例里面查找，没找到再到原型里找
       
    function worker(){ //继承的函数叫做子类型（子类，派生类）
      this.job='student';
    }

    worker.prototype=new person();//通过原型链继承，超类型实例化后的对象实例，赋值给子类的原型属性
    var p2=new worker(); 

    console.log(p2.name);
    console.log(p2 instanceof object);//ture 所有的构造函数都继承自object

the key to implementing inheritance above is: worker.prototype=new person(); turn the prototype of worker into an instance of person and inherit through the prototype chain.

note: when using the prototype chain to implement inheritance, you cannot use object literals to create prototype methods, because this will break the relationship and rewrite the prototype chain.

prototype chain inheritance issues:

1. there is a reference sharing problem. they still share the same space, and the subclass will 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 creating an instance of a subtype, parameters cannot be passed in the constructor of the supertype.

so how to solve the two problems of the prototype chain? then continue to look at the following inheritance methods~

2. borrowing constructor inheritance (also called object impersonation, fake object or classic 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;//子类添加属性
  }

  var p1=new worker('mumu','18','学生'); 
  p1.bodys.push('hand') ;
  var p2=new worker();

  console.log(p1.name);
  console.log(p2.bodys);
  console.log(p1.showname());

a brief analysis of the above principle of using borrowed constructors: person.call(this, name, age); this code calls the parent constructor, inherits the parent properties, and uses the call method to call the person constructor to change the execution time of the function. this, here is a worker object from this-> new constructor disguise method: pass the worker to the person above.

when the reference type is placed in the constructor, it will not be shared, so p2 is not affected.

the constructor inheritance method is used here to solve the problem that the prototype chain cannot pass parameters and reference types are shared.

tips: the call() and apply() methods can change the scope of function execution. in short, they change the content pointed to by this in the function.

both call() and apply() accept two arguments: the first is the scope in which the function is run, and the other is the passed argument.

the difference between call and apply is the difference in parameters.
the parameters in call must be enumerated one by one.
parameters in apply must be arrays or arguments objects

then the question arises: why is the result of p1.showname() wrong? ----because the borrowed constructor inheritance method can only inherit the properties and methods in the constructor. a problem with borrowing constructors is also discovered here.

note: since all methods are placed in the constructor, every time we instantiate it, memory space will be allocated to it, causing a waste of resources. therefore, generally we put the methods in the prototype and the attributes in the constructor. .

borrowing constructor inheritance problem:

because the borrowed constructor can only inherit the properties and methods in the constructor, the methods defined in the prototype of the super type are invisible to the subclass, so it is equivalent to having no prototype. as a result, all methods can only be defined in the constructor, so there is no function reuse.

so how to solve the problems caused by borrowing constructors? then we have to look at the following inheritance method

3. combination 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);//借用构造函数
    this.job=job;
  }
  
  worker.prototype=new person();//原型链继承
  var p1=new worker('mumu','18','学生'); 

  console.log(p1.age);
  p1.showname();

combined inheritance: combine prototype chains with borrowed constructors.

idea: realize the inheritance of attributes and methods on the prototype by using the prototype chain, and realize the inheritance of instance attributes by borrowing the constructor

the above example person.call(this,name,age); borrows the constructor to inherit the properties

worker.prototype=new person(); the prototype chain inherits the method, avoiding the shortcomings of both, integrating their advantages, and becoming the most commonly used inheritance pattern.

problems with combined inheritance:

the supertype constructor is called twice, once when creating the subtype prototype and once inside the subtype's constructor.

to solve this problem, we need to use parasitic combined inheritance.

4. prototypal 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]}

a brief analysis: function object (proto) is a temporary transit function. the parameter proto inside represents an object to be passed in. the f () constructor is a temporarily newly created object used to store the passed object. f .prototype = proto; assigns the object instance to the prototype object of the f constructor, and finally returns the object instance of the passed object. prototypal inheritance still shares properties of reference types.

5. parasitic inheritance

//临时中转函数  
function object(proto) {
    function f() {}
    f.prototype = proto;
    return new f();
  }

  //寄生函数
  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());寄生组合式继承

6. parasitic combined inheritance

function object(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
  }

  //寄生函数
  function create(Person,Worker){
    var f=object(Person.prototype);//创建对象
    f.constructor=Worker;//调整原型构造指针，增强对象
    Worker.prototype=f;//指定对象
  }
  
  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);//寄生组合式继承
  var p1=new Person('mumu','18','学生');
p1.showName();

this method is also the most perfect and ideal among the current inheritance methods.

the above javascript inheritance study notes [must read for newbies] are all the content shared by the editor. i hope it can give you a reference, and i hope you will support script home.