Animal.call(this, name); what exactly is it? (understand inheritance in JS)

Preface

There is a problem in learning the knowledge points related to inheritance.
What do you mean by Animal.call(this, name) in the following code? Why does it mean that it inherits the attribute of the parent Animal?

function Animal(name) {
    this.name = name;
}
Animal.prototype.say = function() {
    return this.name;
}
function Cat(name, color) {
    Animal.call(this, name);
    this.color = color;
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
var cat = new Cat('Xiao Huang', 'yellow');

Later, I reviewed the knowledge of the new operator, which suddenly became clear.

1, Understanding the new operator

The key step in creating objects by constructing patterns is new operator , which creates an instance object based on the constructor.
In addition, it is very important that this will point to the instance object during the instantiation process, so that the corresponding properties and methods can be attached to the instance object.
Let's print this and find out that it's really an instance object, not the default window.

function Foo(name) {
    console.log(this);
    this.name = name;
}
var foo = new Foo('mm');

2, Understand the call method

call method It is function specific, which is used to change the direction of this.
The meaning behind this is: bind the method of a function to the corresponding object, so that the object can call it.
What do you mean? Look at the code:

function add(x, y) {
    console.log('The binding object is', this);
    return x + y;
}
var res1 = add(1, 2);
console.log(res1);
var obj = {};
var res2 = add.call(obj, 3, 4);
console.log(res2);


Although obj has no add method, it can be called through the call method. Observation shows that this has changed from window to obj!

3, call method and inheritance

Let's think about it. Taking advantage of the changed feature of this, we can't mount a series of properties and methods to obj silently as long as we write them as constructors?!
What do you mean? For example, this.name = name; since this is changed to obj, the original code becomes = = = > obj.name = name;
Look at the code:

function foo(name) {
    console.log('The binding object is', this);
    this.name = name;
    this.say = function() {
        console.log(`My name is ${this.name},I like programming!`);
    }
}
foo(); // Call foo directly, this points to window
var obj = {};
console.log('call call Before method obj: ',obj);
foo.call(obj, 'mm');
console.log('call call After method obj: ',obj);


After changing this point, attributes and methods are attached to objects, which is equivalent to inheritance?

4, Inheritance

Go back to the original code:

function Animal(name) {
    this.name = name;
}
Animal.prototype.say = function() {
    return this.name;
}
function Cat(name, color) {
    Animal.call(this, name);
    this.color = color;
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
var cat = new Cat('Xiao Huang', 'yellow');

The first step is to point the prototype of Cat function to the prototype object of Animal, so Cat inherits the say method on the prototype of Animal;

Cat.prototype = Object.create(Animal.prototype);

After changing the prototype object of Cat, its constructor property also changes, pointing to Animal, so it must be turned back, so,
The second step is to point the prototype object of Cat to itself (Cat);

Cat.prototype.constructor = Cat;

The third step is to instantiate the Cat object.

var cat = new Cat('Xiao Huang', 'yellow');
  • First, instantiate the object. At this time, this is bound to the instance object of Cat; (then execute the following code in turn)
  • Animal.call(this, name); at this time, the instance object calls the animal method and passes in the parameter name, so that the instance object has name;
  • this.color = color; next is Cat's own attribute color. Mount the color on the instance object, so that there is color on the instance object.
  • Returns the instance object.

Step 4: assign the instance object to cat.
Finally, does cat inherit Animal and have its own attribute color?

console.log(cat);
console.log(cat.say());


OK, we did it.

5, Summary

To sum up, the key to understand Animal.call(this, name): this binding object binds the instance object, while call method implements the inheritance of property or method.

Tags: Javascript Attribute Programming

Posted on Mon, 04 May 2020 13:01:51 -0700 by Lirpa