js inheritance method and call and apply methods

Posted by foid025 on Thu, 23 Dec 2021 18:20:58 +0100

The method of the first page is inherited by the class of ES6

Create two constructors with class, which are divided into parent constructor, child constructor, and child constructor extensions, which inherit the parent constructor

Instantiate the object that creates the sub constructor, pass in parameters, and call methods

  <script>
    class Person {
      constructor(uname,age) {
        this.uname = uname
        this.age = age
      }
      say() {
        console.log('hello');
      }
    }
    class Son extends Person{
      constructor(uname,age,x,y){
        super(uname,age)
        this.x = x
        this.y = y
      }
      num() {
        console.log(this.x + this.y);
      }
    }
    var son = new Son('Zhang San',18,5,5)
    son.num() + son.say()

  </script>

 

The second method uses prototype inheritance

Create two constructors: the parent constructor, the child constructor, and the prototype of the child constructor = instantiate the object of the parent constructor, and then the prototype of the child constructor Constructor = sub constructor (changed back)

  <script>
    function Father(uname,age) {
      this.uname = uname
      this.age = age
    }
    Father.prototype.say = function() {
      console.log('hello' + this.uname);
    }
    function Son(score) {
      this.score = score
    }
    Son.prototype = new Father('Zhang San',18)
    Son.prototype.constructor = Son
    var son = new Son(99)
    console.log(son.uname);
    son.say()
  </script>

characteristic

1. Place the prototype of the parent class on the prototype chain of the child class instance. The instance wants to call these methods based on the - proto - prototype chain lookup mechanism

2. Subclasses can override the methods on the parent class

3. Private or public attributes and methods in the parent class will eventually become public attributes and methods

The third parasitic combination inheritance

Create two constructors, which are divided into a parent constructor and a child constructor, in which person Call (this) calls the method of the parent constructor, changes this of the parent constructor to this of the child constructor, and instantiates the object of the parent constructor through the prototype = of the self constructor, (you can access the method of the parent constructor through the - proto - of the object of the parent constructor) that is, the method of the child constructor object can access the parent constructor. However, at this time, the constructor in the child constructor prototype is the object instantiated by the parent constructor and no longer points to the instantiated object of the child constructor (a little detour. In short, it is divided into two steps. One step is through Person.call (this) call the properties of the parent constructor. The second step is that the prototype of the child constructor is equal to the instantiation object of the parent constructor and access the method of the parent constructor. At this time, the constructor in the child constructor points to the instantiation object of the parent constructor through the child constructor. prototype.constructor = child constructor)

 <script>
    function Person(uname,age){
      this.uname = uname
      this.age = age
    }
    Person.prototype.money=function(){
      console.log(10000);
    }
    Son.prototype=new Person()
    Son.prototype.constructor=Son
    function Son(uname,age,score){
      Person.call(this,uname,age)
      this.score = score
    }
    var son = new Son('Zhang San',18,90)
    console.log(son);
    son.money()
    console.log(Person.prototype);
    console.log(Son.prototype);
  </script>

call method

Handle the problem of this pointing inside the function

The call method is often used for inheritance. For example, the code of the third inheritance method above uses the call method to call the properties of the parent constructor and change this of the parent constructor to this of the child constructor

apply method

Handle the problem of this pointing inside the function

    var arr = [1,2,5,6,84,95,63,51]

    let max = Math.max.apply(Math,arr)

    let min = Math.min.apply(Math,arr)

    console.log(max,min);

The apply method passes an array, which is often used to achieve the maximum and minimum values of the array

The difference between call and apply

Call and apply will call the function and change the this point inside the function

The parameters passed by call and apply are different. The parameters passed by call are in the form of arr1 and arr2. Application must be in the form of array [arr1],[arr2]

Topics: Javascript