使用call（）进行继承。 为什么它持续存在？

Question

I've been reviewing several examples of inheritance using prototype in javascript.

Though I understand the main of it, I still don't fully understand in these examples why after calling call() method its effect persist when we create new instances afterwards.

Example code from https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/

var asCircle = function() {
  this.area = function() {
    return Math.PI * this.radius * this.radius;
  };
  this.grow = function() {
    this.radius++;
  };
  this.shrink = function() {
    this.radius--;
  };
  return this;
};

var Circle = function(radius) {
    this.radius = radius;
};
asCircle.call(Circle.prototype);
var circle1 = new Circle(5);
circle1.area(); //78.54

I thought that call() assigned this scope in the same moment it is invoked, and only in that moment. However, after invoking call() we create instances of Circle (circle1) and circle1 is still 'remembering' to use Circle prototype to use asCircle methods.

I understand way better the similar approach when call() is called everytime an instance is created. It'd be like:

 var Circle = function(radius) {
        this.radius = radius;

        asCircle.call(this);
    };

Am I not understanding well how call() persists after being invoked?

Would it make any difference between these two snippets in terms of inheritance?:

function Animal(name){
   this.name = name;
    this.speak = function(){ 
       console.log("my name is: " + this.name);
    }
};
function Cat(name) {
    this.catproperty = "whatever";
    Animal.call(this, name);
}
Cat.prototype = new Animal();

var cat = new Cat('Joe');
cat.speak();

versus:

function Animal(name){
    this.name = name;
    this.speak = function(){ 
       console.log("my name is: " + this.name);
    }
};

function Cat(name) {
 this.name = name;
 this.catproperty = "whatever";
}

Animal.call(Cat.prototype, );

var cat = new Cat('Joe');
cat.speak();

Answer 1

I thought that call() assigned this scope in the same moment it is invoqued, and only in that moment.

It sets the value of this for that function call.

The asCircle function modifies the object that this refers to .

After the function finishes running, the value of this goes away. The changes to the value don't go away.

Answer 2

asCircle and Circle, both are function constructors. Function constructors instantiates new objects and sets the property of the objects as defined inside a constructor, when called with the "new" operator.

Now, when you wrote the below line of code

asCircle.call(Circle.prototype);

it meant that the "this" inside asCircle will directly point to "proptotype" property of the Circle function, hence modifying it. Hence, any object being created with the Circle function constructor (circle1 in this case) will have access to the modified prototype property.

PS: In javascript when an object, function or array is passed to any method it is passed by reference and it can be modified permanently by the method to which it is passed. Primitives(string, integers etc) are passed by value.